技术控

    今日:91| 主题:49531
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 通过 Babel 使用 ES6 的 import

[复制链接]
纸飞机的春天 发表于 2016-9-30 15:03:48
93 1

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在    《Modules with CommonJS》一文中,我们通过类似于 Python 的 import 方式,把我们的代码组织成模块。那篇文章展示了 NodeJS 的原生模块系统 – CommonJS。同时,文章还阐述了在那些不支持模块和模块加载器的浏览器中,如何使用 Webpack 去解决这种兼容性问题。  
  在本文中,我们将会看到一个不同的 import 系统,这个系统基于最新的 JavaScript 标准。我们将使用 ES6 的 import,然后通过    Babel转换器将我们的代码转换成在 Node 和浏览器环境都可以运行的兼容性代码。  
  为什么说    ES6而不是    ES2015?诚然,    ES6作为一个标签正逐渐被遗忘,因为现在相关委员会已经通过基于时间的命名方案,而不是通过版本数字的方式去管理那些规范。但事实证明,模块和加载器是一个多层次的复杂的业务,包含着后期会推出的不同方面的东西。所以,我们将会使用    ES6模块以避免一些细节。  
  概述  

  
       
  • 安装和配置 Babel   
  • 将 CommonJS 中的模块和 import 切换为 ES6   
  • 把 Babel 插入到前端工具链(Mocha,Webpack,ESLint)中  
  起点  

  我们需要在一些前期的文章          注1    获得一些代码片段作为起点,生成本文的代码:  
  
       
  • 部分 webpack ,部分 ESLint,部分 Mocha   
  • 确保 ESLint 在 PyCharm 中的连接   
  • npm start 和 npm test,还有 Mocha test 运行器  
  我们的 index.html 文件非常简单,这来自于 Webpack 相关的文章:  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>ES6 Imports</title>
  5. </head>
  6. <body>
  7. <h1>Incrementer</h1>
  8. <scriptsrc="bundle.js"></script>
  9. </body>
  10. </html>
复制代码
Webpack 的配置也是一样:  
  1. module.exports = {
  2. entry:'./app.js',
  3. output: {
  4. path: __dirname,
  5. filename:'bundle.js'
  6. },
  7. devtool:'source-map'
  8. };
复制代码
经过这些步骤,Webpack 将会把下面的    app1.js和    lib1.js打包,通过    webpack-dev-server提供服务:  
  1. varincrementer =require('./lib1');
  2. varnewVal = incrementer(3);
  3. console.log('newVal', newVal);
复制代码
  1. functionincrementer(i){
  2. returni+1;
  3. }
  4. module.exports = incrementer;
复制代码
最后,我们从之前的文章中获取一份 Mocha 测试文件:
  1. vardescribe =require('mocha').describe,
  2. it = require('mocha').it,
  3. expect = require('chai').expect,
  4. incrementer = require('./lib1');
  5. describe('Hello World',function(){
  6. it('should increment a value',function(){
  7. varresult = incrementer(8);
  8. expect(result).eql(9);
  9. });
  10. });
复制代码
安装  

  让我们安装 Babel – 一个现代的 JavaScript 转换器,通过一个    loader在 Webpack 打包的时候进行编译转换:  
  1. $ npm install --save-dev babel-preset-es2015 babel-loader
复制代码
这一步将会在我们的    package.json文件的    devDependencies中添加依赖:  
  1. {
  2. "name":"pylyglot",
  3. "version":"1.0.0",
  4. "description":"Series of articles for Polyglot Python with PyCharm",
  5. "main":"index.js",
  6. "scripts": {
  7. "start":"webpack-dev-server",
  8. "test":"mocha --compilers js:babel-core/register test*.js"
  9. },
  10. "repository": {
  11. "type":"git",
  12. "url":"git+ssh:[email protected]/pauleveritt/pauleveritt.github.io.git"
  13. },
  14. "author":"Paul Everitt",
  15. "license":"ISC",
  16. "bugs": {
  17. "url":"https://github.com/pauleveritt/pauleveritt.github.io/issues"
  18. },
  19. "homepage":"https://github.com/pauleveritt/pauleveritt.github.io#readme",
  20. "devDependencies": {
  21. "babel-loader":"^6.2.1",
  22. "babel-preset-es2015":"^6.3.13",
  23. "chai":"^3.4.1",
  24. "eslint":"^1.10.3",
  25. "mocha":"^2.3.4",
  26. "webpack":"^1.12.12",
  27. "webpack-dev-server":"^1.14.1"
  28. }
  29. }
复制代码
ES6 模块  

  让我们把基于 CommonJS 的模块和导入,转换为基于 ES6 的模块。首先,我们创建一个    app2.js文件,其使用了不一样的 import 语法:  
  1. importincrementerfrom'./lib2';
  2. varnewVal = incrementer(3);
  3. console.log('newVal', newVal);
复制代码
当我们这样做的时候,PyCharm 马上就会崩溃。它目前只支持    ECMAScript5.1标准作为 JavaScript 的语法。我们现在给了它无效的语法,因此我们需要在    Preferences -> Languages & Frameworks -> JavaScript -> JavaScript language version中,更改其为    ECMAScript 6。  
  这时候,ESLint 也会失效 – 它必须要认识这些新的语法。幸运的是,ESLint 和 Babel 一样,都是非常流行和快速更新换代的开源项目。它们很容易就能和 ES2015、ES2016 和 ES2017 协同工作。让我们更新我们的    .eslintrc文件:  
  1. {
  2. "rules": {
  3. "strict":0,
  4. "quotes": [
  5. 1,
  6. "single"
  7. ]
  8. },
  9. "ecmaFeatures": {
  10. "modules":true
  11. },
  12. "env": {
  13. "browser":true,
  14. "jquery":true,
  15. "es6":true
  16. }
  17. }
