详解如何在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的模块写法入门(实例代码)
Mar 07 NodeJs
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
Mar 18 NodeJs
轻松创建nodejs服务器(8):非阻塞是如何实现的
Dec 18 NodeJs
nodejs中实现路由功能
Dec 29 NodeJs
NodeJS Web应用监听sock文件实例
Feb 18 NodeJs
Nodejs关于gzip/deflate压缩详解
Mar 04 NodeJs
angular2+nodejs实现图片上传功能
Mar 27 NodeJs
NodeJS自定义模块写法(详解)
Jun 27 NodeJs
详解NODEJS基于FFMPEG视频推流测试
Nov 17 NodeJs
nodejs require js文件入口,在package.json中指定默认入口main方法
Oct 10 NodeJs
NodeJS模块与ES6模块系统语法及注意点详解
Jan 04 NodeJs
nodejs中各种加密算法的实现详解
Jul 11 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
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
Python中用Decorator来简化元编程的教程
2015/04/13 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
pycharm永久激活超详细教程
2020/10/29 Python
python解包概念及实例
2021/02/17 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
几个Linux面试题笔试题
2016/08/01 面试题
电影红河谷观后感
2015/06/11 职场文书
初中数学教学反思范文
2016/02/17 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python