基于 Babel 的 npm 包的最小化设置 [每日前端夜话0x2F]
基于 Babel 的 npm 包的最小化设置 [每日前端夜话0x2F]
京程一灯 前端先锋
每日前端夜话0x2F
每日前端夜话,陪你聊前端。
每天晚上18:00准时推送。
正文共:2679 字 1 图
预计阅读时间: 7 分钟
翻译:疯狂的技术宅
原文:http://2ality.com/2017/07/npm-packages-via-babel.htm
l
这文描述了通过 Babel 生成 npm 包的最小设置。你可以在 GitHub 中看到 re-template-tag 中的设置。
GitHub:https://github.com/rauschma/re-template-tag
1 核心结构
有两组文件:
- 目录 esm/ 里有库的(还转换)实际源码。 package.json 中的 module 属性指向 esm/index.js
- 目录 test/ 含有基于AVA的对 esm/ 中代码的测试。
目录 cjs/ 有 ESM 文件的已转换版本,它们是 CommonJS 格式并支持在当前版本的 Node.js 环境下运行。
-
package.json 中的 main 属性指向 cjs/index.js
此结构支持两种用例:
babel-preset-env将这些文件转换为其目标平台支持的功能集。 另一篇文章 【http://2ality.com/2017/06/pkg-esnext.html】中描述了如何执行这个操作。
到此我们仅部分解决了如何填充可能缺少的库这个问题。接下来要彻底解决它
2 .gitignore
1cjs 2node_modules
cjs/ 没有提交到 git。我们只是在 npm 发布包之前按需生成它。
3 .npmignore
1node_modules
发布到 npm 时,我们需要包含 cjs/。这就是除了 .gitignore 之外我们还需要 .npmignore 的原因。
4 package.json
package.json 的主要部分
可以使用以下脚本:
1"scripts": { 2 "build": "babel esm --out-dir cjs", 3 "prepublishOnly": "npm run build", 4 "test": "ava" 5},
- build 用于生成 cjs/中的文件。
- prepublishOnly 能够确保在我们发布到 npm 之前始终构建 cjs /。
- test 通过 AVA 运行测试。
因此,我们有以下依赖项(仅在开发时):
1"devDependencies": { 2 "babel-cli": "^6.24.1", 3 "ava": "^0.21.0", 4 "babel-preset-env": "^1.5.1", 5 "babel-register": "^6.24.1" 6},
- 单元测试需要ava。
- babel-cli 提供命令 babel。
- babel-register 让 AVA 通过 Babel 执行测试。
- babel-preset-env 是 Babel 用于转换的预设。
1"main": "./cjs/index.js", 2"module": "./esm/index.js",
- main 是 CommonJS 格式的包入口点(包括在Node.js上运行的普通模块)。
- module是 ESM 格式的包入口点(包括webpack,取决于你如何设置它)。
- 有关这两个属性的更多信息:“设置多平台 npm 包”。【http://2ality.com/2017/04/setting-up-multi-platform-packages.html】
配置 Babel
对于Babel,我们用 babel-preset-env 典型的方式为当前运行的 Node.js 生成代码。
1"babel": { 2 "presets": [ 3 [ 4 "env", 5 { 6 "targets": { 7 "node": "current" 8 } 9 } 10 ] 11 ] 12},
配置 AVA
对于 AVA,我们需要 babel-register,它通过 Babel 转换所有测试和导入。 "babel": "inherit" 表示 AVA 使用上一节中的配置。
1"ava": { 2 "require": [ 3 "babel-register" 4 ], 5 "babel": "inherit" 6}
5 结论
以上是通过 Babel 创建 npm 包最小库的方法。重要的一点是它允许包的客户端使用 babel-preset-env(就像通过npm提供未转换的源代码 ”中所讲的那样)。所以它并没有 100% 的正确使用 module ,但是有广泛支持的优势,并且没有引入另一个 package.json 属性。
以上是通过 Babel 创建 npm 包最小库的方法。重要的一点是它允许包的客户端使用 babel-preset-env(就像“通过npm提供未转换的源代码 ”【http://2ality.com/2017/06/pkg-esnext.html】一文中所讲的那样)。为此,它没有 100% 的正确使用 module ,但具有广泛支持的优势,并且没有引入另一个 package.json 属性。
6 扩展阅读
- 免费在线书籍: “Setting up ES6”【https://leanpub.com/setting-up-es6/read】
- Delivering untranspiled source code via npm【http://2ality.com/2017/06/pkg-esnext.html】
- babel-preset-env : a preset that configures Babel for you【http://2ality.com/2017/02/babel-preset-env.html】
- webpack 非严格模式设置 npm i babel-plugin-transform-remove-strict-mode
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
- 怎样创建你的第一个React Native App[每日前端夜话0xD8]
- 解决 JavaScript 中处理 null 和 undefined 的麻烦事[每日前端夜话0xE6
- javascript 前端 基于 npm、bower、grunt的标准项目构建
- JavaScript 框架安全报告2019[每日前端夜话0xE5]
- 【转】前端框架基础:Babel & package.json & npm & nodemon
- 基于mac下前端开发基本环境搭建 VSCode + git + node.js + npm+ webpack + vue-cli4 + nrm + yarn
- Vue 3 中令人兴奋的新功能[每日前端夜话0xE2]
- 你可能错过的现代 JavaScript 特性 [每日前端夜话0xE0]
- 深入理解 JavaScript 回调函数 [每日前端夜话0xDF]
- 7个常见的 JavaScript 测验及解答[每日前端夜话0xDE]
- 在现代 JavaScript 中编写异步任务[每日前端夜话0xDD]
- 在 Node.js 上运行 Flutter Web 应用和 API[每日前端夜话0xDC]
- 我们应该为 JavaScript 重新命名吗?[每日前端夜话0xDA]
- 前端搭建node/npm/babel开发环境配置
- 10款web前端基于html5/CSS3应用特效
- (笔记)Spring实战_最小化Spring XML配置(4)_使用Spring基于Java的配置
- node及npm安装过程中的win环境变量设置
- 每日一题13:多项式的(基于链表实现)简单运算