学习ES6模块化过程中的坑

2019独角兽企业重金招聘Python工程师标准>>>

后端模块化采用commonJS规范，而浏览器端的模块化采用AMD规范（异步方式），主要的库有require.js、curl.js和sea.js。

但是ES6让js本身就具备模块化的功能，不需要依赖第三方库。语法实现就是import+export模式。

主js文件（main.js ) 引入模块（module.js）的代码如下，在前者里用import引入模块，在后者中导出模块（具体语法看阮大神的网址 http://es6.ruanyifeng.com/#docs/module）：

// main.js
	import {add} from "./module.js";
	let adds = add;
	const he = adds(2,2);
	alert(he);

// module.js
function add(a,b){
	return a+b;
}
export {add};

然后我就可以在我们的html结构中script入我们的主js文件main.js：

<script src="./main.js"></script>

用浏览器打开，没反应，F12发现报错了：

Uncaught SyntaxError: Unexpected token import

这是因为需要在script中加上type=“module”，告知浏览器这是一个ES6模块：

<script src="./main.js" type="module"></script>

再刷新浏览器，还是没反应，F12也不报错，就是因为目前的浏览器都还不支持ES6的模块化。

于是我们需要将ES6转成ES5语法。babel编辑器可以帮助我们完成这个使命。 babel的安装和用法参考 https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md

如果你只安装了babel-cli你会发现编译转化后输出的还是原内容，这是因为我们没告诉babel转换成什么，所以还需要一些配置， 还需安装babel-preset-es2015，安装方法上面链接中也有，需要提醒的是在根目录下新建名为.babelrc的文件可以通过命令行新建：cd> .babelrc，因为window下的图文操作无法完成。

坑又来了，将ES6转成ES5后在浏览器中打开html还是会有报错：

require is not defined

所以我们还需将js文件转换成浏览器支持的格式，需安装browserify，参考阮大神的文章http://www.ruanyifeng.com/blog/2014/09/package-management.html

然后再script编译完成后的script文件。

大功告成啦，浏览器alert(4)，我们就成功的使用了ES6的模块功能了，太不容易了。

但是我有个困惑，为什么使用babel不能直接转换成浏览器支持的语法格式，却还需要用browserify多搞一下？也行还有其他更好的解决方法。

转载于:https://my.oschina.net/u/3059741/blog/851867