使用6to5,让今天就来写ES6的模块化开发!

简介:

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

我之前在Twitter上发过一个照片。表达出我有多快乐,这像是一个时光机让我们能够穿梭到未来-ES6的时代!

以下让我来展示怎样使用6to5让今天就能够练手ES6的模块化。

home 使用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

home Node.js上的执行效果

假设你使用AMD规范的,请在浏览器訪问index.html(吐槽一下。老外居然不知道中国的sea.js)

home 在浏览器运行的效果

结论

通过这个简单的实例你学会了假设简单的使用ES6模块化风格来编写代码。6to5是胃肠棒的工具让你穿越到未来提前体验ES6模块化带来的快感。资源下载es6-modules-today-with-6to5,欢迎提交一些问题的反馈





本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5421168.html,如需转载请自行联系原作者

相关文章
|
6月前
|
存储 弹性计算 数据管理
阿里云OSS对象存储收费标准价格表:流量包+存储包2025最新整理
阿里云OSS对象存储2025收费标准及请求费用等,提供按量付费与包年包月两种模式。标准型本地冗余存储按量价为0.09元/GB/月,包年包月如500GB仅118.99元/年。流量费仅收公网出方向,闲时0.25元/GB、忙时0.5元/GB。更多详情见官网。
2505 2
|
消息中间件 缓存 JavaScript
Nacos+@RefreshScope 为什么配置能动态刷新?
Nacos+@RefreshScope 为什么配置能动态刷新?
|
安全 Java API
手机号码归属地 API 实现防止骚扰电话,看这一篇就够了(内附设计思路和代码)
本文将会深入探讨如何利用手机号码归属地 API 在防止电话骚扰,此外,还会给大家列出手机号码归属地 API 的其他应用场景。
832 0
手机号码归属地 API 实现防止骚扰电话,看这一篇就够了(内附设计思路和代码)
|
JSON 前端开发 API
Springboot+Vue3 整合海康获取视频流并展示
Springboot+Vue3 整合海康获取视频流并展示
2109 0
|
API 区块链 Python
量化交易智能合约跟单系统开发搭建部署源码规则解析
量化交易智能合约跟单系统开发搭建部署源码规则解析
|
关系型数据库 MySQL Windows
使用 windows bat 脚本命令 一键启动MySQL服务
使用 windows bat 脚本命令 一键启动MySQL服务
668 0
使用 windows bat 脚本命令 一键启动MySQL服务
|
Shell Linux 前端开发
在linux中,rpm和yum有什么区别?
rpm是由红帽公司开发的软件包管理方式,使用rpm我们可以方便的进行软件的安装、查询、卸载、升级等工作。但是rpm软件包之间的依赖性问题往往会很繁琐,尤其是软件由多个rpm包组成时。Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器。
2459 0