当前位置:首页 > Web开发 > 正文

只显示主文件 #p#分页标题#e# import Koa from ‘koa‘;import { render } fr

2024-03-31 Web开发

如安在 Node.js 中使用 import / export 的三种要领, 2018.8

因为一些历史原因,虽然 Node.js 已经实现了 99% 的 ES6 新特性,不过截止 2018.8.10,How To Enable ES6 Imports in Node.JS 仍然是老浩劫问题

下面我来介绍三种要领可以让我们在 Node.js 中使用 import/export 。

一、三个方案 方案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

方案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

二、其他 2.1 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

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/30664.html