babel编译html文件,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 !