复制代码
让我们现在新建一个    lib2.js文件,其将使用 ES6 的 export 语法导出我们的函数:  
  1. exportdefaultfunctionincrementer(i){
  2. returni+1;
  3. }
复制代码
在这种条件下,此模块除了该函数,没有任何可以导入的东西。因为它是一个不一样的,不兼容的语法;我们可以避免繁琐的    module.exports,而直接在声明中使用    export default。  
  在导出语法中使用    default,意味着我们的意思是把这个函数是这个模块唯一导出的东西。事实上,你还可以像这样导出:  
  1. module.exports = {
  2. entry:'./app.js',
  3. output: {
  4. path: __dirname,
  5. filename:'bundle.js'
  6. },
  7. devtool:'source-map'
  8. };
  9. 0
复制代码
这就是一个匿名函数的导出方式。通过默认的 export,这个函数的名字来源于导入这个函数的模块,而不是导出这个函数的模块。
  我们现在得到了通过 ES6 进行导入和导出的模块。为了查看它在 Node 中是否能正常工作,我们可以在我们的测试中使用 ES6 的 import 来检验:
  1. module.exports = {
  2. entry:'./app.js',
  3. output: {
  4. path: __dirname,
  5. filename:'bundle.js'
  6. },
  7. devtool:'source-map'
  8. };
  9. 1
复制代码
让我们跑一个:  
  1. module.exports = {
  2. entry:'./app.js',
  3. output: {
  4. path: __dirname,
  5. filename:'bundle.js'
  6. },
  7. devtool:'source-map'
  8. };
  9. 2
复制代码
汗,报错了:  
  1. module.exports = {
  2. entry:'./app.js',
  3. output: {
  4. path: __dirname,
  5. filename:'bundle.js'
  6. },
  7. devtool:'source-map'
  8. };
  9. 3
复制代码
这好像是 Mocha – 一个 Node 应用,不能解析我们的 JavaScript。好吧,没开玩笑……它现在使用ES6编写的。我们需要一些东西转把「未来」的 JavaScript(ES6 模块)转换成现在的 JavaScript(Node)。
  通过 Babel 编译  

  这种转换称为「编译(transpiling)」          注2    ,而 Babel 是使用人数最多的编译工具。我们在    Pythonic JavaScript with ES2015中谈论了更多关于编译方面的东西。  
  我们需要告诉 Mocha 以运行我们的 JavaScript – 包括应用代码和测试代码。这些代码包含了需要 Babel 新代码风格。首先,Babel 有一个配置文件,显然现在人手一份这个东西:
  1. module.exports = {
  2. entry:'./app.js',
  3. output: {
  4. path: __dirname,
  5. filename:'bundle.js'
  6. },
  7. devtool:'source-map'
  8. };
  9. 4
复制代码
这是用来配置 Babel本身的。为了告知我们的 PyCharm Mocha 运行配置以使用 Babel,我们需要编辑运行配置,在额外的 Mocha 选项(Extra Mocha options)中添加这个:
  1. module.exports = {
  2. entry:'./app.js',
  3. output: {
  4. path: __dirname,
  5. filename:'bundle.js'
  6. },
  7. devtool:'source-map'
  8. };
  9. 5
复制代码
我们的 Mocha 测试现在就能正常运行了。这也意味着我们的    lib2.js也能跑起来了。为了能在    npm run脚本下处理这些变更,我们需要修改    package.json:  
  1. module.exports = {
  2. entry:'./app.js',
  3. output: {
  4. path: __dirname,
  5. filename:'bundle.js'
  6. },
  7. devtool:'source-map'
  8. };
  9. 6
复制代码
这一步适用于 Node。那浏览器下呢?我们需要像 Mocha 那样,告知 Webpack 在打包的时候使用 Babel 编译代码吗?是的,并且这个非常简单:
  1. module.exports = {
  2. entry:'./app.js',
  3. output: {
  4. path: __dirname,
  5. filename:'bundle.js'
  6. },
  7. devtool:'source-map'
  8. };
  9. 7
复制代码
我们为所有的    .js后缀的文件都添加了一个    module项,并且定义了一个    loader。这个    loader通过    babel-loader软件运行这些文件,而这个软件是一个 Babel 在 Webpack 下的插件。    babel-loader使用的是在    .babelrc文件下共享的设置,这可以避免 Babel 在 Mocha 和 Webpack 下的独立设置。  
  总结  

  我们现在只是使用到了 ES6 中很小一部分的特性:模块和导入。为了使用这部分特性,我们需要引入一个新的工具– Babel 到前端工具链中,并处理由此带来的连锁效应:
  
       
  • PyCharm -> ECMAScript 6   
  • ESLint   
  • Mocha   
  • Webpack  
  在你编程的时候,你的 CPU 诚然会一直处于繁忙的状态,因为它要一直编译和打包。有解决这个问题的办法,但是目前来说,相信我……这很值得,因为在下一遍文章中就会明白了~
  本文译自 Paul Everitt 的 《    ES6 Imports with Babel》。
友荐云推荐




上一篇:【译】IntersectionObserver 正在来到我们的视野
下一篇:16×32 RGB Matrix Panel Driver Shield Revision 1
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

983828887 发表于 2016-9-30 17:02:32
求沙发
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表