1.ES模块化如何使用，开发环境如何打包？

使用-> 语法是怎么样的。
开发环境-> webpack,rollup...

语法：在export里面分为export defalut 和export ,export default 就是默认输出的意思，一个文件只有一个export default，但是可以有多个export ，在import 时如果为export default 就不需要加大括号，但是如果是 export 需要加上大括号。

开发环境：将模块化打包的工具有webpack,rollup等，其中webpack比较普遍，他的功能也比较丰富，然后rollup他是属于功能比较单一的，但是比较强大，在对比bundle.js里面的输出可以发现，webpack他编译出来上面会一段他自带的东西，然后像rollup他就只有一段umd相关的，以及下面都会较好地保留你的代码，方便你去做调试。同时 rollup会比webpack 打包出的文件小很多。无论采用哪个工具进行打包，都需要用到babel来进行编译转化，将当前的ES6的语法转化为浏览器可以使用的ES5,或者ES4的语法。

展望：JS的模块化标准从很早以前的远古时期是没有标准，到后来的AMD成为标准，require.js是他的标准，也有CMD的标准，但现在CMD使用的比较少了，到打包工具的出现，ES6的出现，统一的模块化标准，现在的浏览器都还没有对ES6支持较好，因此都需要用打包工具将其打包成可以使用的ES5。对于标准，我们可以选择去造一个LIB，但不要自造一个标准。

util1.js

export default {
    a: 100
}

util2.js

export function fn1() {
    console.log('fn1')
}

export function fn2() {
    console.log('fn2')
}

index.js

import util1 from './util1.js'
import {fn1, fn2} from './util2.js'

console.log(util1.a)
fn1()
fn2()

ES6 思考学习记录（一）

1.ES模块化如何使用，开发环境如何打包？

猜你喜欢