翻译:疯狂的技术宅
原文:http://2ality.com/2017/07/npm...
本文首发微信公众号:jingchengyideng
欢迎关注,每天都给你推送新鲜的前端技术文章
本文描述了通过 Babel 生成 npm 包的最小设置。你可以在 GitHub 中看到案例 re-template-tag
的设置。
GitHub:https://github.com/rauschma/r...
1 核心结构
有两组文件:
-
目录
esm/
里有库的(还转换)实际源码。-
package.json
中的module
属性指向esm/index.js
- 目录
test/
含有基于AVA的对esm/
中代码的测试。
-
-
目录
cjs/
有 ESM 文件的已转换版本,它们是 CommonJS 格式并支持在当前版本的 Node.js 环境下运行。-
package.json
中的main
属性指向cjs/index.js
-
此结构支持两种用例:
- Node.js 应用使用
cjs/
中的文件。 - Web应用(通过 webpack 等)使用
esm/
中的文件。它们通过babel-preset-env
将这些文件转换为其目标平台支持的功能集。 另一篇文章 中描述了如何执行这个操作。
到此我们仅部分解决了如何填充可能缺少的库这个问题。接下来要彻底解决它
2 .gitignore
cjs
node_modules
cjs/
没有提交到 git。我们只是在 npm 发布包之前按需生成它。
3 .npmignore
node_modules
发布到 npm 时,我们需要包含 cjs/
。这就是除了 .gitignore
之外我们还需要 .npmignore
的原因。
4 package.json
package.json
的主要部分
可以使用以下脚本:
"scripts": {
"build": "babel esm --out-dir cjs",
"prepublishOnly": "npm run build",
"test": "ava"
},
-
build
用于生成cjs/
中的文件。 -
prepublishOnly
能够确保在我们发布到 npm 之前始终构建cjs /
。 -
test
通过 AVA 运行测试。
因此,我们有以下依赖项(仅在开发时):
"devDependencies": {
"babel-cli": "^6.24.1",
"ava": "^0.21.0",
"babel-preset-env": "^1.5.1",
"babel-register": "^6.24.1"
},
- 单元测试需要
ava
。 -
babel-cli
提供命令babel
。 -
babel-register
让 AVA 通过 Babel 执行测试。 -
babel-preset-env
是 Babel 用于转换的预设。
"main": "./cjs/index.js",
"module": "./esm/index.js",
-
main
是 CommonJS 格式的包入口点(包括在Node.js上运行的普通模块)。 -
module
是 ESM 格式的包入口点(包括webpack,取决于你如何设置它)。 - 有关这两个属性的更多信息:“设置多平台 npm 包”。
配置 Babel
对于Babel,我们用 babel-preset-env
典型的方式为当前运行的 Node.js 生成代码。
"babel": {
"presets": [
[
"env",
{
"targets": {
"node": "current"
}
}
]
]
},
配置 AVA
对于 AVA,我们需要 babel-register
,它通过 Babel 转换所有测试和导入。 "babel": "inherit"
表示 AVA 使用上一节中的配置。
"ava": {
"require": [
"babel-register"
],
"babel": "inherit"
}
5 结论
以上是通过 Babel 创建 npm 包最小库的方法。重要的一点是它允许包的客户端使用 babel-preset-env
(就像通过npm提供未转换的源代码 ”中所讲的那样)。所以它并没有 100% 的正确使用 module
,但是有广泛支持的优势,并且没有引入另一个 package.json
属性。
6 扩展阅读
- 免费在线书籍: “Setting up ES6”
- Delivering untranspiled source code via npm
babel-preset-env
: a preset that configures Babel for you
欢迎继续阅读本专栏其它高赞文章:
- 12个令人惊叹的CSS实验项目
- 世界顶级公司的前端面试都问些什么
- CSS Flexbox 可视化手册
- 过节很无聊?还是用 JavaScript 写一个脑力小游戏吧!
- 从设计者的角度看 React
- CSS粘性定位是怎样工作的
- 一步步教你用HTML5 SVG实现动画效果
- 程序员30岁前月薪达不到30K,该何去何从
- 第三方CSS安全吗?
- 谈谈super(props) 的重要性
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。