Node.js 前不久发布了v13.2.0,宣布开始支持ES modules。在此之前,想要在node中使用ES modules,需要添加--experimental-module。v13.2.0版本后,可以直接使用ES modules了。
想要在项目中使用ES modules,有以下两种方法:
1、文件后缀名使用.mjs
举个例子,假设项目目录如下:
.
|____component
| |____a.mjs
|____index.mjs
文件内容如下:
// component/a.mjs
let a = 'This is component a';
export default a;
// index.mjs
import a from './component/a.mjs';
console.log(a);
执行node index.mjs,代码可以正确执行,输出如下:
(node:77465) ExperimentalWarning: The ESM module loader is experimental.
This is component a
2、文件依然使用.js的后缀名,在项目的package.json中设置:type:module
项目目录如下:
.
|____component
| |____a.js
|____package.json
|____index.js
各个文件内容如下:
// component/a.js
let a = 'This is component a';
export default a;
// index.js
import a from './component/a.mjs';
console.log(a);
// package.json
{
...
"type": "module", // 必须要有这一行
...
}
执行node index.js,代码可以正确执行,输出如下:
(node:78977) ExperimentalWarning: The ESM module loader is experimental.
This is component a
如果在命令行使用ES module,需要加上--input-type=module。举个例子:
node --input-type=module --eval "import { sep } from 'path'; console.log(sep);"
需要注意的是,目前,ES module的实现还是实验性质的,后续有随时调整的可能。
import引入ES module时,支持以下几种方式:
另外,使用import引用ES module时,可以像这样使用:
所有的Node内置模块,例如fs和path,均支持上述三种方式来引用。
import也可以引入Commonjs的模块,包含以下两种情况:
例如代码目录如下:
.
|____component
| |____a.cjs
|____package.json
|____index.js
文件内容如下:
// component/a.cjs
let a = 'This is component a';
console.log('aaaa');
module.exports = a;
// index.js
import a from './component/a.cjs';
console.log(a);
// package.json
{
...
"type": "module",
...
}
执行node index.js,代码可以正确执行,输入如下:
(node:81677) ExperimentalWarning: The ESM module loader is experimental.
aaaa
This is component a
例如代码目录如下:
.
|____component
| |____a.js
| |____package.json
|____package.json
|____index.js
文件内容如下:
// component/a.js
let a = 'This is component a';
console.log('aaaa');
module.exports = a;
// component/package.json
{
"type": "commonjs" // 也可以不设置type字段
}
// index.js
import a from './component/a.js';
console.log(a);
// package.json
{
...
"type": "module",
...
}
执行node index.js,代码可以正确执行,输入如下:
(node:81677) ExperimentalWarning: The ESM module loader is experimental.
aaaa
This is component a
本文通过示例,简单介绍了Node.js中ES Module的相关使用方法,更多详细介绍请参考官方文档:https://nodejs.org/api/esm.html
本文首发于公众号:符合预期的CoyPan
当下, 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的,模块化已经是常态。我们对它并不陌生,今天,我们就再系统的回顾一下ES6的模块机制
更多 css-loader 的配置建议前往 github_css-loader 查看,因为版本更新后,配置可能会有变。配置完 webpack,写 css 时要使用相关语法,因为是通过 webpack 打包时进行编译,重新生成新的 css 类名来防止全局变量名污染的。
在node.js中modules(模块)与文件是一一对应的,也就是说一个node.js文件就是一个模块,文件内容可能是我们封装好的一些JavaScript方法、JSON数据、编译过的C/C++拓展等,在关于node.js的误会提到过node.js的架构
node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。在node.js中模块与文件是一一对应的,也就是说一个node.js文件就是一个模块。
所有的 class 的名称和动画的名称默认属于本地作用域的 CSS 文件。所以 CSS Modules 不是一个官方的规范,也不是浏览器的一种机制,它是一种构建步骤中的一个进程。
虽然已在最新的 LTS v12.17.0 中支持,但是目前仍处于 Stability: 1 - Experimental 实验阶段,如果是在生产环境使用该功能,还应保持谨慎,如果在测试环境可以安装 n install v12.17.0 进行尝试。
有时候使用 npm 上的包,发现有 bug ,我们知道如何修改,但是别人可能一时半会没法更新,或者是我们特殊需求,别人不愿意修改,这时候我们只能自己动手丰衣足食。那么我们应该如何修改别人的源码呢?
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!