如何使用es6模块化?
使用起来其实非常简单
在 module1.js 中
var hello = 'hello world !';
function sayHello(){
console.log('hello dear !')
}
export {hello,sayHello} //对外暴露
在 main.js 中
// 在引入的时候使用es6的对象的解构赋值
import {hello,sayHello} from './module1.js'
console.log(hello); // hello world !
sayHello(); // hello dear !
在 index.html 中
<script type="text/javascript" src="js/src/main.js"></script>
创建一个.babelrc文件（注意前缀有个.）
{
"presets":["es2015"]
}
此时打开 index.html 时，在控制台中可见报错
Uncaught SyntaxError: Unexpected token import
因为浏览器无法识别 import 和 export 语法，所以要对js进行编译
在根目录下，使用一下命令安装 babel 和 browserify
$ npm install babel-cli browserify -g
$ npm install babel-preset-es2015 --save-dev
安装完成之后，使用babel将es6编译为es5代码（但包含CommonJS语法）
$ babel js/src -d js/lib
// -d 左侧是 main.js 和 hello.js 的位置
// -d 右侧是 bable编译后，会自动新建一个文件夹作为 编译后js 文件存放的位置
使用 browserify 编译js
browserify js/lib/main/js -o js/dist/bundle.js
// 使用 browserify 编译时，不会自动创建编译后的文件夹，需要事先手动创建
// -o 左侧是 需要编译的js文件的位置
// -o 右侧是 编译之后的js存放的位置
编译完成之后，修改 index.html 引入的 main.js 文件的位置
<script type="text/javascript" src="js/src/main.js"></script>
修改为--->
<script type="text/javascript" src="js/dist/bundle.js"></script>
此时打开 index.html ，打开F12即可看到
hello world !
hello dear !
