热身开始

了解了commonjs和 ES6 Module 模块化之后，
两者语法的不一样 = commonjs 是执行时引入的（动态）+ES6 Module是打包时引入（静态）。

可能看这文字，咱也不知道是什么意思，总之你先记住两个词，就是动态和静态。

代码演示

演示一下怎么去动？怎么去静？
show time。
代码位置：…/jyb-code/es6-module-test/commonjs-test/index.js

const flag = true
if (flag) {
    const {sum,test} = require('./utils')
    test()
    const res = sum(1000,24)
    console.log(res)
}

代码执行解读：
因为flag是true，所以说这个代码肯定会被执行，
万一你写成false，那就不执行了，是这个逻辑。
运行代码，执行结果：

想一想，我们在js语法执行的时候，if语句能不能执行？
我们在这个代码执行之前，我们能确定吗？不能确定，因为这个flag到底是true还是false你在执行到这一行之前是不知道的，所以说程序还没有开始执行的时候，你不知道这个flag是true或者false。

然后const {sum,test} = require('./utils')被执行，说明什么？
说明我们这个引用是动的，什么叫动呢？
就是我们程序在执行到这个地方的时候，才会去引用这个utils，才会去把这个sum和test拿出来。它是动态的。
什么是静态？
文件位置：…/jyb-code/es6-module-test/src/App.vue

...
import HelloWorld from './components/HelloWorld.vue'

const flag = true
if (flag) {
  import {sum,test} from './utils'
}
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  ...

运行代码，执行结果：

error Parsing error: 'import' and 'export' may only appear at the top level
是说 ‘import’ and ‘export’ 只能出现在顶级，就是这样的：

正确写法：

...
import HelloWorld from './components/HelloWorld.vue'

// import sum from './utils'
import {sum,test} from './utils'
// const flag = true
// if (flag) {
//   import {sum,test} from './utils'
// }
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  ...

我会这样类比动态和静态：
Python是解释型语言，把它理解成动态，那么在导包的时候是可以在使用这个包的上一行去引入的，不一定非要在模块文件的开头引入；
C语言是编译型语言，把它理解成静态，那么一般会先在模块文件开头导入文件，比如头文件。

这个类比不一定正确，但它的作用是方便自己理解和记忆 动 和 静。

4.1 为何要使用模块化

我们为什么要使用模块化？不用行不行？当然是不行，对吧？但是为什么要用呢？这个问题要思考清楚，你如果这个问题思考不清楚的话，光去傻傻的用，这肯定不行的，

这个用一段时间会阻碍你的眼光，然后会阻碍你的发展。所以我们想一下。第一条拆分开之后便于代码的组织和管理。

大家想一下，如果是项目比较大的话，代码比较多，项目加起来的代码有几十万行，甚至是几百万行，当然还有很多项目是上亿行代码，这也不稀奇。

比如 Windows 这个系统的这个体系加起来代码绝对上亿，

比如说我们现在要做的这些项目，如果不把这个模块拆分开，那这个代码和组织和管理，那就乱了，你想想所有的代码那么多都放在一个文件里面。

别说别的，你打开都费劲。别说组织和管理了，所以说模块化的拆分，它便于代码的一个组织和管理，我们可以拆拆拆，把这块放在这，那块放在那。这样的话，它就清晰了。

第二个，就是便于多人协作开发，想象一下，一个项目不可能一个人开发，项目越大，这个协作的人就越多。

如果是说没有模块化，所有代码都混在一块，如果协作开发的话，那大家全部开发一个代码文件，那不就乱了吗？很容易产生冲突，你改着改着，别人又改了你的了。如果是模块拆分开的话，大家各写各的，你一个文件，我一个文件，写完之后一合并，没事了，只要定好我们的引用的规范就可以了。

总之是得益于模块化的拆分。

成熟的语言都是支持模块化的，比如说这个C语言，C++，Java，Python，Go这些，包括Nodejs，它都是支持模块化。

如果一个语言不支持模块化，那这个语言就没法我们在项目中去使用。