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);

以上代码非常简单，我们导入了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

[译]使用6to5，让今天就来写ES6的模块化开发！的更多相关文章

  1. 使用6to5，让今天就来写ES6的模块化开发！

    http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...

  2. ES6的模块化

    在之前的 javascript 中一直是没有模块系统的,前辈们为了解决这些问题,提出了各种规范, 最主要的有CommonJS和AMD两种.前者用于服务器,后者用于浏览器.而 ES6 中提供了简单的模块 ...

  3. es6的模块化编程

    es6的模块化编程 基本用法 es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能. 一个模块就是一个独 ...

  4. 【OpenWRT】【RT5350】【二】烧写OpenWrt到RT5350开发板

    烧写bin文件到开发板的方式有很多种,我采用的是通过web页面直接上传文件的方式 首先通过浏览器登陆路由器(192.168.1.1),作者的开发板已经烧好了OpenWrt并且可以通过Luci登陆,所以 ...

  5. ES6(Module模块化）

    模块化 ES6的模块化的基本规则或特点: 1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取. 一个模块就是一个单例,或者说就是一个对象: 2:每一个 ...

  6. 【广州.NET社区推荐】【译】Visual Studio 2019 中 WPF & UWP 的 XAML 开发工具新特性

    原文 | Dmitry 翻译 | 郑子铭 自Visual Studio 2019推出以来,我们为使用WPF或UWP桌面应用程序的XAML开发人员发布了许多新功能.在本周的 Visual Studio ...

  7. ES6之模块化

    本文介绍ES6实现模块化的方法:使用import和export. 导入的时候需不需要加大括号的判断:1.当用export default people导出时,就用 import people 导入(不 ...

  8. 面试 11-01.ES6：模块化的使用和编译环境

    11-01.ES6:模块化的使用和编译环境 #前言 #ES6的主要内容 模块化的使用和编译环境 Class与JS构造函数的区别 Promise的用法 ES6其他常用功能 本文来讲"模块化的使 ...

  9. 模块化开发 | es6模块暴露与引入

    CommonJS模块开发 CommonJS定义 每个文件就一个模块,有自己的作用域.在一个文件里面定义的变量.函数.类,都是私有的,对其他文件不可见. 私有作用域不会污染全局作用域. 模块可加载多次, ...

随机推荐

  1. 【poj1017】 Packets

    http://poj.org/problem?id=1017 (题目链接) 题意 一个工厂制造的产品形状都是长方体盒子,它们的高度都是 h,长和宽都相等,一共有六个型号,分别为1*1, 2*2, 3* ...

  2. HDU2222 Keywords Search

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  3. 天气查询SDK

    简介: 这是一个用于查询天气的SDK,在很多时候,尤其是对接多而小功能公众账号的时候,天气查询比较使用,此SDK就是这样的用途,使用的是中国天气网的API,已经集成了网上最靠谱的方式来实现,包括里面的 ...

  4. 降低磁盘IO使Oracle性能优化(转)

    文章转自:http://blog.chinaunix.net/uid-26813519-id-3207996.html 硬件方面虽然只占Oracle性能优化的一个方面(另一方面是软件),但是仍不可忽视 ...

  5. 基本概率分布Basic Concept of Probability Distributions 6: Exponential Distribution

    PDF version PDF & CDF The exponential probability density function (PDF) is $$f(x; \lambda) = \b ...

  6. Cookie对象

    Cookie对象用于保存客户端浏览器请求的服务器页面,也可用于存放非敏感性的用户信息,信息保存的时间可以根据用户的需要进行设置.并非所有的浏览器都支持Cookie,并且数据信息是以文本的形式保存在客户 ...

  7. python函数基础

    一.基础 函数的定义 def 函数名(参数): ... 函数体 ... 返回值 #如果函数执行完毕也没有return语句时,自动return None. 空函数 如果想定义一个什么事也不做的空函数,可 ...

  8. 回调函数通俗解析(之前看了很久都不理解,今天终于ok啦)

    自学jquery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速google之,发现原来中文翻译成回调.也就是回调函数了.不懂啊,于是在google回调函数,发现网上的中文解释实在是 ...

  9. spring--aop总结

    AOP(Aspect Oriented Programming的缩写)所用的思想其实和设计模式是一样的,即在不修改原代码的情况下统一增加或者修改功能.还有,AOP大多用在spring里面. AOP是面 ...

  10. java的对象的总结：(PO,VO,DAO,BO,POJO)

    一.PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数 ...