@modern-js/module-tools-docs 2.0.2 → 2.2.0-beta.0

package/doc_build/static/js/async/{guide_basic_before-getting-started.js → zh_guide_basic_before-getting-started.js}

@@ -1,5 +1,5 @@
 "use strict";
-(self["webpackChunk_modern_js_module_tools_docs"] = self["webpackChunk_modern_js_module_tools_docs"] || []).push([["guide_basic_before-getting-started"],{
+(self["webpackChunk_modern_js_module_tools_docs"] = self["webpackChunk_modern_js_module_tools_docs"] || []).push([["zh_guide_basic_before-getting-started"],{
 
 /***/ "./docs/zh/guide/basic/before-getting-started.md":
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
@@ -18,11 +18,11 @@ __webpack_require__.r(__webpack_exports__);
 /*@jsxRuntime automatic @jsxImportSource react*/
 
 
-var CH = {
+const CH = {
   annotations: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.annotations,
   Code: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.Code
 };
-var chCodeConfig = {
+const chCodeConfig = {
   "staticMediaQuery": "not screen, (max-width: 768px)",
   "theme": {
     "name": "nord",
@@ -1185,12 +1185,12 @@ var chCodeConfig = {
   "autoImport": true,
   "showCopyButton": true,
   "skipLanguages": [],
-  "filepath": "/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/basic/before-getting-started.md"
+  "filepath": "/Users/targeral/github/targeral-modern-js/website/module-tools/docs/zh/guide/basic/before-getting-started.md"
 };
-var frontmatter = {
+const frontmatter = {
   "sidebar_position": 1
 };
-var toc = [{
+const toc = [{
   "id": "环境准备",
   "text": "环境准备",
   "depth": 2
@@ -1239,10 +1239,10 @@ var toc = [{
   "text": "Module Tools 配置文件",
   "depth": 2
 }];
-var title = "\u5F00\u59CB\u4E4B\u524D";
-var content = "\"---\\nsidebar_position: 1\\n---\\n\\n# 开始之前\\n\\n## 环境准备\\n\\n为了使用 Modern.js 模块工程解决方案，首先需要 [NodeJS](https://nodejs.org/zh/)，我们推荐最新的[长期维护版本](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **14.17.6**。因为非稳定的 NodeJS 时常有一些 Bug，你可以使用 [nvm-windows](https://github.com/coreybutler/nvm-windows) 和 [nvm](https://github.com/nvm-sh/nvm)（Mac/linux）安装，这样你就可以方便地切换到不同的 NodeJS 版本，这些版本可能会用于不同的项目。\\n\\n## 初识 npm\\n\\n当 NodeJS 被安装后，你不仅可以在命令行中访问 `node` 可执行程序，同时你也可以执行 `npm` 命令。\\n\\nnpm 是 NodeJS 的标准软件包管理器。它一开始的用途是用于下载和管理 NodeJS 包的依赖关系，但后来它逐渐变成为一个用于前端 JavaScript 的工具。\\n\\n**如果你已经对 npm 和 npm 包的使用方式有所了解，那么可以直接跳到[【npm 包管理器】](/guide/basic/before-getting-started#npm-包管理器)部分。**\\n\\n## npm 包类型项目\\n\\n那么什么是 npm 包类型的项目呢？当我们在一个空的项目目录下执行 `npm init` 命令的时候，它会在当前目录下面创建一个文件名为 `package.json` 的 JSON 文件。在创建过程中，我们需要填写包括但不限于 npm 包的名称、版本号、描述等等内容，这些填写的内容都会在生成的 `package.json` 文件中找到：\\n\\n```json\\n{\\n  \\\"name\\\": \\\"npm-demo\\\",\\n  \\\"version\\\": \\\"1.0.0\\\",\\n  \\\"description\\\": \\\"\\\",\\n  \\\"main\\\": \\\"index.js\\\",\\n  \\\"scripts\\\": {\\n    \\\"test\\\": \\\"echo \\\\\\\"Error: no test specified\\\\\\\" && exit 1\\\"\\n  },\\n  \\\"author\\\": \\\"\\\",\\n  \\\"license\\\": \\\"ISC\\\"\\n}\\n```\\n\\n此时这个包含了初始化后的 `package.json` 文件的项目就是一个 npm 包类型的项目，你可以执行 `npm publish` 命令将这个项目发布到 [npm Registry](https://www.npmjs.com/)。\\n\\nnpm Registry 是一个 [npm 包存储的地方](https://docs.npmjs.com/about-the-public-npm-registry)，开发者们不仅可以将他们自己的 npm 包发布到 npm Registry，还可以通过 npm Registry 使用其他开发者发布的 npm 包。\\n\\n优质的 npm 包会有更多的人去使用，因为它不仅节省了很多代码实现的工作，同时也不容易让项目出现问题。\\n\\n## 使用第三方 npm 包\\n\\n当要为初始化的项目增加第三方的 npm 包的时候，我们可以把这一过程叫做“为项目安装依赖”或是“为项目增加依赖”。在增加依赖之前，首先我们要特别了解一件事情 —— **npm 依赖的软件包类型**：\\n\\n- `\\\"dependencies\\\"`：一种是你的应用程序在生产环境中需要的软件包。\\n- `\\\"devDependencies\\\"`：另一种是仅在本地开发和测试中需要的软件包。\\n  > 软件包可以理解为是第三方的 npm 包。\\n\\n你可以通过执行 `npm install npm-package-name` 或者 `npm add npm-package-name` 的方式来安装在**生产环境中需要的软件包**，或者也可以在 `package.json` 文件中手动的将需要安装的包和对应的[语义化版本](https://docs.npmjs.com/about-semantic-versioning)写在 `\\\"dependencies\\\"` 里，并执行 `npm install` 命令：\\n\\n```json\\n{\\n  \\\"name\\\": \\\"your-npm-project\\\",\\n  \\\"dependencies\\\": {\\n    \\\"npm-package-name\\\": \\\"0.1.0\\\"\\n  }\\n}\\n```\\n\\n同理，你也可以执行 `npm install npm-package-name --save-dev` 或 `npm add npm-package-name --save-dev` 的方式来安装**仅在本地开发和测试中需要的软件包**，或者也可以在 `package.json` 文件中手动的将需要安装的包和对应的[语义化版本](https://docs.npmjs.com/about-semantic-versioning)写在 `\\\"devDependencies\\\"` 里，并执行 `npm install` 命令：\\n\\n```json\\n{\\n  \\\"name\\\": \\\"your-npm-project\\\",\\n  \\\"devDependencies\\\": {\\n    \\\"npm-package-name\\\": \\\"0.1.0\\\"\\n  }\\n}\\n```\\n\\n**在安装或者使用第三方 npm 包的时候一定要确定它们的用途，以及通过区分它们的类型确定好它们应该放在 `\\\"dependencies\\\"` 还是 `\\\"devDependencies\\\"` 中。**\\n:::tip\\n一般来说，需要在源代码中使用到的包都属于 `dependencies` 依赖。除非你通过打包的方式将依赖的代码输出到本地，那么这种情况可以将它作为 `devDependencies` 依赖。\\n:::\\n\\n## 还需要了解的 npm 零碎知识\\n\\n### npm 包的程序入口\\n\\n在 `package.json` 中存在一个 `\\\"main\\\"` 属性，它对应的值是一个模块 ID，或者更直观的说是一个 NodeJS 文件路径，它是你程序的主要入口。\\n\\n例如你的包名为 `foo`，并且用户安装了它，然后执行 `require(\\\"foo\\\")` 代码，那么 `foo` 这个 npm 包的 `\\\"main\\\"` 字段对应的文件将会被导出。\\n\\n**推荐在你的 npm 包里一定要设置 `\\\"main\\\"` 字段**。如果没有设置 `\\\"main\\\"`，则默认入口为包的根目录下的 `index.js` 文件。\\n\\n除了需要设置 `\\\"main\\\"` 属性以外，一般还会设置 `\\\"module\\\"` 属性。它与 `\\\"main\\\"` 属性的用途类似，它主要是用于在 webpack 场景下使用。webpack 在大多数情况下，会以 **\\\"module\\\" -> \\\"main\\\"** 这个顺序读取 npm 包的入口（文件）。\\n\\n> 想要了解关于 webpack 如何做这件事，可以查看这个[链接](https://webpack.js.org/configuration/resolve/#resolvemainfields)。\\n\\n### `\\\"scripts\\\"`\\n\\n`package.json` 文件的 `\\\"scripts\\\"` 属性支持一些内置的脚本和 npm 预设的生命周期事件，以及任意的脚本。\\n\\n这些都可以通过运行 `npm run-script <stage>` 或简称 `npm run <stage>` 来执行。\\n\\n名称匹配的[前置命令和后置命令](https://docs.npmjs.com/cli/v9/using-npm/scripts#pre--post-scripts)也会被运行（例如 `premyscript`、`myscript`、`postmyscript`）。\\n\\n```json\\n{\\n  \\\"scripts\\\": {\\n    \\\"premyscript\\\": \\\"\\\",\\n    \\\"myscript\\\": \\\"\\\",\\n    \\\"postmyscript\\\": \\\"\\\"\\n  }\\n}\\n```\\n\\n当执行 `npm run myscripts` 的时候，`premyscripts` 对应的脚本会在它之前执行，`postmyscripts` 对应的脚本会在它之后执行。\\n\\n来自依赖的脚本命令可以用 `npm explore <pkg> -- npm run <stage>` 运行。\\n\\n还有一些特殊的生命周期脚本（Life Scripts），只在某些情况下发生。这里介绍几个通常需要了解的情况。\\n\\n#### `npm install`\\n\\n当你运行 `npm install -g <pkg-name>` 时，以下脚本会运行。\\n\\n- `preinstall`\\n- `install`\\n- `postinstall`\\n- `prepublish`\\n- `preprepare`\\n- `prepare`\\n- `postprepare`\\n\\n如果你的软件包根目录有一个 `binding.gyp` 文件，而你没有定义 `install` 或 `preinstall` 脚本，那么 npm 将以 `node-gyp rebuild` 作为默认的 install 命令，使用 [node-gyp](https://github.com/nodejs/node-gyp) 进行编译。\\n\\n#### `npm publish`\\n\\n当发布项目的时候，执行该命令会触发以下脚本：\\n\\n- `prepublishOnly`\\n- `prepack`\\n- `prepare`\\n- `postpack`\\n- `publish`\\n- `postpublish`\\n\\n当以 [`--dry-run`](https://docs.npmjs.com/cli/v7/commands/npm-publish#dry-run) 模式运行的时候，`prepare` 对应的脚本将不会执行。\\n\\n### peerDependencies\\n\\n在某些情况下，你的 npm 项目与它的宿主工具或者库之间存在某种兼容关系（例如一个 webpack 插件项目和 webpack），同时你的 npm 项目不想将宿主作为必要的依赖，这个时候通常说明你的项目可能是这个宿主工具或者库的插件。你的 npm 项目会对宿主包的版本有一定的要求，因为只有在特定的版本下才会暴露出 npm 项目所需要的 API。\\n\\n关于更多 `peerDependencies` 的解释，可以通过下面的链接了解 npm、pnpm、Yarn 对于它的不同处理方式：\\n\\n- [npm 对 peerDependencies 的解释](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#peerdependencies)\\n- [pnpm vs npm VS Yarn](https://pnpm.io/feature-comparison)\\n\\n## npm 包管理器\\n\\n除了 npm 这种标准的包管理器以外，目前主流的还有 **pnpm** 和 **Yarn**，它们都是不错的 npm cli 替代品。\\n\\n推荐使用 [pnpm](https://pnpm.io/installation) 来管理项目依赖，可以通过下面的方式安装它：\\n\\n```bash\\nnpm install -g pnpm\\n```\\n\\n## Module Tools 配置文件\\n\\n初始化的模块工程项目目录下提供了 Module Tools 的配置文件 —— `modern.config.(j|t)s`。默认情况下，不需要做任何配置，因此 `modern.config` 配置文件不是必须存在的。\\n\\n初始化的配置文件的内容如下：\\n\\n```typescript\\n// modern.config.ts\\nimport { defineConfig } from '@modern-js/module-tools';\\n\\nexport default defineConfig({});\\n```\\n\\n```js\\n// modern.config.js\\nconst { defineConfig } = require('@modern-js/module-tools');\\n\\nmodule.exports = defineConfig({});\\n```\\n\\n**我们推荐使用 `defineConfig` 函数**，不过并不强制使用它。因此你也可以在配置文件中直接返回一个对象：\\n\\n```typescript\\n// modern.config.ts\\nexport default {};\\n```\\n\\n```js\\n// modern.config.js\\nmodule.exports = {};\\n```\\n\"";
+const title = `开始之前`;
+const content = "\"---\\nsidebar_position: 1\\n---\\n\\n# 开始之前\\n\\n## 环境准备\\n\\n为了使用 Modern.js 模块工程解决方案，首先需要 [NodeJS](https://nodejs.org/zh/)，我们推荐最新的[长期维护版本](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **14.18.0**。因为非稳定的 NodeJS 时常有一些 Bug，你可以使用 [nvm-windows](https://github.com/coreybutler/nvm-windows) 和 [nvm](https://github.com/nvm-sh/nvm)（Mac/linux）安装，这样你就可以方便地切换到不同的 NodeJS 版本，这些版本可能会用于不同的项目。\\n\\n## 初识 npm\\n\\n当 NodeJS 被安装后，你不仅可以在命令行中访问 `node` 可执行程序，同时你也可以执行 `npm` 命令。\\n\\nnpm 是 NodeJS 的标准软件包管理器。它一开始的用途是用于下载和管理 NodeJS 包的依赖关系，但后来它逐渐变成为一个用于前端 JavaScript 的工具。\\n\\n**如果你已经对 npm 和 npm 包的使用方式有所了解，那么可以直接跳到[【npm 包管理器】](/guide/basic/before-getting-started#npm-包管理器)部分。**\\n\\n## npm 包类型项目\\n\\n那么什么是 npm 包类型的项目呢？当我们在一个空的项目目录下执行 `npm init` 命令的时候，它会在当前目录下面创建一个文件名为 `package.json` 的 JSON 文件。在创建过程中，我们需要填写包括但不限于 npm 包的名称、版本号、描述等等内容，这些填写的内容都会在生成的 `package.json` 文件中找到：\\n\\n```json\\n{\\n  \\\"name\\\": \\\"npm-demo\\\",\\n  \\\"version\\\": \\\"1.0.0\\\",\\n  \\\"description\\\": \\\"\\\",\\n  \\\"main\\\": \\\"index.js\\\",\\n  \\\"scripts\\\": {\\n    \\\"test\\\": \\\"echo \\\\\\\"Error: no test specified\\\\\\\" && exit 1\\\"\\n  },\\n  \\\"author\\\": \\\"\\\",\\n  \\\"license\\\": \\\"ISC\\\"\\n}\\n```\\n\\n此时这个包含了初始化后的 `package.json` 文件的项目就是一个 npm 包类型的项目，你可以执行 `npm publish` 命令将这个项目发布到 [npm Registry](https://www.npmjs.com/)。\\n\\nnpm Registry 是一个 [npm 包存储的地方](https://docs.npmjs.com/about-the-public-npm-registry)，开发者们不仅可以将他们自己的 npm 包发布到 npm Registry，还可以通过 npm Registry 使用其他开发者发布的 npm 包。\\n\\n优质的 npm 包会有更多的人去使用，因为它不仅节省了很多代码实现的工作，同时也不容易让项目出现问题。\\n\\n## 使用第三方 npm 包\\n\\n当要为初始化的项目增加第三方的 npm 包的时候，我们可以把这一过程叫做“为项目安装依赖”或是“为项目增加依赖”。在增加依赖之前，首先我们要特别了解一件事情 —— **npm 依赖的软件包类型**：\\n\\n- `\\\"dependencies\\\"`：一种是你的应用程序在生产环境中需要的软件包。\\n- `\\\"devDependencies\\\"`：另一种是仅在本地开发和测试中需要的软件包。\\n  > 软件包可以理解为是第三方的 npm 包。\\n\\n你可以通过执行 `npm install npm-package-name` 或者 `npm add npm-package-name` 的方式来安装在**生产环境中需要的软件包**，或者也可以在 `package.json` 文件中手动的将需要安装的包和对应的[语义化版本](https://docs.npmjs.com/about-semantic-versioning)写在 `\\\"dependencies\\\"` 里，并执行 `npm install` 命令：\\n\\n```json\\n{\\n  \\\"name\\\": \\\"your-npm-project\\\",\\n  \\\"dependencies\\\": {\\n    \\\"npm-package-name\\\": \\\"0.1.0\\\"\\n  }\\n}\\n```\\n\\n同理，你也可以执行 `npm install npm-package-name --save-dev` 或 `npm add npm-package-name --save-dev` 的方式来安装**仅在本地开发和测试中需要的软件包**，或者也可以在 `package.json` 文件中手动的将需要安装的包和对应的[语义化版本](https://docs.npmjs.com/about-semantic-versioning)写在 `\\\"devDependencies\\\"` 里，并执行 `npm install` 命令：\\n\\n```json\\n{\\n  \\\"name\\\": \\\"your-npm-project\\\",\\n  \\\"devDependencies\\\": {\\n    \\\"npm-package-name\\\": \\\"0.1.0\\\"\\n  }\\n}\\n```\\n\\n**在安装或者使用第三方 npm 包的时候一定要确定它们的用途，以及通过区分它们的类型确定好它们应该放在 `\\\"dependencies\\\"` 还是 `\\\"devDependencies\\\"` 中。**\\n\\n:::tip\\n一般来说，需要在源代码中使用到的包都属于 `dependencies` 依赖。除非你通过打包的方式将依赖的代码输出到本地，那么这种情况可以将它作为 `devDependencies` 依赖。\\n:::\\n\\n## 还需要了解的 npm 零碎知识\\n\\n### npm 包的程序入口\\n\\n在 `package.json` 中存在一个 `\\\"main\\\"` 属性，它对应的值是一个模块 ID，或者更直观的说是一个 NodeJS 文件路径，它是你程序的主要入口。\\n\\n例如你的包名为 `foo`，并且用户安装了它，然后执行 `require(\\\"foo\\\")` 代码，那么 `foo` 这个 npm 包的 `\\\"main\\\"` 字段对应的文件将会被导出。\\n\\n**推荐在你的 npm 包里一定要设置 `\\\"main\\\"` 字段**。如果没有设置 `\\\"main\\\"`，则默认入口为包的根目录下的 `index.js` 文件。\\n\\n除了需要设置 `\\\"main\\\"` 属性以外，一般还会设置 `\\\"module\\\"` 属性。它与 `\\\"main\\\"` 属性的用途类似，它主要是用于在 webpack 场景下使用。webpack 在大多数情况下，会以 **\\\"module\\\" -> \\\"main\\\"** 这个顺序读取 npm 包的入口（文件）。\\n\\n> 想要了解关于 webpack 如何做这件事，可以查看这个[链接](https://webpack.js.org/configuration/resolve/#resolvemainfields)。\\n\\n### `\\\"scripts\\\"`\\n\\n`package.json` 文件的 `\\\"scripts\\\"` 属性支持一些内置的脚本和 npm 预设的生命周期事件，以及任意的脚本。\\n\\n这些都可以通过运行 `npm run-script <stage>` 或简称 `npm run <stage>` 来执行。\\n\\n名称匹配的[前置命令和后置命令](https://docs.npmjs.com/cli/v9/using-npm/scripts#pre--post-scripts)也会被运行（例如 `premyscript`、`myscript`、`postmyscript`）。\\n\\n```json\\n{\\n  \\\"scripts\\\": {\\n    \\\"premyscript\\\": \\\"\\\",\\n    \\\"myscript\\\": \\\"\\\",\\n    \\\"postmyscript\\\": \\\"\\\"\\n  }\\n}\\n```\\n\\n当执行 `npm run myscripts` 的时候，`premyscripts` 对应的脚本会在它之前执行，`postmyscripts` 对应的脚本会在它之后执行。\\n\\n来自依赖的脚本命令可以用 `npm explore <pkg> -- npm run <stage>` 运行。\\n\\n还有一些特殊的生命周期脚本（Life Scripts），只在某些情况下发生。这里介绍几个通常需要了解的情况。\\n\\n#### `npm install`\\n\\n当你运行 `npm install -g <pkg-name>` 时，以下脚本会运行。\\n\\n- `preinstall`\\n- `install`\\n- `postinstall`\\n- `prepublish`\\n- `preprepare`\\n- `prepare`\\n- `postprepare`\\n\\n如果你的软件包根目录有一个 `binding.gyp` 文件，而你没有定义 `install` 或 `preinstall` 脚本，那么 npm 将以 `node-gyp rebuild` 作为默认的 install 命令，使用 [node-gyp](https://github.com/nodejs/node-gyp) 进行编译。\\n\\n#### `npm publish`\\n\\n当发布项目的时候，执行该命令会触发以下脚本：\\n\\n- `prepublishOnly`\\n- `prepack`\\n- `prepare`\\n- `postpack`\\n- `publish`\\n- `postpublish`\\n\\n当以 [`--dry-run`](https://docs.npmjs.com/cli/v7/commands/npm-publish#dry-run) 模式运行的时候，`prepare` 对应的脚本将不会执行。\\n\\n### peerDependencies\\n\\n在某些情况下，你的 npm 项目与它的宿主工具或者库之间存在某种兼容关系（例如一个 webpack 插件项目和 webpack），同时你的 npm 项目不想将宿主作为必要的依赖，这个时候通常说明你的项目可能是这个宿主工具或者库的插件。你的 npm 项目会对宿主包的版本有一定的要求，因为只有在特定的版本下才会暴露出 npm 项目所需要的 API。\\n\\n关于更多 `peerDependencies` 的解释，可以通过下面的链接了解 npm、pnpm、Yarn 对于它的不同处理方式：\\n\\n- [npm 对 peerDependencies 的解释](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#peerdependencies)\\n- [pnpm vs npm VS Yarn](https://pnpm.io/feature-comparison)\\n\\n## npm 包管理器\\n\\n除了 npm 这种标准的包管理器以外，目前主流的还有 **pnpm** 和 **Yarn**，它们都是不错的 npm cli 替代品。\\n\\n推荐使用 [pnpm](https://pnpm.io/installation) 来管理项目依赖，可以通过下面的方式安装它：\\n\\n```bash\\nnpm install -g pnpm\\n```\\n\\n## Module Tools 配置文件\\n\\n通过`@modern-js/create`创建的模块工程项目目录下提供了 Module Tools 的配置文件 —— `modern.config.(j|t)s`。但 `modern.config` 配置文件不是必须存在的。\\n\\n默认情况下，生成的配置文件的内容如下：\\n\\n```typescript\\n// modern.config.ts\\nimport moduleTools, { defineConfig } from '@modern-js/module-tools';\\n\\nexport default defineConfig({\\n  plugins: [moduleTools()],\\n  buildPreset: 'npm-library',\\n});\\n```\\n\\n```js\\n// modern.config.js\\nimport moduleTools from '@modern-js/module-tools';\\n\\nexport default {\\n  plugins: [moduleTools()],\\n  buildPreset: 'npm-library',\\n};\\n```\\n\\n**我们推荐使用 `defineConfig` 函数**，不过并不强制使用它。因此你也可以在配置文件中直接返回一个对象：\\n\\n```typescript\\n// modern.config.ts\\nexport default {};\\n```\\n\\n```js\\n// modern.config.js\\nexport default {};\\n```\\n\"";
 function _createMdxContent(props) {
-  var _components = Object.assign({
+  const _components = Object.assign({
     h1: "h1",
     a: "a",
     h2: "h2",
@@ -1278,17 +1278,25 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["为了使用 Modern.js 模块工程解决方案，首先需要 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://nodejs.org/zh/",
+        target: "_blank",
+        rel: "nofollow",
         children: "NodeJS"
       }), "，我们推荐最新的", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://github.com/nodejs/Release",
+        target: "_blank",
+        rel: "nofollow",
         children: "长期维护版本"
       }), "，并确保 Node 版本大于等于 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
-        children: "14.17.6"
+        children: "14.18.0"
       }), "。因为非稳定的 NodeJS 时常有一些 Bug，你可以使用 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://github.com/coreybutler/nvm-windows",
+        target: "_blank",
+        rel: "nofollow",
         children: "nvm-windows"
       }), " 和 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://github.com/nvm-sh/nvm",
+        target: "_blank",
+        rel: "nofollow",
         children: "nvm"
       }), "（Mac/linux）安装，这样你就可以方便地切换到不同的 NodeJS 版本，这些版本可能会用于不同的项目。"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h2, {
@@ -1310,7 +1318,7 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
       children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.strong, {
         children: ["如果你已经对 npm 和 npm 包的使用方式有所了解，那么可以直接跳到", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/guide/basic/before-getting-started#npm-%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8.html",
+          href: "/module-tools/guide/basic/before-getting-started.html#npm-%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8",
           children: "【npm 包管理器】"
         }), "部分。"]
       })
@@ -1928,11 +1936,15 @@ function _createMdxContent(props) {
         children: "npm publish"
       }), " 命令将这个项目发布到 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://www.npmjs.com/",
+        target: "_blank",
+        rel: "nofollow",
         children: "npm Registry"
       }), "。"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["npm Registry 是一个 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://docs.npmjs.com/about-the-public-npm-registry",
+        target: "_blank",
+        rel: "nofollow",
         children: "npm 包存储的地方"
       }), "，开发者们不仅可以将他们自己的 npm 包发布到 npm Registry，还可以通过 npm Registry 使用其他开发者发布的 npm 包。"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
@@ -1974,6 +1986,8 @@ function _createMdxContent(props) {
         children: "package.json"
       }), " 文件中手动的将需要安装的包和对应的", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://docs.npmjs.com/about-semantic-versioning",
+        target: "_blank",
+        rel: "nofollow",
         children: "语义化版本"
       }), "写在 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "\"dependencies\""
@@ -2229,6 +2243,8 @@ function _createMdxContent(props) {
         children: "package.json"
       }), " 文件中手动的将需要安装的包和对应的", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://docs.npmjs.com/about-semantic-versioning",
+        target: "_blank",
+        rel: "nofollow",
         children: "语义化版本"
       }), "写在 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "\"devDependencies\""
