为react-hook-use-cta选择一个备份器

# Web 开发# 初学者# 开源# Tooling

序幕

主要的重点是安装、设置 `package.json` 和 `.parcelrc`。其余的只是细节。

选择打包工具

选择打包器的目的是

  • 具有简单且简便的设置
  • 生成可供其他捆绑工具使用的文件
  • 文件大小不会过大

    • 我记得读过一篇关于 ParcelJS 的文章，它非常适合打包用于消费的库。果然如此！

    我浏览了 Parcel 的文档网站，了解了我的需求，最后总结如下：

    安装 dev deps

    npm i -DE parcel @parcel/bundler-library @parcel/transformer-typescript-types rimraf

    笔记：

    我喜欢使用 `-E` 标志，这样软件包就可以使用精确的版本号进行安装。我过去有过不精确的经历，因为我的旧团队在不同机器上安装的软件包版本不一致。当您提交 `package-lock.json` 时，这实际上不是问题，但我喜欢安全。

    `parcel` 是核心包。

    `@parcel/transformer-typescript-types` 包含在 Typescript 转译文件中。

    其余软件包将会在整篇文章中解释。

    package.json 的变更

    {
  "exports": {
    "import": "./dist/esm/index.mjs",
    "require": "./dist/cjs/index.js",
    "types": "./dist/types.d.ts"
  },
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.mjs",
  "sideEffects": false,
  "source": "src/index.ts",
  "types": "dist/types.d.ts",
  "scripts": {
    "build": "rimraf dist && parcel build --log-level verbose --no-cache"
  }
}

    `“exports”` 帮助模块解析找到以下相对路径：

  • “需要” CJS 兼容文件
  • “导入”现代 JS 兼容文件。
  • “类型” Typescript 声明文件。

    • `"source"` 是为了让 `ParcelJS` 知道要从哪个文件进行捆绑。

    输出文件路径通过以下方式指定：

  • “main” 用于创建 CJS 包。内容根路径到 exports.require
  • 现代包的“模块”。导出到exports.import的内容根路径
  • Typescript 声明的“types”。exports.types 的内容根路径

    • `"sideEffects": false` 告诉 `webpack`，当它从 `webpack` 项目捆绑此包时，它可以积极地对其进行树状摇动。

    设置“scripts.build”来调用“rimraf”来删除“dist”，以确保干净的本地构建，即使该文件夹尚不存在。

    除了 `index.js`、`index.mjs` 和 `types.d.ts(.map)` 之外，

    ParcelJS 生成具有唯一哈希的文件，该哈希会根据文件内容及其相关的文件名而变化。例如，“useCTA.ts”可以生成为“useCTA.ae11379d.js”。这会告诉其他捆绑器缓存机制在重建时捆绑新的更改。

    .parcelrc

    {
  "extends": "@parcel/config-default",
  "bundler": "@parcel/bundler-library"
}

    '“extends”：“@parcel/config-default”' 是启用 tree-shaking 配置所必需的。

    `"bundler": "@parcel/bundler-library"` 可以创建可摇树优化的 bundle。

    开始捆绑

    npm run build

    查看 ParcelJS 在 `dist` 文件夹中生成的内容。

    就这样！接下来，我将介绍如何发布库。