抱歉，您的浏览器无法访问本站

ES6模块化的基本语法

ES6模块化的说明

依赖模块需要编译打包处理。原因如下：

• （1）有些浏览器不支持 ES6 的语法，写完 ES6 的代码后，需要通过Babel将 ES6 转化为 ES5。

• （2）生成了ES5之后，里面仍然有require语法，而浏览器并不认识require这个关键字。此时，可以用 Browserify编译打包 js，进行再次转换。

推荐学习链接：

• http://es6.ruanyifeng.com/#docs/module

基本语法：

导出模块：

1

export

引入模块：

1

import xxx from '路径'

ES6模块化的使用举例（自定义模块）

1、初始化项目

（1）在工程文件中新建如下目录：

1
2
3
4
5
6
7
8
9

js
    | src
    	| module1.js
    	| module2.js
    	| module3.js
    	| main.js


index.html

（2）在工程的根目录下，新建文件package.json，内容如下：

1
2
3
4

{
    "name": "es6-babel-browserify",
    "version": "1.0.0"
}

2、环境配置：安装babel 和 browserify等

（1）安装babel 和 browserify：

1
2
3
4
5

npm install babel-cli -g

npm install babel-preset-es2015 --save-dev

npm install browserify -g

安装 babel 的详细解释，可以参考本人的另外一篇文章：ES6的介绍和环境配置

（2）新建.babelrc：

在根目录下新建文件.babelrc，输入如下内容：

1
2
3
4
5
6

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

3、编写代码

（1）module1.js：

1
2
3
4
5
6
7
8
9
10
11

//暴露模块：采用分别暴露的方式

export function foo1() {