详解如何在NodeJS项目中优雅的使用ES6


Posted in NodeJs onApril 22, 2017

NodeJs最近的版本都开始支持ES6(ES2015)的新特性了,设置已经支持了async/await这样的更高级的特性。只是在使用的时候需要在node后面加上参数:--harmony。但是,即使如此node也还是没有支持全部的ES6特性。所以这个时候就需要用到Babel了。

项目地址:https://github.com/future-challenger/petshop

现在开始Babel

在开始使用Babel之前,假设

1.你已经安装了nodejs,并且已经熟悉了Js。

2.你也可以使用npm安装各种依赖包。

3.而且你也对ES6(后来改为ES2015)有一定程度的熟悉。

同时假设你已经安装了yarn,并且也熟悉了yarn。Yarn最大的优点就是它比npm要快很多,因为yarn只把需要的库下载一次,之后用到的时候直接使用本地缓存的版本。npm每次都会下载这些库。这简直就是浪费生命。如果你还没有安装yarn,也没有关系,下面也会有npm的使用方法。

接下来开始安装配置Babel。安装babel-cli

yarn add babel-cli --dev  // npm install --save-dev babel-cli

安装babel的presets。

yarn add babel-preset-es2015 --dev  // npm install --save-dev babel-preset-es2015

这个时候你就可以使用ES2015的特性了。但是,这还不够,比如我不想用Promise我想用更加方便的async/await语法。只有es2015这个preset是不够的。

Babel的plugin和preset

Babel本身不处理语言特性的转码。这些功能都是由plugin和preset实现的(preset也是一个plugin的集合)。如上文所述,要使用es2015的内容就需要安装babel-preset-es2015这个preset。要使用async/await那么就需要安装对应的preset或者插件。为了简单我们安装preset:babel-preset-stage-0。preset stage-0包含了async/await相关的插件: babel-plugin-syntax-async-functions、babel-plugin-transform-regenerator。

yarn add babel-preset-stage-0 --dev // npm install --save-dev babel-preset-stage-0

这样还是不能在项目中使用es7的async/await了。还需要更多的配置,有两种方法可以达到目的:

1.使用babel-polyfill。有一个不好地地方,babel-polyfill会污染global对象,所以不适合于library之类的使用。仅适合于web app使用。

2.使用babel运行时转码工具,transform-runtime插件。使用这个方法正好弥补了上面的方法的不足之处。它是尤其适合于library一类的项目使用。

分别介绍这两种方法。

 安装babel-polyfill:

yarn add babel-polyfill --dev // npm install --save-dev babel-polyfill

之后,在你的项目的入口文件的最上方引入babel-polyfill。比如我现在有一个Express的Web App,那么的入口文件就是开启这个app的index.js文件。在这个文件的最上方引入polyfill,require('babel-polyfill')。或者你的入口文件已经是ES2015的写法了,那么就直接import,import 'babel-polyfill'

使用transform-runtime也非常简单。安装:

yarn add babel-plugin-transform-runtime --dev // npm install --save-dev babel-plugin-transform-runtime

另外还需要安装babel-runtime:

yarn add babel-runtime // npm install --save babel-runtime

之后在.babelrc文件中添加如下的配置,两个二选其一即可:

// without options
{
 "plugins": ["transform-runtime"]
}

// with options
{
 "plugins": [
  ["transform-runtime", {
   "helpers": false, // defaults to true
   "polyfill": false, // defaults to true
   "regenerator": true, // defaults to true
   "moduleName": "babel-runtime" // defaults to "babel-runtime"
  }]
 ]
}

剩下的就是欢畅的使用async/await了。

另外如果要使用Object.assing这样的方法的话,也可以使用插件:babel-plugin-transform-object-assign,如果要使用解构赋值可以使用插件:babel-plugin-transform-object-rest-spread。当然这些都包含在了stage-0这个preset中。

现在就开始写ES2015的代码吧。在项目中安装ExpressJs,创建一个index.js文件。我们来试着创建一个小小的web app作为练习:

import Express from 'express'

let app = Express()

app.get('/', (req, res) => {
 res.send('hello world')
})

app.listen(8080, () => console.log('server is running at http://localhost:8080'))

运行命令:

./node_modules/.bin/babel-node index.js --preset es2015, stage-0

使用命令*babel-node**就可以让代码运行起来,后面的参数指定了在转义js代码的时候使用的preset和plugin。

Babel官方推荐的方法是时候用.babelrc文件,这一方式可以更加灵活。在项目的更目录上创建.babelrc文件,在里面添加你安装的preset和plugin的描述:

{
  "presets": ["es2015", "stage-0"]
}

这样可以直接使用babel-node来执行代码,或者使用命令babel来转义代码。如:

babel -w code/ -d build/

babel命令会从配置文件中读取配置,来变异code/目录下的文件,并把转义之后的JavaScript文件导出到build/目录下。还有命令行里的参数-w,这个命令参数指定的是watch,每次code目录的文件修改后都会触发babel命令的再次执行。

