Comment utiliser ES6 dans les projets NodeJS

Cet article présente principalement en détail comment utiliser ES6 avec élégance dans les projets NodeJS. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Les versions récentes de NodeJs ont commencé à prendre en charge les nouvelles fonctionnalités d'ES6 (ES2015), et les paramètres prennent déjà en charge des fonctionnalités plus avancées telles que async/await. Juste au moment de l'utiliser, vous devez ajouter le paramètre après le nœud : --harmony. Cependant, même ainsi, le nœud ne prend toujours pas en charge toutes les fonctionnalités ES6. Vous devez donc utiliser Babel à ce moment-là.

Adresse du projet : https://github.com/future-challenger/petshop

Démarrez Babel maintenant

Avant de commencer à utiliser Babel, supposez

1. Vous avez installé nodejs et connaissez déjà Js.

2. Vous pouvez également utiliser npm pour installer divers packages de dépendances.

3. Et vous connaissez également ES6 (plus tard remplacé par ES2015) dans une certaine mesure.

On suppose également que vous avez installé du fil et que vous êtes familier avec le fil. Le plus grand avantage de Yarn est qu'il est beaucoup plus rapide que npm, car Yarn ne télécharge les bibliothèques requises qu'une seule fois et utilise directement la version mise en cache localement lorsqu'elle est utilisée ultérieurement. npm téléchargera ces bibliothèques à chaque fois. Quelle perte de vie. Si vous n'avez pas encore installé Yarn, cela n'a pas d'importance. Vous trouverez également des instructions pour utiliser npm ci-dessous.

Ensuite, commencez à installer et à configurer Babel. Installez babel-cli

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

Installez les préréglages de Babel.

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

Vous pouvez actuellement utiliser les fonctionnalités d'ES2015. Cependant, cela ne suffit pas. Par exemple, je ne veux pas utiliser Promise, je veux utiliser la syntaxe async/await plus pratique. Seul le préréglage es2015 ne suffit pas.

Le plugin et le préréglage de Babel

Babel lui-même ne gère pas le transcodage des fonctionnalités du langage. Ces fonctions sont implémentées par plugin et preset (le preset est également une collection de plugins). Comme mentionné ci-dessus, pour utiliser le contenu es2015, vous devez installer le préréglage babel-preset-es2015. Pour utiliser async/await, vous devez installer le préréglage ou le plug-in correspondant. Pour plus de simplicité, nous installons le préréglage : babel-preset-stage-0. Le preset stage-0 inclut des plug-ins liés à l'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

De cette façon, vous ne pouvez toujours pas utiliser l'async/await d'es7 dans votre projet. Plus de configuration est nécessaire et il existe deux façons d'atteindre l'objectif :

1. Utiliser babel-polyfill. Il y a un inconvénient, babel-polyfill polluera l'objet global, il ne convient donc pas à une utilisation dans les bibliothèques et autres. Convient uniquement à l'utilisation d'applications Web.

2. Utilisez l'outil de transcodage d'exécution Babel, transform-runtime plug-in. L’utilisation de cette méthode compense simplement les défauts de la méthode ci-dessus. Il est particulièrement adapté aux projets tels que les bibliothèques.

Présentez respectivement ces deux méthodes.

Après avoir installé babel-polyfill :

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

, introduisez babel-polyfill en haut du fichier d'entrée de votre projet. Par exemple, j'ai maintenant une application Web express et le fichier d'entrée est le fichier index.js qui ouvre l'application. Introduisez polyfill en haut de ce fichier, require('babel-polyfill'). Soit votre fichier d'entrée est déjà écrit dans ES2015, alors importez directement, import 'babel-polyfill'.

Utiliser transform-runtime est également très simple. Installation :

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

Vous devez également installer babel-runtime :

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

puis l'ajouter dans le Fichier .babelrc Pour la configuration suivante, vous pouvez choisir l'une des deux :

// 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"
  }]
 ]
}

Le reste est à utiliser async/await joyeusement.

De plus, si vous souhaitez utiliser une méthode comme Object.assing, vous pouvez également utiliser le plugin : babel-plugin-transform-object-assign Si vous souhaitez utiliser l'affectation de déstructuration, vous pouvez utiliser le plugin : babel-plugin-transform-object-rest-spread. Bien entendu, ceux-ci sont inclus dans le préréglage stage-0.

Commencez à écrire le code ES2015 maintenant. Installez ExpressJs dans le projet et créez un fichier index.js. Essayons de créer une petite application Web comme exercice :

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'))

Exécutez la commande :

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

Utilisez la commande* babel- node** peut exécuter le code. Les paramètres suivants spécifient le préréglage et le plugin utilisés lors de l'échappement du code js.

La méthode officiellement recommandée par Babel est d'utiliser le fichier .babelrc, qui peut être plus flexible. Créez un fichier .babelrc dans le répertoire du projet et ajoutez la description du preset et du plugin que vous avez installés :

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

De cette façon, vous pouvez utiliser babel-node pour exécuter le code, ou utilisez la commande babel pour échapper au code. Par exemple :

babel -w code/ -d build/

La commande babel lira la configuration à partir du fichier de configuration, mutera les fichiers dans le répertoire code/ et convertira le code JavaScript échappé. Exportez le fichier dans le répertoire build/. Il y a aussi le paramètre -w dans la ligne de commande. Ce paramètre de commande spécifie watch Chaque fois que le fichier dans le répertoire de code est modifié, cela déclenchera à nouveau l'exécution de la commande babel.

Utiliser les mappages sources dans les fichiers

上面看起来很不错了。但是还有一个问题，在你调试代码的时候，你调试的实际是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.0、eslint-plugin-import@^2.2.0、eslint-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又可以使很多不大不小但是很费时间的事自动处理。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于NodeJS框架Express的模板视图机制分析

关于nodejs socket服务端和客户端的简单通信功能

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!