@@ -2487,13 +2503,13 @@ function _createMdxContent(props) {
         className: "modern-directive-title",
         children: "TIP"
       }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.div, {
-        className: "island-directive-content",
+        className: "modern-directive-content",
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-          children: ["一般来说，需要在源代码中使用到的包都属于 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+          children: ["\n一般来说，需要在源代码中使用到的包都属于 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "dependencies"
           }), " 依赖。除非你通过打包的方式将依赖的代码输出到本地，那么这种情况可以将它作为 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "devDependencies"
-          }), " 依赖。"]
+          }), "依赖。"]
         })
       })]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h2, {
@@ -2552,6 +2568,8 @@ function _createMdxContent(props) {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
         children: ["想要了解关于 webpack 如何做这件事，可以查看这个", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
           href: "https://webpack.js.org/configuration/resolve/#resolvemainfields",
+          target: "_blank",
+          rel: "nofollow",
           children: "链接"
         }), "。"]
       }), "\n"]
@@ -2580,6 +2598,8 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["名称匹配的", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://docs.npmjs.com/cli/v9/using-npm/scripts#pre--post-scripts",
+        target: "_blank",
+        rel: "nofollow",
         children: "前置命令和后置命令"
       }), "也会被运行（例如 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "premyscript"
@@ -2925,6 +2945,8 @@ function _createMdxContent(props) {
         children: "node-gyp rebuild"
       }), " 作为默认的 install 命令，使用 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://github.com/nodejs/node-gyp",