在文件中使用Source Maps

上面看起来很不错了。但是还有一个问题,在你调试代码的时候,你调试的实际是babel命令转码之后的js,不是原来你编写的源代码所在的文件。调试的不是源文件,多少会有些不便。比如下面的文件会抛出一个异常:

async function errorAsyncFunc() {
 try{
  throw new Error('Async function error')
 } catch(e) {
  throw e
 }
}

errorAsyncFunc()

在转码命令中加一个--source-maps可以解决这个问题:

babel code/ -d build/ --source-maps

最后在package.json里添加scripts节点:

"scripts": {
 "build": "babel src -d build --source-maps",
 "start": "node build/index.js"
},

接下来:

npm run build

Gulp出场

上文讲述了如何使用Babel实现ES201x的开发。但是在正式的开发中,上面的这些配置还略显不足,尤其是你的项目包括web端、server端,尤其web端不仅处理ES201x的代码还需要处理。所以需要Gulp出场。

这玩意儿看起来很复杂,你定义了编译的过程。其实掌握了以后很好用,尤其是可以自动处理很多东西,节约大把时间。要使用Gulp,必须先安装NodeJS。这个基本是标配。然后你会用到它的命令行工具。

安装Gulp

在最新发布的Gulp里有一点调整。gulp-cli从gulp分离出来作为单独的一部分使用。所以,如果你已经安装过gulp之前的版本需要先删除:

npm rm --global gulp

安装gulp-cli

yarn global add gulp-cli // npm install --global gulp-cli

在--dev模式下安装gulp

yarn add gulp --dev   // npm install --save-dev gulp

创建gulp配置文件

就像Babel要用.babelrc作为配置文件一样,gulp也需要一个配置文件。这个配置文件就是gulpfile.js, 但是和babel同用的情况下把gulpfile.js重命名为gulp.babel.js:

mv "gulpfile.js" "gulpfile.babel.js"

gulp的使用还是很简单的,主要就是在gulpfile.babel.js文件中添加各种task。在这些task中一定要添加一个叫做default的task,gulp命令的执行起点就是从这里开始。

假设有这么一个场景:

1.使用eslint检查代码,发现代码风格和潜在的错误。

2.自动实现ES201x -> ES5的代码转码,并把转码后的代码放在指定目录下。

3.在转码的时候添加sourcemaps。

以上这些“任务”都是用gulp自动实现。该如何配置呢?

gulp和eslint

要在gulp中使用各种请他的类似于eslint这样的功能的时候需要使用在gulp上的对应的插件。没错,gulp的设计思路和gulp基本一样:插件机制。

那么我们就需要首先下载eslint的插件:

yarn add --dev gulp-eslint  // npm install --save-dev gulp-eslint

在开始编写我们的第一个task之前, 做最后的准备工作。首先需要配置.eslintrc文件。eslint会根据这个文件定义的规则检查代码的风格。我们不准备大批的配置规则,这样非常耗时间而且也照顾不到很多我们项目已经保留下来的编码风格。所以,airbnb的一套规则拿来使用时最好的办法。

安装eslint

yarn add --dev eslint // npm install --save-dev eslint

然后你可以运行命令来初始化配置:./node_modules/.bin/eslint --init。你也可以忽略这个命令,直接创建一个.eslintrc的文件。

安装eslint的airbnb扩展

要使用airbnb的一套规则就需要安装他们的eslint扩展:

yarn add eslint-config-airbnb --dev  // npm install --save-dev eslint-config-airbnb

命令执行之后会提示有些依赖项没有安装,分别是eslint-plugin-import@^2.2.0eslint-plugin-import@^2.2.0eslint-plugin-jsx-a11y@^3.0.2。依次安装这些依赖项就好。

.eslintrc

{
 "env": {
  "es6": true
 },
 "rules": {
  "semi": "off",
  "import/no-extraneous-dependencies": ["error", {
   "devDependencies": true, 
   "optionalDependencies": false, 
   "peerDependencies": false
  }]
  ,"quotes": ["error", "single", {"allowTemplateLiterals": true}]
 },
 "extends": "airbnb"
}

env指定环境是支持es6的,rules指定的是一些补充内容,比如字符串使用单引号还是双引号等。这个是根据个人喜好配置的,你可以选择添加你需要的规则。最后是extends,这里配置airbnb就用上了airbnb的一套eslint编码检查规则。

gulp-eslint插件用起来

import gulp from 'gulp'
import eslint from 'gulp-eslint

// 配置需要处理的文件目录和转码之后文件的存放目录
const paramConfig = {
 source: 'src/**/*.js',
 dest: 'build',
}

引入相关模块之后开始写任务:

 

gulp.task('lint', () => {
 // eslint配置,使用配置的文件目录。排除node_modules下的全部文件。
 return gulp.src([paramConfig.source, '!node_modules/**'])
  .pipe(eslint())
  .pipe(eslint.result(result => {
   console.log(`ESLint result: ${result.filePath}`);
   console.log(`# Messages: ${result.messages.length}`);
   console.log(`# Warnings: ${result.warningCount}`);
   console.log(`# Errors: ${result.errorCount}`);
  }))
  .pipe(eslint.format())
  .pipe(eslint.failOnError())
})

