最新版的 node 支持最新版 ECMAScript 幾乎所有特性,但有一個特性卻一直到現在都還沒有支持,那就是從 ES2015 開始定義的模塊化機制。而現在我們很多項目都是用 es6 的模塊化規范來寫代碼的,包括 node 項目,所以,node 不能運行 es6 模塊文件就會很不便。
讓 node 運行 es6 模塊文件的方式有兩種:
es6 模塊為 commonjs 模塊 hook node 的 require 機制,直接讓 node 的 require 加載 import/export1. 轉碼 es6 模塊為 commonjs 模塊
因為 node 支持幾乎所有除 import/export 外的語法,所以我們只需要將 import/export 轉碼成 require/exports,而不需要轉碼其他語法。
比如下面的項目:
- package.json- src/ - index.js - print.js - ...
# package.json{ "main": "lib/index.js" # 由工具轉碼 src 目錄下源文件到 lib 目錄下}# src/index.jsimport print from './print';print('index');export default print;# src/print.jsexport default str => { console.log('print: ' + str);};因為 src 目錄下的源文件都是 es6 模塊化規范的,node 并不能直接運行,所以需要轉碼成 commonjs 規范的代碼。
這個過程有兩個方案:
如果不會單獨使用src 目錄下的某個文件,而僅僅是以 src/index.js 為入口文件使用,可以把 src 目錄下的文件打包成一個文件到 lib/index.js:這種方式推薦使用工具 rollup 如果需要單獨使用 src 目錄下的文件,那就需要把 src 目錄下的文件一對一的轉碼到 lib 目錄下:這種方式推薦使用工具 gulp + babel1.1 用 rollup 把 src 目錄下的文件打包成一個文件到 lib/index.js
相關文件:
# rollup.config.jsexport default { input: 'src/index.js', output: { file: 'lib/index.js', format: 'cjs', },};# package.json{ "scripts": { "build": "rollup -c" }, "devDependencies": { "rollup": "^0.66.4" }}運行命令:
npm run build
結果:
# lib/index.js'use strict';var print = str => { console.log('print: ' + str);};print('index');module.exports = print;1.2 用 gulp + babel 把 src 目錄下的文件一對一的轉碼到 lib 目錄下
相關文件:
# build.jsconst gulp = require('gulp');const babel = require('gulp-babel');gulp.task('babel', () => gulp.src('src/**/*.js') .pipe(babel({ plugins: ['@babel/plugin-transform-modules-commonjs'] })) .pipe(gulp.dest('lib')));gulp.series('babel')();# package.json{ "scripts": { "build": "node build.js" }, "devDependencies": { "@babel/core": "^7.1.2", "@babel/plugin-transform-modules-commonjs": "^7.2.0", "gulp": "^4.0.0", "gulp-babel": "^8.0.0" }}
新聞熱點
疑難解答
圖片精選