本文共 1288 字，大约阅读时间需要 4 分钟。

ES6-Babel-Browserify使用教程

1. 定义package.json文件

{  "name" : "es6-babel-browserify",  "version" : "1.0.0"}

2. 安装babel-cli, babel-preset-es2015和browserify

• npm install babel-cli browserify -g
  • npm install babel-preset-es2015 --save-dev

3. 定义.babelrc文件

   {"presets": ["es2015"]

}

• js/src/module1.js

  export function foo() {  console.log('module1 foo()');}export let bar = function () {  console.log('module1 bar()');}export const DATA_ARR = [1, 3, 5, 1]

• js/src/module2.js

  let data = 'module2 data'function fun1() {  console.log('module2 fun1() ' + data);}function fun2() {  console.log('module2 fun2() ' + data);}export {fun1, fun2}

• js/src/module3.js

  export default {  name: 'Tom',  setName: function (name) {    this.name = name  }}

• js/src/app.js

  import {foo, bar} from './module1'import {DATA_ARR} from './module1'import {fun1, fun2} from './module2'import person from './module3'import $ from 'jquery'$('body').css('background', 'red')foo()bar()console.log(DATA_ARR);fun1()fun2()person.setName('JACK')console.log(person.name);

5. 编译

• 使用Babel将ES6编译为ES5代码(但包含CommonJS语法) : babel js/src -d js/lib
• 使用Browserify编译js : browserify js/lib/app.js -o js/lib/bundle.js

6. 页面中引入测试

7. 引入第三方模块(jQuery)
   1). 下载jQuery模块:
   • npm install jquery@1 --save
     2). 在app.js中引入并使用

   import $ from 'jquery'$('body').css('background', 'red')

转载地址：http://lavii.baihongyu.com/