ES6模块化使用_前端培训
使用
通常我们会借助Babel和Browserify来使用ES6的模块化
下面介绍ES6-Babel-Browserify使用教程
简单来说就一句话：
使用Babel将ES6编译为ES5代码，使用Browserify编译打包js
步骤：
定义package.json文件
安装 babel-cli,babel-preset-es2015和 browserify
- npm install babel-cli browserify -g
- npm install babel-preset-es2015 –save-dev
定义.babelrc文件
{
“presets”: [“es2015”]
}
定义模块代码
//module1.js文件
// 分别暴露
export function foo() {
console.log(‘foo() module1’)
}
export function bar() {
console.log(‘bar() module1’)
}
//module2.js文件
// 统一暴露
function fun1() {
console.log(‘fun1() module2’)
}
function fun2() {
console.log(‘fun2() module2’)
}
export { fun1, fun2 }
//module3.js文件
// 默认暴露 可以暴露任意数据类项，暴露什么数据，接收到就是什么数据
export default () => {
console.log(‘默认暴露’)
}
// app.js文件
import { foo, bar } from ‘./module1’
import { fun1, fun2 } from ‘./module2’
import module3 from ‘./module3’
foo()
bar()
fun1()
fun2()
module3()
编译并在index.html中引入
使用Babel将ES6编译为ES5代码(但包含CommonJS语法) : babel js/src -d js/lib
使用Browserify编译js : browserify js/lib/app.js -o js/lib/bundle.js
然后在index.html文件中引入
<script type=”text/javascript” src=”js/lib/bundle.js”></script>
此外第三方库(以jQuery为例)如何引入呢？ 首先安装依赖npm install jquery@1 然后在app.js文件中引入
//app.js文件
import { foo, bar } from ‘./module1’
import { fun1, fun2 } from ‘./module2’
import module3 from ‘./module3’
import $ from ‘jquery’
foo()
bar()
fun1()
fun2()
module3()
$(‘body’).css(‘background’, ‘green’)
整个目录如下：
