babel 和 browserify 编译

如何使用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 !