javascript - 我们是否仍然需要为 NPM 预编译包而付出所有这些努力?
问题描述
我目前正在开展一个项目,其中将有许多 npm 包。我想对这个项目采取更激进的方法。因此,不应再预编译任何文件。在包的 src 文件夹中,只有 d.ts、ts、js、mjs 文件(正如我所说,它们中的任何一个都不应该被预编译)。我这样做是出于懒惰,因为我认为是时候停止预编译文件了!
我的意思是我应该创建多少个变体?ESModules、AMD、CommonJs、SystemJS?
我的简单想法是:保持原样(从'x'导入x,导出foo = 123)并且使用该包的开发人员将已经拥有正确的工具(Babel,Typescript)!或不?
第二个问题是:包应该编译到哪个级别?ES3,ES6?什么打包只使用现代浏览器并且只支持它们的用户?差分加载在这里是正确的方法吗?我只在 HTML 文件的环境中看到了差异加载。所以作为一个起点!如果开发人员有选择地使用这些软件包,我就不是这种情况。
具体来说,我的问题是:我们还需要付出所有这些努力吗?目前最小的公分母是什么?我不知道统计数字,但我感觉每个人都在他的项目中使用编译器/预处理器(Babel、PostCss)?
你怎么看待这件事?
解决方案
根据我的经验,如今 CommonJS 和 ES 模块是相关技术。你可能决定跳过 CommonJS,然后你就可以在没有转译的情况下相处。但是,许多框架和其他库仍然依赖于 CommonJS,它们无法使用 ES 模块。
作为一种轻量级方法,您可以执行以下操作:
首先:默认情况下将所有内容编写为 ES 模块,并将您的包布局为默认用作 ES 模块(例如"type":"module"
,在您的 package.json 中设置并.mjs
用作文件结尾)。
然后:使用 Babel,但只为你的模块创建一个 CommonJS 后备。这可能看起来像这样:
将以下开发依赖项添加到您的项目中。(对于特殊的语法情况,还有其他 Babel 插件;Babel 通常会告诉你它需要哪些插件):
npm install --save-dev @babel/cli @babel/core @babel/plugin-syntax-import-meta @babel/plugin-transform-modules-commonjs
然后将以下块添加到您的 package.json:
"babel": {
"plugins": [
[ "@babel/plugin-transform-modules-commonjs" ],
[ "@babel/plugin-syntax-import-meta" ]
]
}
现在你可以用一行简单的 shell 代码将你的 ES 模块转换为 CommonJS:
# assuming your ES modules are in the lib/ directory
for script in $(find lib/ -iname '*.mjs' | grep -v test.mjs | sed -e 's|.mjs||g'); do
npx babel $script.mjs > $script.cjs
done
您还可以将其作为脚本添加到您的 package.json。
"scripts": {
"build": "for script in $(find lib/ -iname '*.mjs' | grep -v test.mjs | sed -e 's|.mjs||g'); do npx babel $script.mjs > $script.cjs; done"
}
现在您可以使用 运行它npm run build
,将其添加为提交挂钩,或者在推送到 NPM 注册表之前运行它。您还可以构建到与 ES 模块所在的文件夹不同的文件夹,并通过 .gitignore 排除该文件夹。
这就是我创建几个库的方式(出于完全相同的原因),并且它在 CommonJS 和 ES 模块环境中都能完美运行。
顺便说一句,NodeJS 有一些关于将包作为 ES 模块和 CommonJS 发送的文档:https ://nodejs.org/api/esm.html#esm_dual_commonjs_es_module_packages
推荐阅读
- python - 如何根据先前的单元格值优化更新单元格/如何优雅地将单元格的值传播到其他单元格?
- javascript - 如何在不访问源代码的情况下从 webpack 条目编译输出中提取块
- python - 未找到 TensorFlow codart64_101.dll
- python - Django:UpdateView,创建另一个以前的图像
- powershell - Powershell - Write-Output 生成带有 BOM 字符的字符串
- reactjs - 尝试在 React Web 应用程序中呈现日期时出现“对象不是有效的 React 子项”错误
- javascript - 使用 JavaScript 将文档作为 Blob 发送到后端
- python - 为什么我在第二次运行中的结果与第一次不同
- sql - PostgreSQL 替换特定的 html 元素
- javascript - 使用 fetch API 忽略条件 GET