使用

通常我们会借助Babel和Browserify来使用ES6的模块化

下面介绍ES6-Babel-Browserify使用教程

简单来说就一句话：

使用Babel将ES6编译为ES5代码，使用Browserify编译打包js

步骤：

1.  

定义package.json文件

2.  

 

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

• npm install babel-cli browserify -g
• npm install babel-preset-es2015 –save-dev

3.  

定义.babelrc文件

  {
    “presets”: [“es2015”]
  }

4.  

定义模块代码

//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()

5.  

编译并在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’)

整个目录如下：

想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习。

上一篇: 文件类数据读取与保存Sequence文件_大数据培训
下一篇: 切面的优先级__java培训