Skip to content

package

Jump to bottom
JohnieXu edited this page Jul 18, 2023 · 7 revisions

当在 package.json 文件中使用 exports 字段时，它用于指定模块的导出方式。exports 字段是一个对象，可以包含多个属性来定义不同的导出方式。

以下是一些关于 package.json exports 的重要事项：

  1. 默认导出：可以使用 "exports" 字段指定默认导出的模块路径。例如：
{
  "name": "my-module",
  "exports": "./src/index.js"
}

上述代码表示将 "./src/index.js" 文件作为默认导出。

  1. 命名导出：可以使用 "exports" 字段指定命名导出的模块路径。例如：
{
  "name": "my-module",
  "exports": {
    "foo": "./src/foo.js",
    "bar": "./src/bar.js"
  }
}

上述代码表示将 "./src/foo.js" 导出为名为 "foo" 的模块，将 "./src/bar.js" 导出为名为 "bar" 的模块。

  1. 条件导出：可以使用 "exports" 字段指定根据条件导出的模块路径。例如：
{
  "name": "my-module",
  "exports": {
    ".": {
      "import": "./src/index.js",
      "require": "./lib/index.js"
    }
  }
}

上述代码表示在使用 ES 模块导入时，将 "./src/index.js" 导出；而在使用 CommonJS 导入时，将 "./lib/index.js" 导出。

  1. 导出子路径：可以在 "exports" 字段中使用子路径来指定导出的文件或目录。例如：
{
  "name": "my-module",
  "exports": {
    "./utils": "./src/utils"
  }
}

上述代码表示将 "./src/utils" 目录导出为名为 "./utils" 的模块。

关于 package.json exports 的更多信息，你可以参考以下链接：

vite

当在 Vite 项目中使用 package.json 的 exports 字段时，可以通过指定模块的入口文件来配置模块的导出。这个特性允许你更细粒度地控制模块的导入和导出方式，以提高构建速度和减少打包体积。

以下是一些关于 Vite package.json 的 exports 字段的重要事项：

  1. exports 字段是一个对象，其中键是模块的名称或路径，值是该模块的入口文件路径。
  2. 入口文件路径可以是相对路径或绝对路径。
  3. 你可以使用通配符 * 来匹配多个模块。例如，"src/*": "./src/*.js" 表示将 src 目录下的所有模块都导出为相应的 JavaScript 文件。
  4. 你可以使用 default 键来指定默认导出的入口文件路径。
  5. 你可以使用 import 键来指定导入该模块时的入口文件路径。
  6. 你可以使用 require 键来指定在 CommonJS 环境中导入该模块时的入口文件路径。
  7. 你可以使用 browser 键来指定在浏览器环境中导入该模块时的入口文件路径。
  8. 你可以使用 node 键来指定在 Node.js 环境中导入该模块时的入口文件路径。
  9. 你可以使用 importConditions 键来指定导入条件，以根据不同的环境导入不同的模块。

以下是一个示例的 package.json 文件，展示了 exports 字段的用法：

{
  "name": "my-vite-project",
  "version": "1.0.0",
  "exports": {
    "./src/main.js": {
      "import": "./src/main.js",
      "require": "./src/main.cjs",
      "browser": "./src/main.browser.js",
      "node": "./src/main.node.js"
    },
    "utils": {
      "import": "./src/utils/index.js",
      "require": "./src/utils/index.cjs",
      "browser": "./src/utils/index.browser.js",
      "node": "./src/utils/index.node.js"
    },
    "components/*": "./src/components/*.js",
    "styles/*": "./src/styles/*.css",
    "default": "./src/main.js"
  }
}

请注意，Vite 的 package.json 的 exports 字段是一个实验性的特性，目前仍在开发中，具体的用法和配置可能会有所变化。你可以在 Vite 的官方文档中了解更多关于 package.json 的 exports 字段的信息：Vite - package.json exports

https://cn.vitejs.dev/config/shared-options.html#resolve-conditions https://nodejs.org/api/packages.html#packages_conditional_exports

Node.js 的 package.json 的 exports 说明-https://nodejs.org/api/packages.html#package-entry-points

vue2项目如何处理polyfill-https://cli.vuejs.org/zh/guide/browser-compatibility.html#polyfill

vite项目如何处理polyfill-https://github.com/vitejs/vite/tree/main/packages/plugin-legacy#polyfills

Clone this wiki locally