扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
babel的作用不用多说了,是个学Node.js的应该都知道。在此做个标记,记录一下babel相关的npm包和配置方法。
创新互联为企业级客户提高一站式互联网+设计服务,主要包括网站制作、成都网站设计、重庆App定制开发、微信小程序、宣传片制作、LOGO设计等,帮助客户快速提升营销能力和企业形象,创新互联各部门都有经验丰富的经验,可以确保每一个作品的质量和创作周期,同时每年都有很多新员工加入,为我们带来大量新的创意。截止到2018年5月2日,我见到了在我看来对babel讲解最详细的两篇文章,分享给大家:
https://excaliburhan.com/post/babel-preset-and-plugins.html
https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md#toc-configuring-babel
看过这两篇之后,下面的内容各位就可以不用看了,下面是我在初学初用babel时做的笔记,不堪入目。
----------------------------------这是分割线---------------------------------------
babel包如下,各有各的作用:
transform-strict-mode (由于很多 ES 特性需要 严格模式才能打开, 添加这个插件就会自动在所有文件上添加 'use strict';) transform-strict-mode (由于很多 ES 特性需要 严格模式才能打开, 添加这个插件就会自动在所有文件上添加 'use strict';) transform-es2015-modules-commonjs (将 ES6 模块标准 转换成 Node.js 用的 CMD 模块标准) transform-es2015-spread (支持 ES6 的 spread 操作符) transform-es2015-destructuring (支持 赋值解构) transform-es2015-parameters (支持默认参数, 参数解构, 以及其他参数)
安装包:
# 安装 core 和命令行工具 $ npm install --save-dev babel-core babel-cli # 安装所有插件 $ npm install --save-dev babel-plugin-transform-strict-mode babel-plugin-transform-es2015-modules-commonjs babel-plugin-transform-es2015-spread babel-plugin-transform-es2015-destructuring babel-plugin-transform-es2015-parameters
添加配置文件:
需要在项目根目录下建一个.babelrc的文件。
.babelrc:
{ "plugins": [ "transform-strict-mode", "transform-es2015-modules-commonjs", "transform-es2015-spread", "transform-es2015-destructuring", "transform-es2015-parameters" ] }
文件组织
由于 Node.js本身有加载器, 所以不需要将所有文件打包成一个文件, 推荐的做法是, 添加一个 src 目录, 用于存放 ES6 脚本, 然后将整个目录打包到 lib 目录下, 对应的脚本为
babel src --out-dir lib
开发调试的时候, 可以直接用 babel-cli 模块提供 babel-node 代替 node 直接启动 src 目录下面的入口脚本。
babel-node src/index.js
最后, 将命令封装到 package.json 里面:
{ "name": "xxxxx", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "babel-node src/index.js", "build": "babel src --out-dir lib" }, "author": "", "license": "ISC", "dependencies": { "babel": "^6.5.2", "redux": "^3.3.1" }, "devDependencies": { "babel-cli": "^6.5.1", "babel-core": "^6.5.2", "babel-plugin-transform-es2015-destructuring": "^6.5.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.5.2", "babel-plugin-transform-es2015-parameters": "^6.5.0", "babel-plugin-transform-es2015-spread": "^6.5.2", "babel-plugin-transform-strict-mode": "^6.5.2" } }
封装命令的重点是:
"scripts": { "start": "babel-node src/index.js", "build": "babel src --out-dir lib" },
我们就可以使用下面的命令启动和编译我们的代码了
# npm run build 构建脚本 # npm start 使用 babel-node 启动进程
当然,不用每次都执行构建脚本的命令,只需要 #npm start 这一个命令也是可以的。
本文参考http://taobaofed.org/blog/2016/01/07/find-back-the-lost-es6-features-in-nodejs/
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流