Node.js 中使用 ES6 中的 import / export 的方法大全
轉 https://www.jianshu.com/p/ce92a09ad6eb
Node.js 中使用 ES6 中的 import / export 的方法大全
三種方法。
先上圖。
源代碼文件目錄（https://github.com/AK-47-D/nodejs_es6_tutorials）：
方法1 放棄使用 ES6, 使用 Node中的 module 模塊語法
util_for_node.js
function log(o) { console.log(o); } module.exports = log; es6_const_let_node_demo.js
// 在 Node 中使用模塊的正確姿勢： const log = require("./lib/util_for_node"); // ES5 var a = 1; a = a + 1; log(a); // 2 // ES6 const b = 1; // b = b + 1; // error : TypeError: Assignment to constant variable. log(b); // ES6 let c = 1; c = c + 1; log(c); 運行測試：
$ node es6_const_let_node_demo.js 2 1 2 方法2 使用萬能變換器：babel
util_for_babel.js
function log(o) { console.log(o); } export {log} es6_const_let_babel_demo.js
import {log} from "./lib/util_for_babel"; /** node： module.exports和require es6：export和import nodejs仍未支持import/export語法，需要安裝必要的npm包–babel，使用babel將js文件編譯成node.js支持的commonjs格式的代碼。 因為一些歷史原因，雖然 Node.js 已經實現了 99% 的 ES6 新特性，不過截止 2018.8.10，How To Enable ES6 Imports in Node.JS 仍然是老大難問題 借助 Babel 1.下載必須的包 npm install babel-register babel-preset-env --D 命令行執行： babel-node es6_const_let_babel_demo.js * * @type {number} */ // ES5 var a = 1; a = a + 1; log(a); // 2 // ES6 const b = 1; // b = b + 1; // error : TypeError: Assignment to constant variable. log(b); // ES6 let c = 1; c = c + 1; log(c); 上面的代碼，直接 node 命令行運行是要報錯的：
$ node es6_const_let_babel_demo.js /Users/jack/WebstormProject/node-tutorials/hello-node/es6_const_let_babel_demo.js:1 (function (exports, require, module, __filename, __dirname) { import {log} from "./lib/util_for_babel"; ^ SyntaxError: Unexpected token { at new Script (vm.js:79:7) at createScript (vm.js:251:10) at Object.runInThisContext (vm.js:303:10) at Module._compile (internal/modules/cjs/loader.js:656:28) at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10) at Module.load (internal/modules/cjs/loader.js:598:32) at tryModuleLoad (internal/modules/cjs/loader.js:537:12) at Function.Module._load (internal/modules/cjs/loader.js:529:3) at Function.Module.runMain (internal/modules/cjs/loader.js:741:12) at startup (internal/bootstrap/node.js:285:19) 是的，這個時候，我們需要再加上一層 Babel 的映射邏輯。下面就是 Babel 出場了。
1.安裝依賴
npm install babel-register babel-preset-env --D package.json
{ "name": "hell-node", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel-preset-env": "^1.7.0", "babel-register": "^6.26.0" } } 2.寫處理啟動腳本
es6_const_let_babel_demo_start.js
require('babel-register') ({ presets: [ 'env' ] }) module.exports = require('./es6_const_let_babel_demo.js') OK，多費了這么多事，終於可以跑了：
$ node es6_const_let_babel_demo_start.js 2 1 2 跑的時候，你會明顯發現，真 TMD 慢了許多！！！ 慢就慢在 Babel 這層處理映射邏輯上。
方法3 使用 Node 中的實驗特性：node --experimental-modules
你看，為了特意區分這是module JavaScript，文件后綴名必須改成 .mjs
util_for_node_exp.mjs
/** * 注意到這里的源碼文件的后綴 .mjs * @param o */ function log(o) { console.log(o); } export {log}; es6_const_let_node_exp_demo.mjs
import {log} from "./lib/util_for_node_exp"; // ES5 var a = 1; a = a + 1; log(a); // 2 // ES6 const b = 1; // b = b + 1; // error : TypeError: Assignment to constant variable. log(b); // ES6 let c = 1; c = c + 1; log(c); /** * 源碼后綴 .mjs */ 命令行執行：
$ node --experimental-modules es6_const_let_node_exp_demo.mjs 輸出：
(node:1402) ExperimentalWarning: The ESM module loader is experimental. 2 1 2 OK，上面就是 Node.js 中使用 ES6 中的 import / export 方法。
Node.js 中使用 import / export
因為一些歷史原因，雖然 Node.js 已經實現了 99% 的 ES6 新特性，不過截止 2018.8.10，How To Enable ES6 Imports in Node.JS 仍然是老大難問題
下面我來介紹兩種方法可以讓我們在 Node.js 中使用 import/export 。
借助 Babel
1.下載必須的包
npm install babel-register babel-preset-env --D - 修改你的 server.js
下面是一個 server.js 的例子：
const Koa = require('koa') const app = new Koa() app.listen(3000, console.log("application is start at port 3000")) 用 import 替換 require
import Koa from 'koa' const app = new Koa() app.listen(3000, console.log("application is start at port 3000")) 如果你現在用 node server.js 跑這個文件，你會收到像這樣的錯誤提示:
/Users/zyf/myStudy/demo/chatroom/server/app.js:1 (function (exports, require, module, __filename, __dirname) { import Koa from 'koa' ^^^ SyntaxError: Unexpected identifier 下面讓我們用 babel 來解決這個問題
3.新增一個 start.js 文件
這個文件將成為我們的入口文件，里面是一些 babel 的代碼
require('babel-register') ({ presets: [ 'env' ] }) module.exports = require('./server.js') 注意，接下來不是 node server.js，而是用 node start.js 來啟動這個文件
來自 Node.js 官方的力量
Node 9提供了一個尚處於 Experimental 階段的模塊，讓我們可以拋棄 babel 等一類工具的束縛，直接在 Node 環境下使用 import/export。
官方手冊：ECMAScript Modules
一個不錯的教程：Node 9下import/export的絲般順滑使用
有興趣的可以去了解一下，嫌字多的可以繼續往下看看我總結的使用方法
用前須知
Node 版本需在 9.0 及以上
不加 loader 時候，使用 import/export 的文件后綴名必須為 .mjs
舉個栗子
還是用上面的例子，請將代碼回退到 Babel 中第一步的樣子
1.改寫 server.js
import Koa from 'koa' const app = new Koa() app.listen(3000, console.log("application is start at port 3000")) 和前面一樣，不過將文件名改一下，從 server.js 改為 server.mjs
2.啟動文件
執行下面代碼，來啟動文件
node --experimental-modules ./server.mjs
注意這是引用 koa 第三方模塊不用做其他變化，如果要 import 自己的文件，那么那個待引入的文件也要改后綴。
比如
import example from './example' 那么原來應該是 example.js 要改為 example.mjs
目前這個模塊還處於實驗階段，還是不要放到生產環境，自己拿出來玩玩還是可以的。
原文：https://blog.csdn.net/zwkkkk1/article/details/81564971
Node 9下import/export的絲般順滑使用
前言
Node 9最激動人心的是提供了在flag模式下使用ECMAScript Modules，雖然現在還是Stability: 1 - Experimental階段，但是可以讓Noder拋掉babel等工具的束縛，直接在Node環境下愉快地去玩耍import/export
如果覺得文字太多，看不下去，可以直接去玩玩demo，地址是https://github.com/chenshenhai/node-modules-demo
Node 9下import/export使用簡單須知
- Node 環境必須在 9.0以上
- 不加loader時候，使用
import/export的文件后綴名必須為*.mjs（下面會講利用Loader Hooks兼容*.js后綴文件） - 啟動必須加上flag
--experimental-modules - 文件的
import和export必須嚴格按照ECMAScript Modules語法 ECMAScript Modules和require()的cache機制不一樣
快速使用import/export
- 新建
mod-1.mjs，mod-2.mjs文件
/* ./mod-1.mjs */
export default {
num: 0,
increase() {
this.num++;
},
decrease() {
this.num--;
}
}
/* ./mod-2.mjs */
import Mod1 from './mod-1';
export default {
increase() {
Mod1.increase();
},
decrease() {
Mod1.decrease();
}
}
- 建立啟動文件
index.mjs
import Mod1 from './mod-1';
import Mod2 from './mod-2';
console.log(`Mod1.num = ${Mod1.num}`)
Mod1.increase();
console.log(`Mod1.num = ${Mod1.num}`)
Mod2.increase();
console.log(`Mod1.num = ${Mod1.num}`)
- 執行代碼
node --experimental-modules ./index.mjs
控制台會顯示
使用簡述
執行了上述demo后，快速體驗了Node的原生import/export能力，那我們來講講目前的支持狀況，Node 9.x官方文檔 https://nodejs.org/dist/latest-v9.x/docs/api/esm.html
與require()區別
| 能力 | 描述 | require() | import |
|---|---|---|---|
| NODE_PATH | 從NODE_PATH加載依賴模塊 | Y | N |
| cache | 緩存機制 | 可以通過require的API操作緩存 | 自己獨立的緩存機制，目前不可訪問 |
| path | 引用路徑 | 文件路徑 | URL格式文件路徑，例如import A from './a?v=2017' |
| extensions | 擴展名機制 | require.extensions | Loader Hooks |
| natives | 原生模塊引用 | 直接支持 | 直接支持 |
| npm | npm模塊引用 | 直接支持 | 需要Loader Hooks |
| file | 文件(引用) | *.js,*.json等直接支持 |
默認只能是*.mjs，通過Loader Hooks可以自定義配置規則支持*.js,*.json等Node原有支持文件 |
Loader Hooks模式使用
由於歷史原因，在ES6的Modules還沒確定之前，JavaScript的模塊化處理方案都是八仙過海，各顯神通，例如前端的AMD、CMD模塊方案，Node的CommonJS方案也在這個“亂世”誕生。
當到了ES6規范確定后，Node的CommonJS方案已經是JavaScript中比較成熟的模塊化方案，但ES6怎么說都是正統的規范，“法理”上是需要兼容的，所以*.mjs這個針對ECMAScript Modules規范的Node文件方案在一片討論聲中應運而生。
當然如果
import/export只能對*.mjs文件起作用，意味着Node原生模塊和npm所有第三方模塊都不能。所以這時候Node 9就提供了Loader Hooks，開發者可自定義配置Resolve Hook規則去利用import/export加載使用Node原生模塊，*.js文件，npm模塊，C/C++的Node編譯模塊等Node生態圈的模塊。
Loader Hooks 使用步驟
- 自定義loader規則
- 啟動的flag要加載loader規則文件
- 例如：
node --experimental-modules --loader ./custom-loader.mjs ./index.js
- 例如：
如果覺得以下文字太長，可以先去玩玩對應的demo3 https://github.com/chenshenhai/node-modules-demo/tree/master/demo3
自定義規則快速上手
- 文件目錄
├── demo3
│ ├── es
│ │ ├── custom-loader.mjs
│ │ ├── index.js
│ │ ├── mod-1.js
│ │ └── mod-2.js
│ └── package.json
- 加載自定義loader，執行
import/export的*.js文件
node --experimental-modules --loader ./es/custom-loader.mjs ./es/index.js
自定義loader規則解析
以下是Node 9.2官方文檔提供的一個自定義loader文件
import url from 'url';
import path from 'path';
import process from 'process';
// 獲取所有Node原生模塊名稱
const builtins = new Set(
Object.keys(process.binding('natives')).filter((str) =>
/^(?!(?:internal|node|v8)\/)/.test(str))
);
// 配置import/export兼容的文件后綴名
const JS_EXTENSIONS = new Set(['.js', '.mjs']);
// flag執行的resolve規則
export function resolve(specifier, parentModuleURL /*, defaultResolve */) {
// 判斷是否為Node原生模塊
if (builtins.has(specifier)) {
return {
url: specifier,
format: 'builtin'
};
}
// 判斷是否為*.js, *.mjs文件
// 如果不是則，拋出錯誤
if (/^\.{0,2}[/]/.test(specifier) !== true && !specifier.startsWith('file:')) {
// For node_modules support:
// return defaultResolve(specifier, parentModuleURL);
throw new Error(
`imports must begin with '/', './', or '../'; '${specifier}' does not`);
}
const resolved = new url.URL(specifier, parentModuleURL);
const ext = path.extname(resolved.pathname);
if (!JS_EXTENSIONS.has(ext)) {
throw new Error(
`Cannot load file with non-JavaScript file extension ${ext}.`);
}
// 如果是*.js, *.mjs文件，封裝成ES6 Modules格式
return {
url: resolved.href,
format: 'esm'
};
}
規則總結
在自定義loader中，export的resolve規則最核心的代碼是
return {
url: '',
format: ''
}
- url 是模塊名稱或者文件URL格式路徑
- format 是模塊格式有
esm,cjs,json,builtin,addon這四種模塊/文件格式.
Koa2 直接使用import/export
看看demo4，https://github.com/chenshenhai/node-modules-demo/tree/master/demo4
- 文件目錄
├── demo4
│ ├── README.md
│ ├── custom-loader.mjs
│ ├── index.js
│ ├── lib
│ │ ├── data.json
│ │ ├── path.js
│ │ └── render.js
│ ├── package-lock.json
│ ├── package.json
│ └── view
│ ├── index.html
│ └── todo.html
代碼片段太多，不一一貼出來，只顯示主文件
import Koa from 'koa';
import { render } from './lib/render.js';
import data from './lib/data.json';
let app = new Koa();
app.use((ctx, next) => {
let view = ctx.url.substr(1);
let content;
if ( view === 'data' ) {
content = data;
} else {
content = render(view);
}
ctx.body = content;
})
app.listen(3000, ()=>{
console.log('the modules test server is starting');
});
- 執行代碼
node --experimental-modules --loader ./custom-loader.mjs ./index.js
自定義loader規則優化
從上面官方提供的自定義loader例子看出，只是對*.js文件做import/export做loader兼容，然而我們在實際開發中需要對npm模塊，*.json文件也使用import/export
loader規則優化解析
import url from 'url';
import path from 'path';
import process from 'process';
import fs from 'fs';
// 從package.json中
// 的dependencies、devDependencies獲取項目所需npm模塊信息
const ROOT_PATH = process.cwd();
const PKG_JSON_PATH = path.join( ROOT_PATH, 'package.json' );
const PKG_JSON_STR = fs.readFileSync(PKG_JSON_PATH, 'binary');
const PKG_JSON = JSON.parse(PKG_JSON_STR);
// 項目所需npm模塊信息
const allDependencies = {
...PKG_JSON.dependencies || {},
...PKG_JSON.devDependencies || {}
}
//Node原生模信息
const builtins = new Set(
Object.keys(process.binding('natives')).filter((str) =>
/^(?!(?:internal|node|v8)\/)/.test(str))
);
// 文件引用兼容后綴名
const JS_EXTENSIONS = new Set(['.js', '.mjs']);
const JSON_EXTENSIONS = new Set(['.json']);
export function resolve(specifier, parentModuleURL, defaultResolve) {
// 判斷是否為Node原生模塊
if (builtins.has(specifier)) {
return {
url: specifier,
format: 'builtin'
};
}
// 判斷是否為npm模塊
if ( allDependencies && typeof allDependencies[specifier] === 'string' ) {
return defaultResolve(specifier, parentModuleURL);
}
// 如果是文件引用，判斷是否路徑格式正確
if (/^\.{0,2}[/]/.test(specifier) !== true && !specifier.startsWith('file:')) {
throw new Error(
`imports must begin with '/', './', or '../'; '${specifier}' does not`);
}
// 判斷是否為*.js、*.mjs、*.json文件
const resolved = new url.URL(specifier, parentModuleURL);
const ext = path.extname(resolved.pathname);
if (!JS_EXTENSIONS.has(ext) && !JSON_EXTENSIONS.has(ext)) {
throw new Error(
`Cannot load file with non-JavaScript file extension ${ext}.`);
}
// 如果是*.js、*.mjs文件
if (JS_EXTENSIONS.has(ext)) {
return {
url: resolved.href,
format: 'esm'
};
}
// 如果是*.json文件
if (JSON_EXTENSIONS.has(ext)) {
return {
url: resolved.href,
format: 'json'
};
}
}
后記
目前Node對import/export的支持現在還是Stability: 1 - Experimental階段，后續的發展還有很多不確定因素，自己練手玩玩還可以，但是在還沒去flag使用之前，盡量不要在生產環境中使用。
作者：一個會寫詩的程序員
鏈接：https://www.jianshu.com/p/ce92a09ad6eb
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。