NodeJS 프로젝트에서 ES6을 사용하는 방법

이 글은 NodeJS 프로젝트에서 ES6를 우아하게 사용하는 방법을 주로 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

최신 버전의 NodeJ는 ES6(ES2015)의 새로운 기능을 지원하기 시작했으며 설정에서는 이미 async/await와 같은 고급 기능을 지원합니다. 이를 사용할 때 node: --harmony 뒤에 매개변수를 추가해야 합니다. 그러나 그럼에도 불구하고 노드는 여전히 모든 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의 사전 설정을 설치합니다.

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

이때 ES2015의 기능을 사용할 수 있습니다. 그러나 이것만으로는 충분하지 않습니다. 예를 들어 Promise를 사용하고 싶지 않습니다. 더 편리한 async/await 구문을 사용하고 싶습니다. 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

Babel의 플러그인 및 프리셋

Babel 자체는 언어 기능의 트랜스코딩을 처리하지 않습니다. 이러한 기능은 플러그인과 프리셋으로 구현됩니다(프리셋도 플러그인 모음입니다). 위에서 언급한 것처럼 es2015 콘텐츠를 사용하려면 babel-preset-es2015 프리셋을 설치해야 합니다. async/await를 사용하려면 해당 프리셋이나 플러그인을 설치해야 합니다. 단순화를 위해 사전 설정인 babel-preset-stage-0을 설치합니다. 프리셋 stage-0에는 async/await 관련 플러그인이 포함되어 있습니다: babel-plugin-syntax-async-functions, babel-plugin-transform-regenerator.

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

이런 식으로 프로젝트에서는 es7의 async/await를 사용할 수 없습니다. 더 많은 구성이 필요하며 목표를 달성하는 방법에는 두 가지가 있습니다:

1. babel-polyfill을 사용하세요. 단점이 있는데, babel-polyfill은 전역 객체를 오염시키기 때문에 라이브러리 등에서 사용하기에는 적합하지 않습니다. 웹 앱 사용에만 적합합니다.

2. babel 런타임 트랜스코딩 도구인 transform-runtime 플러그인을 사용하세요. 이 방법을 사용하면 위 방법의 단점을 보완할 수 있습니다. 특히 도서관과 같은 프로젝트에 적합합니다.

이 두 가지 방법을 각각 소개합니다.

babel-polyfill:

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

을 설치한 후 항목 파일 상단에 가져옵니다. 프로젝트 babel-polyfill. 예를 들어, 이제 Express Web App이 있고 항목 파일은 앱을 여는 index.js 파일입니다. 이 파일 require('babel-polyfill') 상단에 폴리필을 추가하세요. 또는 항목 파일이 이미 ES2015로 작성된 경우 직접 가져오고 'babel-polyfill'을 가져옵니다.

transform-runtime을 사용하는 것도 매우 간단합니다. 설치:

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

babel-runtime도 설치해야 합니다:

#🎜🎜#

babel -w code/ -d build/

#🎜🎜##🎜🎜##🎜🎜#After .babelrc 파일에 다음 구성을 추가하고 둘 중 하나를 선택하세요. #🎜🎜##🎜🎜##🎜🎜#

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

errorAsyncFunc()

#🎜🎜##🎜🎜##🎜🎜#나머지는 비동기를 사용하는 것이 재미있습니다. /기다리다. #🎜🎜##🎜🎜#또한 Object.assing 메서드를 사용하려면 babel-plugin-transform-object-sign 플러그인을 사용할 수도 있습니다. , 구조 분해 할당을 사용하려면 babel-plugin-transform-object-rest-spread 플러그인을 사용할 수 있습니다. 물론 이는 stage-0 프리셋에도 포함되어 있습니다. #🎜🎜##🎜🎜#지금 ES2015 코드 작성을 시작하세요. 프로젝트에 ExpressJ를 설치하고 index.js 파일을 생성합니다. 연습으로 작은 웹 앱을 만들어 봅시다: #🎜🎜##🎜🎜##🎜🎜#

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

#🎜🎜##🎜🎜##🎜🎜#명령 실행: #🎜🎜#

npm run build

#🎜🎜 #사용 *babel-node** 명령을 사용하여 코드를 실행합니다. 다음 매개변수는 js 코드를 이스케이프할 때 사용되는 사전 설정과 플러그인을 지정합니다. #🎜🎜##🎜🎜#Babel에서 공식적으로 권장하는 방법은 좀 더 유연하게 사용할 수 있는 .babelrc 파일을 사용하는 것입니다. 프로젝트 디렉토리에 .babelrc 파일을 생성하고 설치한 프리셋과 플러그인에 대한 설명을 추가합니다: #🎜🎜##🎜🎜##🎜🎜#

npm rm --global gulp

#🎜🎜##🎜🎜##🎜🎜# 이런 식으로 babel을 사용하세요 -node를 직접 실행하여 코드를 실행하거나 babel 명령을 사용하여 코드를 이스케이프합니다. 예: #🎜🎜##🎜🎜##🎜🎜#

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

#🎜🎜##🎜🎜##🎜🎜#babel 명령은 구성 파일에서 구성을 읽어 code/ 디렉터리의 파일을 변경하고 전송합니다. 정의된 JavaScript 파일을 build/ 디렉터리로 내보냅니다. 명령줄에는 -w 매개변수도 있습니다. 이 명령 매개변수는 watch를 지정합니다. 코드 디렉터리의 파일이 수정될 때마다 babel 명령이 다시 실행됩니다. #🎜🎜##🎜🎜##🎜🎜#파일에서 소스 맵 사용#🎜🎜##🎜🎜#

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

위 내용은 NodeJS 프로젝트에서 ES6을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!