浏览器识别ES6模块化

如何让浏览器识别ES6的模块化？

​ 首先，浏览器并不是不支持ES6，而是支持不全面，所以我们要将其转换成ES5的形式，但这时浏览器又不识别require语法，导致无法实现模块化，解决方法并不难，我们一步步来：

准备工作：

安装node环境

了解一定ES6语法

1、创建文件

.
├── js  //用来存放原始代码
|   ├── module01.js
|   └── module02.js
├── bin  //用来存放最终代码
├── index.html  //主页
├── .babelrc   //babel的设置文件

注意： .babelrc文件不需要后缀，内容如下：

{
	"presets": ["es2015"]
}

2、库的下载

• 首先下载可将ES6转换为ES5的babel库

  $ npm install babel-cli browserify -g

• 再下载可将 require() 识别的browserify库

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

3、编写模块化代码

• 编写简单JavaScript代码以供展示

  /*
  	module01.js
  	向外暴露两个方法
  */
  
  export function add(a,b){
  	console.log(a+b);
  };
  
  export function sub(a,b){
  	console.log(a-b);
  };

  /*
  	module02.js
  	引入module01中的方法并使用
  */
  
  import {add,sub} from "/module01.js";
  
  add(6,4);
  sub(6,4);

4、编译转换代码

• 首先使用babel将ES6转换为ES5

  $ babel ./js -d ./bin

• 再使用browserify库编译要被引入文件，并保存为module.js文件

  $ browserify ./bin/module02.js -o ./bin/module.js

5、引入验证

• 将最终的module.js引入index.html中，并打开浏览器验证是否成功

  <script src="./bin/module.js" ></script>