使用6to5，让今天就来写ES6的模块化开发！
http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium=email 原文链接
我之前在Twitter上发过一个照片。表达出我有多快乐，这像是一个时光机让我们能够穿梭到未来-ES6的时代！
以下让我来展示怎样使用6to5让今天就能够练手ES6的模块化。
使用6to5让今天就能够练手ES6的模块化
第一步
假设你如今还不了解ES6的模块化开发，请在JSModules.io上了解一下。我也推荐大家读一下@jcemer的文章A new syntax for modules in ES6，它涉及到了非常多非常酷的关于JS模块化的东西。他能够指导我们使用6to5。总的来说，6to5能在支持ES5d的环境下提前尝试ES6 模块化开发的快感。 6to5比其它降级工具有一下几个优势： * 可读性：你的格式化的代码尽可能的保留。 * 可扩展性：有很庞大的插件库和浏览器的支持。 * 可调式性：由于支持source map，你能够方便的调试已经编译过后的代码 * 高效率：直接转化为与ES相当的代码，不会添加额外的执行十几
一起来写模块
让我们来尝试着写模块吧！
我们的应用除了输出日志不会做其它事情，其基本的目的就是让你了解模块化怎样工作和怎样让你现有的环境使用ES6的模块化开发。 基本的文件夹结构：
├── Gruntfile.js
├── package.json
└── src
├── app.js
├── modules
│ ├── bar.js
│ ├── baz.js
│ └── foo.js
└── sample
└── index.html
app.js是主程序，包括了我们将要存储的模块化的文件夹 以下是app.js的代码：
import foo from "./modules/foo";
import bar from "./modules/bar";
console.log('From module foo >>> ', foo);
console.log('From module bar >>> ', bar);以上代码很easy，我们导入了foo模块和bar模块，然后分别打印出他们
// foo.js
let foo = 'foo';
export default foo;
// bar.js
let bar = 'bar';
export default bar;在这些模块一面我们仅仅是导出了两个字符串’foo’和’bar’，当我们导入这些模块。我们的变量事实上已经有数据。 当然，我们何以导出对象，类，函数。等等 如今。你能够開始模仿这个样例写出你自己的模块
构建
就像你已经知道的，ES6不支持你如今的浏览器和Node.js，仅仅有一条路。那就是使用降级转换器来编写ES6的模块化代码。
正如我之前提到的那个。我使用6to5。他能够精确的达到我们想要的效果。 这个任务是执行在Grunt上的,我们使用 @sindresorhus的 grunt-6to5
npm install grunt-cli -g
npm install grunt --save-dev
npm install grunt-6to5 --save-dev我们的Gruntfile类似于一下：
grunt.initConfig({
'6to5': {
options: {
modules: 'common'
},
build: {
files: [{
expand: true,
cwd: 'src/',
src: ['**/*.js'],
dest: 'dist/',
}],
}
}
});To test it in the browser, I made a copy task that just copies the sample/index.html file to our dist directory. The HTML file looks like this:
这是个简单又给力的配置，我们也差点儿完毕了。
当你指定好源文件和输出文件后，这个任务就能够来执行了。 ‘common’选项的目的在于告诉6to5我们将输出ES5CommonJS模块化风格。 当然，6to5也支持AMD，我写了sample/index.html，让他在浏览器环境下測试一下，这个HTML的代码例如以下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6 modules 6to5</title>
</head>
<body>
<script src="//[cdnjs URL]/require.min.js"></script>
<script>
require(['app.js']);
</script>
</body>
</html>观察上面的代码，我们使用AMD的RequireJS框架来载入这个JS，对于这个样例，你须要将上面的配置文件改为 modules: ‘amd’
执行
万事俱备东风仅仅欠，我们的代码已经放在es6-modules-today-with-6to5，你能够克隆下来自己玩玩。
使用npm install安装6to5
记住一点，Grunt任务会生成一个目标目录来存放转化后的代码 所以，假设你想測试使用CommonJS规范的转化后的ES6的代码。你能够运行一下命令
node dist/app.js
Node.js上的执行效果
假设你使用AMD规范的，请在浏览器訪问index.html(吐槽一下。老外居然不知道中国的sea.js)
在浏览器运行的效果
结论
通过这个简单的实例你学会了假设简单的使用ES6模块化风格来编写代码。6to5是胃肠棒的工具让你穿越到未来提前体验ES6模块化带来的快感。资源下载es6-modules-today-with-6to5，欢迎提交一些问题的反馈
文章来自 http://www.hacke2.cn
