So verwenden Sie ES6 in NodeJS-Projekten

Dieser Artikel stellt hauptsächlich die elegante Verwendung von ES6 in NodeJS-Projekten vor. Interessierte Freunde können darauf verweisen.

Neueste Versionen von NodeJs haben begonnen, die neuen Funktionen von ES6 (ES2015) zu unterstützen, und die Einstellungen unterstützen bereits erweiterte Funktionen wie async/await. Wenn Sie es verwenden, müssen Sie nach dem Knoten den Parameter --harmony hinzufügen. Allerdings unterstützt der Knoten immer noch nicht alle ES6-Funktionen. Daher müssen Sie zu diesem Zeitpunkt Babel verwenden.

Projektadresse: https://github.com/future-challenger/petshop

Starten Sie Babel jetzt

Bevor Sie mit der Verwendung von Babel beginnen, gehen Sie davon aus

1. Sie haben nodejs installiert und sind bereits mit Js vertraut.

2. Sie können npm auch verwenden, um verschiedene Abhängigkeitspakete zu installieren.

3. Und Sie sind bis zu einem gewissen Grad auch mit ES6 (später geändert in ES2015) vertraut.

Es wird außerdem davon ausgegangen, dass Sie Garn installiert haben und mit Garn vertraut sind. Der größte Vorteil von Yarn besteht darin, dass es viel schneller als npm ist, da Yarn die erforderlichen Bibliotheken nur einmal herunterlädt und bei späterer Verwendung direkt die lokal zwischengespeicherte Version verwendet. npm lädt diese Bibliotheken jedes Mal herunter. Was für eine Lebensverschwendung. Wenn Sie Garn noch nicht installiert haben, spielt es keine Rolle. Nachfolgend finden Sie auch Anweisungen zur Verwendung von npm.

Als Nächstes beginnen Sie mit der Installation und Konfiguration von Babel. Babel-cli installieren

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

Babel-Voreinstellungen installieren.

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

Zu diesem Zeitpunkt können Sie die Funktionen von ES2015 nutzen. Dies reicht jedoch nicht aus. Ich möchte beispielsweise nicht die bequemere Promise-Syntax verwenden. Nur die Voreinstellung es2015 reicht nicht aus. async/await

Plugin und Voreinstellung von Babel

Babel selbst kümmert sich nicht um die Transkodierung von Sprachfunktionen. Diese Funktionen werden durch Plugins und Presets implementiert (Preset ist auch eine Sammlung von Plugins). Wie oben erwähnt, müssen Sie zur Verwendung von es2015-Inhalten die Voreinstellung babel-preset-es2015 installieren. Um async/await nutzen zu können, müssen Sie das entsprechende Preset oder Plug-In installieren. Der Einfachheit halber installieren wir Preset: babel-preset-stage-0. Voreinstellung Stufe 0 enthält Async/Await-bezogene Plug-Ins: babel-plugin-syntax-async-functions, babel-plugin-transform-regenerator.

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

Auf diese Weise können Sie async/await von es7 immer noch nicht in Ihrem Projekt verwenden. Weitere Konfiguration ist erforderlich. Es gibt zwei Möglichkeiten, das Ziel zu erreichen:

1. Es gibt einen Nachteil:

verschmutzt das globale Objekt und ist daher nicht für die Verwendung in Bibliotheken und dergleichen geeignet. Nur für die Nutzung als Web-App geeignet. babel-polyfillbabel-polyfill
2. Verwenden Sie das Babel-Laufzeit-Transkodierungstool,

Plug-in. Die Verwendung dieser Methode gleicht lediglich die Mängel der oben genannten Methode aus. Es eignet sich besonders für Projekte wie Bibliotheken.

transform-runtime

Stellen Sie diese beiden Methoden jeweils vor.

Nach der Installation von

:

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

babel-polyfill fügen Sie

oben in der Eintragsdatei Ihres Projekts ein. Ich habe derzeit beispielsweise eine Express-Web-App und die Eintragsdatei ist die Datei index.js, die die App öffnet. Fügen Sie oben in dieser Datei Polyfill ein,

. Oder Ihre Eintragsdatei ist bereits in ES2015 geschrieben, dann direkt importieren, babel-polyfill. require('babel-polyfill')import 'babel-polyfill'Die Verwendung von

ist ebenfalls sehr einfach. Installation:

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

transform-runtime Sie müssen auch babel-runtime installieren:

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

und dann die folgende Konfiguration zur .babelrc hinzufügen Datei, wählen Sie einfach eine der beiden aus:

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

Der Rest besteht darin, async/await fröhlich zu verwenden.

Wenn Sie außerdem eine Methode wie

verwenden möchten, können Sie auch das Plug-in verwenden:

Wenn Sie eine destrukturierende Zuweisung verwenden möchten, können Sie das Plug-in verwenden: Object.assing. Diese sind natürlich im Stage-0-Preset enthalten. babel-plugin-transform-object-assignbabel-plugin-transform-object-rest-spreadBeginnen Sie jetzt mit dem Schreiben von ES2015-Code. Installieren Sie ExpressJs im Projekt und erstellen Sie eine index.js-Datei. Versuchen wir als Übung, eine kleine Web-App zu erstellen:

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

Führen Sie den Befehl aus:

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

Verwenden Sie den Befehl *babel-node* * Ermöglicht die Ausführung des Codes. Die folgenden Parameter geben die Voreinstellung und das Plugin an, die beim Escapen von JS-Code verwendet werden.

Die von Babel offiziell empfohlene Methode ist die Verwendung der .babelrc-Datei, die flexibler sein kann. Erstellen Sie eine .babelrc-Datei im Projektverzeichnis und fügen Sie die Beschreibung der Voreinstellung und des Plugins hinzu, die Sie installiert haben:

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

Auf diese Weise können Sie babel-node direkt verwenden. Führen Sie den Code aus oder verwenden Sie den Befehl babel, um den Code zu maskieren. Zum Beispiel:

babel -w code/ -d build/

Der Befehl „babel“ liest die Konfiguration aus der Konfigurationsdatei, ändert die Dateien im Verzeichnis „code/“ und exportiert die maskierten JavaScript-Dateien. Gehen Sie zu das build/-Verzeichnis. Es gibt auch den Parameter -w in der Befehlszeile. Dieser Befehlsparameter gibt an, dass jedes Mal, wenn die Datei im Codeverzeichnis geändert wird, der Babel-Befehl erneut ausgeführt wird.

Quellkarten in Dateien verwenden

上面看起来很不错了。但是还有一个问题，在你调试代码的时候，你调试的实际是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服务端和客户端的简单通信功能

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ES6 in NodeJS-Projekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!