这样所有 .js 后缀的文件,node 都会用 ES 模块解释 。
# 使用 ES 模块规范 $ node index.js
如果还要使用 CommonJS 模块规范,那么需要将 CommonJS 脚本的后缀名都改成.cjs,不过两种模块规范最好不要混用,会产生异常报错 。
main
项目发布时,默认会包括 package.json,license,README 和main 字段里指定的文件,因为 main 字段里指定的是项目的入口文件,在 browser 和 Node 环境中都可以使用 。
如果不设置 main 字段,那么入口文件就是根目录下的 index.js 。
比如 packageA 的 main 字段指定为 index.js 。
"main": "./index.js"
我们引入 packageA 时,实际上引入的就是 node_modules/packageA/index.js 。
这是早期只有 CommonJS 模块规范时,指定项目入口的唯一属性 。
browser
main 字段里指定的入口文件在 browser 和 Node 环境中都可以使用 。如果只想在 web 端使用,不允许在 server 端使用,可以通过 browser 字段指定入口 。
"browser": "./browser/index.js"
module
同样,项目也可以指定 ES 模块的入口文件,这就是 module 字段的作用 。
"module": "./index.mjs"
当一个项目同时定义了 main,browser 和 module,像 webpack,rollup 等构建工具会感知这些字段,并会根据环境以及不同的模块规范来进行不同的入口文件查找 。
"main": "./index.js", "browser": "./browser/index.js", "module": "./index.mjs"
比如 webpack 构建项目时默认的 target 为 'web',也就是 Web 构建 。它的 resolve.mainFeilds 字段默认为 ['browser', 'module', 'main'] 。
module.exports = { //... resolve: { mainFields: ['browser', 'module', 'main'], }, };
此时会按照 browser -> module -> main 的顺序来查找入口文件 。
exports
node 在 14.13 支持在 package.json 里定义 exports 字段,拥有了条件导出的功能 。
exports 字段可以配置不同环境对应的模块入口文件,并且当它存在时,它的优先级最高 。
比如使用 require 和 import 字段根据模块规范分别定义入口:
"exports": { "require": "./index.js", "import": "./index.mjs" } }
这样的配置在使用 import 'xxx' 和 require('xxx') 时会从不同的入口引入文件,exports 也支持使用 browser 和 node 字段定义 browser 和 Node 环境中的入口 。
上方的写法其实等同于:
"exports": { ".": { "require": "./index.js", "import": "./index.mjs" } } }
为什么要加一个层级,把 require 和 import 放在 "." 下面呢?
因为 exports 除了支持配置包的默认导出,还支持配置包的子路径 。
比如一些第三方 UI 包需要引入对应的样式文件才能正常使用 。
import `packageA/dist/css/index.css`;
我们可以使用 exports 来封装文件路径:
"exports": { "./style": "./dist/css/index.css' },
用户引入时只需:
import `packageA/style`;
除了对导出的文件路径进行封装,exports 还限制了使用者不可以访问未在 "exports" 中定义的任何其他路径 。
比如发布的 dist 文件里有一些内部模块 dist/internal/module ,被用户单独引入使用的话可能会导致主模块不可用 。为了限制外部的使用,我们可以不在 exports 定义这些模块的路径,这样外部引入 packageA/dist/internal/module 模块的话就会报错 。
结合上面入口文件配置的知识,再来看看下方 vite 官网推荐的第三方库入口文件的定义,就很容易理解了 。
文章插图
workspaces
项目的工作区配置,用于在本地的根目录下管理多个子项目 。可以自动地在 npm install 时将 workspaces 下面的包,软链到根目录的 node_modules 中,不用手动执行 npm link 操作 。
workspaces 字段接收一个数组,数组里可以是文件夹名称或者通配符 。比如:
"workspaces": [ "workspace-a" ]
表示在 workspace-a 目录下还有一个项目,它也有自己的 package.json 。
package.json workspace-a └── package.json
通常子项目都会平铺管理在 packages 目录下,所以根目录下 workspaces 通常配置为:
"workspaces": [ "packages/*" ]
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Windows服务器管理工具 Windows Admin Center 部署及配置文档
- 对于一个叛逆完全不听话的孩子怎么办 孩子叛逆很不听话怎么办
- 覆流年|首播5集收视破亿,评分高达8.3,观众直言:剧情精彩、完全不够看
- 高一学生完全学不进去怎么办,高一学不进去了怎么办
- KVM虚拟机的安装\扩容\迁移\克隆\配置
- 李克勤|梁静茹战队那配置,能和李克勤打成平手,需要谢谢对手梁玉莹
- 苹果se配置和8一样吗 苹果se配置参数表和苹果8p对比
- 殷桃|“不怒自威”陈建斌从出道就长得成熟,“少年感”和他完全不搭边
- 娱乐圈|娱乐圈流行“忘年恋”?这一对组合男有才女有貌,却完全不被祝福
- h3c交换机配置聚合接口 华三交换机静态聚合配置