搜尋
首頁web前端js教程如何在NodeJS專案中使用ES6

如何在NodeJS專案中使用ES6

Jun 30, 2018 am 10:47 AM
nodenodejs

本篇文章主要介紹了詳解如何在NodeJS專案中優雅的使用ES6,具有一定的參考價值,有興趣的小夥伴們可以參考一下。

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又可以使很多不大不小但是很费时间的事自动处理。

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

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

相关推荐:

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

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

以上是如何在NodeJS專案中使用ES6的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
node.js流帶打字稿node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O,這在很大程度上要歸功於流。 流媒體匯總處理數據,避免內存過載 - 大型文件,網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript:性能和效率注意事項Python vs. JavaScript:性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在:1)Python作為解釋型語言,運行速度較慢,但開發效率高,適合快速原型開發;2)JavaScript在瀏覽器中受限於單線程,但在Node.js中可利用多線程和異步I/O提升性能,兩者在實際項目中各有優勢。

JavaScript的起源:探索其實施語言JavaScript的起源:探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年,由布蘭登·艾克創造,實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後:什麼語言能力JavaScript?幕後:什麼語言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行,依賴JavaScript引擎解析和執行代碼。 1)解析階段生成抽象語法樹(AST);2)編譯階段將AST轉換為字節碼或機器碼;3)執行階段執行編譯後的代碼。

Python和JavaScript的未來:趨勢和預測Python和JavaScript的未來:趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括:1.Python將鞏固在科學計算和AI領域的地位,2.JavaScript將推動Web技術發展,3.跨平台開發將成為熱門,4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景,並在性能上有更多突破。

Python vs. JavaScript:開發環境和工具Python vs. JavaScript:開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎?檢查證據JavaScript是用C編寫的嗎?檢查證據Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C語言編寫的。 1)C語言提供了高效性能和底層控制,適合JavaScript引擎的開發。 2)以V8引擎為例,其核心用C 編寫,結合了C的效率和麵向對象特性。 3)JavaScript引擎的工作原理包括解析、編譯和執行,C語言在這些過程中發揮關鍵作用。

JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具