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’)

整个目录如下：