JS模块化5 - ES6-Babel-Browserify

文件结构：

 

Banel 官网：https://www.babeljs.cn/

 

1. 定义 package.json 文件

$ npm init

 

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

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

preset 预设(将es6转换成es5的所有插件打包)

 

3. 定义 .babelrc 文件:

{
    "presets": ["es2015"]
}

 

4. 编码:

module1.js

//分别暴露
export function foo() {
    console.log('module1 foo()')
}

export function bar() {
    console.log('module1 bar()')
}

export const DATA_ARR = [1, 3, 5, 1]

 

module2.js

let data = 'module2 data'

function fun1() {
    console.log('module2 fun1', data)
}

function fun2() {
    console.log('module2 fun2', data)
}

//统一暴露
export {fun1, fun2}

 

module3.js

//默认暴露:可以暴露任意数据类型，暴露什么数据，接收的就是什么数据
// export default ()=>{
//     console.log('default。。。。')
// }

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

 

app.js

//引入其它模块
//import xxx from '路径'
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', 'skyblue')

foo()
bar()
console.log(DATA_ARR)
fun1()
fun2()

// person()
person.setName('lisi')
console.log(person.name)

在使用第三方模块之前要先下载，再引入使用：

　　下载 jquery:

npm install jquery@1 --save

 

5.编译:

使用 Babel 将 ES6 编译为 ES5 代码 (但包含 CommonJS) 语法：

$ babel js/src -d js/lib

 

使用 browserify 编译 js:

$ browserify js/lib/app.js -o js/lib/bundle.js

 

6.页面中测试：

<script type='text/javascript' src='js/lib/bundle.js'></script>

 

end~