ES6模块化

最新推荐文章于 2021-12-23 19:12:26 发布

原创最新推荐文章于 2021-12-23 19:12:26 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用Babel将ES6代码转换为浏览器兼容的ES5代码，并利用Browserify进行打包，涵盖模块导入导出、第三方库集成及项目构建流程。

ES6-Babel-Browserify

Babel作用是将ES6的代码转为ES5，但转后的代码含有nodejs的语法，然后再使用Browserify转换为最终的浏览器端的代码。

|-js
  |-src
    |-module1.js
    |-module2.js
    |-module3.js
    |-app.js
  |-lib
|-index.html
|-package.json
|-.babelrc

1. 定义package.json文件

{
  "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

3. 定义.babelrc文件

{
  "presets": ["es2015"]
}

4. 编码

js/src/module1.js 基本导出

export function foo() {
    console.log('module1 foo()')
}

export let bar = function () {
    console.log('module1 bar()')
}

export const DATA_ARR = [1, 3, 4, 1]

js/src/module2.js 导出对象

let data = 'module2 data'

function foo() {
    console.log('module2 foo() ' + data)
}

function bar() {
    console.log('module2 bar() ' + data)
}

export {foo, bar as fun2}

js/src/module3.js 默认导出

export default {
    name: 'Bill',
    setName: function (name) {
        this.name = name
    }
}

js/src/module4.js 默认构造导出

export default class Module4 {
    constructor(name) {
        this.name = name
    }
}

export function compareModule4(o1, o2) {
    return o1.name === o2.name
}

js/src/app.js 涵盖几乎所有的导入方式

import {foo, bar} from './module1'
import * as m1 from "./module1"
import {foo as m2foo, fun2} from "./module2"
import person from './module3'
import Module4 from './module4'
import {compareModule4} from './module4'
import $ from 'jquery'

// jquery
$('body').css('background', 'red')

// module1
foo()
bar()
m1.foo()
m1.bar()
console.log(m1.DATA_ARR)

// module2
m2foo()
fun2()

// module3
person.setName('Jack')
console.log(person.name)

// module4
const obj1 = new Module4('zhangSan')
const obj2 = new Module4('liSi')
console.log(obj1.name)
console.log(obj2.name)
console.log(compareModule4(obj1, obj2))

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>

在这里插入图片描述

7. 引入第三方模块(jQuery)

下载jQuery模块:
```
npm install jquery@1 --save
```

在app.js中引入并使用

import $ from 'jquery';
$('body').css('background', 'red');