+        target: "_blank",
+        rel: "nofollow",
         children: "node-gyp"
       }), " 进行编译。"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h4, {
@@ -2968,6 +2990,8 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["当以 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://docs.npmjs.com/cli/v7/commands/npm-publish#dry-run",
+        target: "_blank",
+        rel: "nofollow",
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "--dry-run"
         })
@@ -2992,11 +3016,15 @@ function _createMdxContent(props) {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
           href: "https://docs.npmjs.com/cli/v9/configuring-npm/package-json#peerdependencies",
+          target: "_blank",
+          rel: "nofollow",
           children: "npm 对 peerDependencies 的解释"
         })
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
           href: "https://pnpm.io/feature-comparison",
+          target: "_blank",
+          rel: "nofollow",
           children: "pnpm vs npm VS Yarn"
         })
       }), "\n"]
@@ -3017,6 +3045,8 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["推荐使用 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://pnpm.io/installation",
+        target: "_blank",
+        rel: "nofollow",
         children: "pnpm"
       }), " 来管理项目依赖，可以通过下面的方式安装它："]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.Code, {
@@ -3053,13 +3083,15 @@ function _createMdxContent(props) {
         children: "#"
       }), "Module Tools 配置文件"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-      children: ["初始化的模块工程项目目录下提供了 Module Tools 的配置文件 —— ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+      children: ["通过", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+        children: "@modern-js/create"
+      }), "创建的模块工程项目目录下提供了 Module Tools 的配置文件 —— ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "modern.config.(j|t)s"
-      }), "。默认情况下，不需要做任何配置，因此 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+      }), "。但 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "modern.config"
       }), " 配置文件不是必须存在的。"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "初始化的配置文件的内容如下："
