本質(zhì)是 結(jié)合 babel語(yǔ)法轉(zhuǎn)化(轉(zhuǎn)換完包含commonJS的語(yǔ)法 如require) 和 browserify(生成require函數(shù),將多個(gè)前端資源打包成一個(gè)js文件)
ES6-Babel-Browserify使用教程
1. 定義package.json文件,也可 npm init
{
"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
- preset 預(yù)設(shè)(將es6轉(zhuǎn)換成es5的所有插件打包)
3. 定義.babelrc文件 rl= run controll
{
"presets": ["es2015"] // "這里的數(shù)組是babel編譯前提前查看要做哪些語(yǔ)法轉(zhuǎn)換["es2015","react"]"
}
4. 編碼
js/src/module1.js 分別暴露
export function foo() {
console.log('module1 foo()');
}
export function bar() {
console.log('module1 bar()');
}
export const DATA_ARR = [1, 3, 5, 1]
js/src/module2.js 統(tǒng)一暴露
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 默認(rèn)暴露
export default {
name: 'Tom',
setName: function (name) {
this.name = name
}
}
js/src/app.js 主文件import導(dǎo)入模塊
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語(yǔ)法) : babel js/src -d js/lib
- 使用Browserify編譯js : browserify js/lib/app.js -o js/lib/bundle.js
6. 頁(yè)面中引入測(cè)試
<script type="text/javascript" src="js/lib/bundle.js"></script>
7. 引入第三方模塊(jQuery)
- 下載jQuery模塊:
- npm install jquery@1 --save
- 在app.js中引入并使用
import $ from 'jquery' $('body').css('background', 'red')