如前文所述,default任务是必须:

gulp.task('default', ['lint'], function () {
  // lint任务成功执行之后执行这个方法
});

跳转到项目的目录下,运行gulp命令。会得到如下的输出:

$ gulp
[21:43:01] Requiring external module babel-register
[21:43:01] Using gulpfile ~/Documents/test-polyfill/gulpfile.babel.js
[21:43:01] Starting 'lint'...
[21:43:02] Starting 'babel-sourcemaps'...
ESLint result: ~/Documents/test-polyfill/src/index.js
# Messages: 0
# Warnings: 0
# Errors: 0
ESLint result: ~/Documents/test-polyfill/src/test.js
# Messages: 0
# Warnings: 0
# Errors: 0
[21:43:02] Finished 'lint' after 605 ms
[21:43:02] Finished 'babel-sourcemaps' after 653 ms
[21:43:02] Starting 'default'...
gulp default task!
[21:43:02] Finished 'default' after 98 μs

gulp和babel

这次同时处理babel和sourcemaps的问题。

首先安装插件:

yarn add --dev gulp-babel   // npm install --save-dev gulp-babel

import gulp-babel插件:

import babel from 'gulp-babel'
import sourcemaps from 'gulp-sourcemaps'

添加任务:

gulp.task('babel-sourcemaps', () => {
 return gulp.src(paramConfig.source) 
  .pipe(sourcemaps.init())
  .pipe(babel())
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest(paramConfig.dest))
})

修改default任务:

javascript gulp.task('default', ['lint', 'babel-sourcemaps'], () => { console.log('gulp default task!') })

如果你不想用sourcemaps的话,可以这么写:

javascript gulp.task('babel', () => { return gulp.src(paramConfig.source) .pipe(babel()) .pipe(gulp.dest(paramConfig.dest)) })

把gulp放在npm命令体系下

babel老早就配置好了,现在和配置好了gulp。gulp每次输入命令基本上就是手动执行。现在应该让这个命令半自动执行了。

修改package.json文件,在其中添加scripts节点:

"scripts": {
  "build": "gulp",
  "start": "node build/index.js"
 },

如此一来,很多的命令都可以像gulp一样放在npm的scripts里执行。比如,现在可以在命令行李输入如下命令来实现lint和babel转码:

npm run build

开始执行:

npm start

总结

使用bebel可以提前使用最新的JavaScript语言特性,这样编写很多代码的时候会变得简洁高效。并且babel转码之后生成的代码也是非常规范的ES5写法,同时是在严格模式下的。所以,我们在写ES201x代码的时候不需要再添加'use strict';标识。

使用gulp又可以使很多不大不小但是很费时间的事自动处理。

把这两者结合在一起会让你的项目开发效率提升很多。所以,看到这里你不觉得你应该赶快在项目里使用这些技术,让开发进入快车道吗!!!???

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
Nodejs+express+html5 实现拖拽上传
Aug 08 NodeJs
轻松创建nodejs服务器(10):处理POST请求
Dec 18 NodeJs
nodejs开发微博实例
Mar 25 NodeJs
Nodejs如何搭建Web服务器
Mar 28 NodeJs
nodejs简单实现操作arduino
Sep 25 NodeJs
解析NodeJs的调试方法
Dec 11 NodeJs
Nodejs基于LRU算法实现的缓存处理操作示例
Mar 17 NodeJs
nodejs中解决异步嵌套循环和循环嵌套异步的问题
Jul 12 NodeJs
详解利用nodejs对本地json文件进行增删改查
Sep 20 NodeJs
Nodejs封装类似express框架的路由实例详解
Jan 05 NodeJs
node快速搭建后台的实现步骤
Feb 18 NodeJs
Node.js实现爬取网站图片的示例代码
Apr 04 NodeJs
nodejs和C语言插入mysql数据库乱码问题的解决方法
Apr 14 #NodeJs
解析NodeJS异步I/O的实现
Apr 13 #NodeJs
详解nodejs微信公众号开发——6.自定义菜单
Apr 13 #NodeJs
nodejs个人博客开发第七步 后台登陆
Apr 12 #NodeJs
nodejs个人博客开发第六步 数据分页
Apr 12 #NodeJs
nodejs个人博客开发第五步 分配数据
Apr 12 #NodeJs
nodejs个人博客开发第四步 数据模型
Apr 12 #NodeJs
You might like
层叠菜单的动态生成
2006/10/09 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
python清除字符串前后空格函数的方法
2018/10/21 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
智能钱包:Ekster
2019/11/21 全球购物
电脑销售顾问自荐信
2014/01/29 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
找工作求职信
2014/07/07 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
安全生产奖惩制度
2015/08/06 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
《包身工》教学反思
2016/02/23 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server