+      children: "默认情况下，生成的配置文件的内容如下："
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.Code, {
       codeConfig: chCodeConfig,
       northPanel: {
@@ -3095,6 +3127,27 @@ function _createMdxContent(props) {
                   "color": "#D8DEE9FF"
                 }
               }
+            }, {
+              "content": "moduleTools",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9"
+                }
+              }
+            }, {
+              "content": ",",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": " ",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
             }, {
               "content": "{",
               "props": {
@@ -3226,7 +3279,125 @@ function _createMdxContent(props) {
                 }
               }
             }, {
-              "content": "{}",
+              "content": "{",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }]
+          }, {
+            "tokens": [{
+              "content": "  ",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": "plugins",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9"
+                }
+              }
+            }, {
+              "content": ":",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": " [",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": "moduleTools",
+              "props": {
+                "style": {
+                  "color": "#88C0D0"
+                }
+              }
+            }, {
+              "content": "()]",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": ",",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }]
+          }, {
+            "tokens": [{
+              "content": "  ",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": "buildPreset",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9"
+                }
+              }
+            }, {
+              "content": ":",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": " ",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": "'",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": "npm-library",
+              "props": {
+                "style": {
+                  "color": "#A3BE8C"
+                }
+              }
+            }, {
+              "content": "'",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": ",",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }]
+          }, {
+            "tokens": [{
+              "content": "}",
               "props": {
                 "style": {
                   "color": "#ECEFF4"
@@ -3274,7 +3445,7 @@ function _createMdxContent(props) {
             }]
           }, {
             "tokens": [{
-              "content": "const",
+              "content": "import",
               "props": {
                 "style": {
                   "color": "#81A1C1"
@@ -3288,10 +3459,10 @@ function _createMdxContent(props) {
                 }
               }
             }, {
-              "content": "{",
+              "content": "moduleTools",
               "props": {
                 "style": {
-                  "color": "#ECEFF4"
+                  "color": "#8FBCBB"
                 }
               }
             }, {
@@ -3302,10 +3473,10 @@ function _createMdxContent(props) {
                 }
               }
             }, {
-              "content": "defineConfig",
+              "content": "from",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#81A1C1"
                 }
               }
             }, {
@@ -3316,21 +3487,39 @@ function _createMdxContent(props) {
                 }
               }
             }, {
-              "content": "}",
+              "content": "'",
               "props": {
                 "style": {
                   "color": "#ECEFF4"
                 }
               }
             }, {
-              "content": " ",
+              "content": "@modern-js/module-tools",
               "props": {
                 "style": {
-                  "color": "#D8DEE9FF"
+                  "color": "#A3BE8C"
+                }
+              }
+            }, {
+              "content": "'",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
                 }
               }
             }, {
-              "content": "=",
+              "content": ";",
+              "props": {
+                "style": {
+                  "color": "#81A1C1"
+                }
+              }
+            }]
+          }, {
+            "tokens": []
+          }, {
+            "tokens": [{
+              "content": "export",
               "props": {
                 "style": {
                   "color": "#81A1C1"
@@ -3344,91 +3533,98 @@ function _createMdxContent(props) {
                 }
               }
             }, {
-              "content": "require",
+              "content": "default",
               "props": {
                 "style": {
-                  "color": "#88C0D0"
+                  "color": "#81A1C1"
                 }
               }
             }, {
-              "content": "(",
+              "content": " ",
               "props": {
                 "style": {
                   "color": "#D8DEE9FF"
                 }
               }
             }, {
-              "content": "'",
+              "content": "{",
               "props": {
                 "style": {
                   "color": "#ECEFF4"
                 }
               }
+            }]
+          }, {
+            "tokens": [{
+              "content": "  ",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
             }, {
-              "content": "@modern-js/module-tools",
+              "content": "plugins",
               "props": {
                 "style": {
-                  "color": "#A3BE8C"
+                  "color": "#88C0D0"
                 }
               }
             }, {
-              "content": "'",
+              "content": ":",
               "props": {
                 "style": {
                   "color": "#ECEFF4"
                 }
               }
             }, {
-              "content": ")",
+              "content": " [",
               "props": {
                 "style": {
                   "color": "#D8DEE9FF"
                 }
               }
             }, {
-              "content": ";",
+              "content": "moduleTools",
               "props": {
                 "style": {
-                  "color": "#81A1C1"
+                  "color": "#88C0D0"
                 }
               }
-            }]
-          }, {
-            "tokens": []
-          }, {
-            "tokens": [{
-              "content": "module",
+            }, {
+              "content": "()]",
               "props": {
                 "style": {
-                  "color": "#8FBCBB"
+                  "color": "#D8DEE9FF"
                 }
               }
             }, {
-              "content": ".",
+              "content": ",",
               "props": {
                 "style": {
                   "color": "#ECEFF4"
                 }
               }
-            }, {
-              "content": "exports",
+            }]
+          }, {
+            "tokens": [{
+              "content": "  ",
               "props": {
                 "style": {
-                  "color": "#8FBCBB"
+                  "color": "#D8DEE9FF"
                 }
               }
             }, {
-              "content": " ",
+              "content": "buildPreset",
               "props": {
                 "style": {
-                  "color": "#D8DEE9FF"
+                  "color": "#88C0D0"
                 }
               }
             }, {
-              "content": "=",
+              "content": ":",
               "props": {
                 "style": {
-                  "color": "#81A1C1"
+                  "color": "#ECEFF4"
                 }
               }
             }, {
@@ -3439,31 +3635,40 @@ function _createMdxContent(props) {
                 }
               }
             }, {
-              "content": "defineConfig",
+              "content": "'",
               "props": {
                 "style": {
-                  "color": "#88C0D0"
+                  "color": "#ECEFF4"
                 }
               }
             }, {
-              "content": "(",
+              "content": "npm-library",
               "props": {
                 "style": {
-                  "color": "#D8DEE9FF"
+                  "color": "#A3BE8C"
                 }
               }
             }, {
-              "content": "{}",
+              "content": "'",
               "props": {
                 "style": {
                   "color": "#ECEFF4"
                 }
               }
             }, {
-              "content": ")",
+              "content": ",",
               "props": {
                 "style": {
-                  "color": "#D8DEE9FF"
+                  "color": "#ECEFF4"
+                }
+              }
+            }]
+          }, {
+            "tokens": [{
+              "content": "}",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
                 }
               }
             }, {
@@ -3576,24 +3781,10 @@ function _createMdxContent(props) {
             }]
           }, {
             "tokens": [{
-              "content": "module",
-              "props": {
-                "style": {
-                  "color": "#8FBCBB"
-                }
-              }
-            }, {
-              "content": ".",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": "exports",
+              "content": "export",
               "props": {
                 "style": {
-                  "color": "#8FBCBB"
+                  "color": "#81A1C1"
                 }
               }
             }, {
@@ -3604,7 +3795,7 @@ function _createMdxContent(props) {
                 }
               }
             }, {
-              "content": "=",
+              "content": "default",
               "props": {
                 "style": {
                   "color": "#81A1C1"
@@ -3640,23 +3831,19 @@ function _createMdxContent(props) {
     })]
   });
 }
-function MDXContent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _ref = props.components || {},
-    MDXLayout = _ref.wrapper;
+function MDXContent(props = {}) {
+  const {wrapper: MDXLayout} = props.components || ({});
   return MDXLayout ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(MDXLayout, Object.assign({}, props, {
     children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_createMdxContent, props)
   })) : _createMdxContent(props);
 }
-_c = MDXContent;
 /* harmony default export */ __webpack_exports__["default"] = (MDXContent);
 function _missingMdxReference(id, component, place) {
-  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it." + (place ? "\nIt’s referenced in your code at `" + place + "` in `/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/basic/before-getting-started.md`" : ""));
+  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it." + (place ? "\nIt’s referenced in your code at `" + place + "` in `/Users/targeral/github/targeral-modern-js/website/module-tools/docs/zh/guide/basic/before-getting-started.md`" : ""));
 }
-var _c;
-__webpack_require__.$Refresh$.register(_c, "MDXContent");
+
 
 /***/ })
 
 }]);
-//# sourceMappingURL=guide_basic_before-getting-started.js.map
+//# sourceMappingURL=zh_guide_basic_before-getting-started.js.map