JS模块化5 - ES6-Babel-Browserify
文件结构:
![](https://img2022.cnblogs.com/blog/879695/202208/879695-20220811171654508-1657318275.png)
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~
![](https://common.cnblogs.com/images/loading.gif)