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 中


创建一个.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 文件的位置



    修改为--->


此时打开 index.html ,打开F12即可看到

hello world !
hello dear !

你可能感兴趣的:(babel 和 browserify 编译)