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

package/doc_build/static/js/async/en_guide_basic_before-getting-started.js

@@ -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/en/guide/basic/before-getting-started.md"
+  "filepath": "/Users/targeral/github/targeral-modern-js/website/module-tools/docs/en/guide/basic/before-getting-started.md"
 };
-var frontmatter = {
+const frontmatter = {
   "sidebar_position": 1
 };
-var toc = [{
+const toc = [{
   "id": "environment-preparation",
   "text": "Environment preparation",
   "depth": 2
@@ -1239,10 +1239,10 @@ var toc = [{
   "text": "Module Tools configuration file",
   "depth": 2
 }];
-var title = "Before you start";
-var content = "\"---\\nsidebar_position: 1\\n---\\n\\n# Before you start\\n\\n## Environment preparation\\n\\nIn order to use the Modern.js module engineering solution, you first need [NodeJS](https://nodejs.org/zh/) engine, we recommend the latest [LTS version](https://github.com/nodejs/Release), and make sure the Node version is **>=14.17.6**. because non-stable NodeJS releases frequently have bugs. You might consider installing via [nvm-windows](https://github.com/coreybutler/nvm-windows) and [nvm](https://github.com/nvm-sh/nvm) (Mac/linux), so you can easily switch to different NodeJS versions that might be required for different projects that you work on.\\n\\n## Getting Started with npm\\n\\nOnce NodeJS is installed, not only can you access the `node` executable from the command line, but you can also execute the `npm` command.\\n\\nNpm is the standard package manager for NodeJS. It started out as a tool for downloading and managing NodeJS package dependencies, but it has since evolved into a tool for front-end JavaScript.\\n\\n**If you already know something about usage of npm and npm packages, then you can directly see [npm package manager](/en/guide/basic/before-getting-started#npm-package-manager) section.**\\n\\n## npm package type project\\n\\nSo what is an npm package type project? When we execute the `npm init` command in an empty project directory, it creates a JSON file with the file name `package.json` under the current directory. During the creation process, we will need to fill in information including but not limited to the _name_, _version_ _number_, _description_, etc. of the npm package, which will be found in the resulting `package.json` file as follows\\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\\nAt this point the project containing the initialized `package.json` file is an npm package type project, and you can execute the `npm publish` command to publish the project to the [npm Registry](https://www.npmjs.com/).\\n\\nThe npm Registry is a [npm package store](https://docs.npmjs.com/about-the-public-npm-registry) where developers can not only publish their own npm packages to the npm Registry, but also use npm packages published by other developers through the npm Registry.\\n\\nA quality npm package will be used by more people because it not only saves a lot of code implementation work, but is also less likely to cause problems with the project.\\n\\n## Using third-party npm packages\\n\\nWhen adding a third-party npm package to an initial project, we can call this process \\\"installing dependencies for the project\\\" or \\\"adding dependencies to the project\\\". Before adding dependencies, we need to know one thing in particular -- **the types of packages npm depends on**.\\n\\n- `\\\"dependencies\\\"`: a type of package that your application will need in a production environment.\\n- `\\\"devDependencies\\\"`: another type of package that is only needed for local development and testing.\\n  > packages can be understood as third-party npm packages.\\n\\nYou can install the packages you need in a **production environment** by running `npm install npm-package-name` or `npm add npm-package-name`, or you can manually write the packages you need to install and the corresponding [semantic version](https://docs.npmjs.com/about-semantic-versioning) in `\\\"dependencies\\\"` in the `package.json` file, and run the `npm install` command to.\\n\\n```json\\n{\\n  \\\"name\\\": \\\"your-npm-project\\\",\\n  \\\"dependencies\\\": {\\n    \\\"npm-package-name\\\": \\\"0.1.0\\\"\\n  }\\n}\\n```\\n\\nSimilarly, you can install **only packages needed for local development and testing** by running `npm install npm-package-name --save-dev` or `npm add npm-package-name --save-dev`, or you can manually write the packages to be installed and the corresponding [semantic version](https://docs.npmjs.com/about-semantic-versioning) in `\\\"devDependencies\\\"` in the `package.json` file, and run the `npm install` command as follows\\n\\n```json\\n{\\n  \\\"name\\\": \\\"your-npm-project\\\",\\n  \\\"devDependencies\\\": {\\n    \\\"npm-package-name\\\": \\\"0.1.0\\\"\\n  }\\n}\\n```\\n\\n**When installing or using third-party npm packages be sure to determine what they are for and whether they should be placed in `\\\"dependencies\\\"` or `\\\"devDependencies\\\"` by distinguishing between their types.**\\n:::tip\\nIn general, packages that need to be used in source code are `dependencies` dependencies. Unless you are exporting dependent code locally via packaging, in which case it can be treated as a `devDependencies` dependency.\\n:::\\n\\n## Other npm bits and pieces to know\\n\\n### Program entry for npm packages\\n\\nThere is a `\\\"main\\\"` attribute in `package.json` that corresponds to a module ID or, more intuitively, a NodeJS file path, which is the main entry point for your application.\\n\\nFor example, if your package is named `foo` and the user installs it, and then executes the `require(\\\"foo\\\")` code, then the file corresponding to the `\\\"main\\\"` field of the npm package `foo` will be exported.\\n\\n**It is recommended to set the `\\\"main\\\"` field in your npm package**. If `\\\"main\\\"` is not set, the default entry will be the `index.js` file in the root of the package.\\n\\nIn addition to the `\\\"main\\\"` attribute, the `\\\"module\\\"` attribute is usually set. It is similar to the `\\\"main\\\"` attribute in that it is mainly used in webpack scenarios. webpack reads the npm package entry (file) in most cases in the order **\\\"module\\\" -> \\\"main \\\"**.\\n\\n> To learn more about how webpack does this, check out this [link](https://webpack.js.org/configuration/resolve/#resolvemainfields).\\n\\n### `\\\"scripts\\\"`\\n\\nThe `\\\"scripts\\\"` attribute of the `package.json` file supports a number of built-in scripts and npm-preset lifecycle events, as well as arbitrary scripts.\\n\\nThese can be executed by running `npm run-script <stage>` or simply `npm run <stage>`.\\n\\nName matching [pre and post commands](https://docs.npmjs.com/cli/v9/using-npm/scripts#pre--post-scripts) will also be run (e.g. `premyscript`, `myscript`, `postmyscript` ).\\n\\n```json\\n{\\n  \\\"scripts\\\": {\\n    \\\"premyscript\\\": \\\"\\\",\\n    \\\"myscript\\\": \\\"\\\",\\n    \\\"postmyscript\\\": \\\"\\\"\\n  }\\n}\\n```\\n\\nWhen `npm run myscripts` is executed, the script corresponding to `premyscripts` will be executed before it, and the script corresponding to `postmyscripts` will be executed after it.\\n\\nScript commands from dependencies can be run with `npm explore <pkg> -- npm run <stage>`.\\n\\nThere are also special lifecycle scripts that occur only under certain circumstances. Here are a few that are usually necessary to know.\\n\\n#### `npm install`\\n\\nWhen you run `npm install -g <pkg-name>`, the following scripts will run.\\n\\n- `preinstall`\\n- `install`\\n- `postinstall`\\n- `prepublish`\\n- `preprepare`\\n- `prepare`\\n- `postprepare`\\n\\nIf your package root has a `binding.gyp` file and you don't define an `install` or `preinstall` script, then npm will build with `node-gyp rebuild` as the default install command, using [node-gyp](https://github.com/nodejs/node-gyp).\\n\\n#### `npm publish`\\n\\nWhen publishing a project, executing this command will trigger the following script.\\n\\n- `prepublishOnly`\\n- `prepack`\\n- `prepare`\\n- `postpack`\\n- `publish`\\n- `postpublish`\\n\\nWhen running in [`-dry-run`](https://docs.npmjs.com/cli/v7/commands/npm-publish#dry-run) mode, the script corresponding to `prepare` will not be executed.\\n\\n### peerDependencies\\n\\nIn some cases, your npm project has a compatibility relationship with its host tool or library (e.g. a webpack plugin project and webpack), and your npm project does not want to use the host as a necessary dependency, which usually means that your project is probably a plugin for that host tool or library. Your npm project will have certain requirements for the version of the host package, as only the APIs required by the npm project will be exposed under a specific version.\\n\\nFor more explanation of `peerDependencies`, you can learn about the different ways npm, pnpm, and Yarn handle it at the following links.\\n\\n- [npm's explanation of 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 package manager\\n\\nIn addition to the standard package manager like npm, the mainstream ones are **pnpm** and **Yarn**, both of which are good alternatives to npm cli.\\n\\nIt is recommended to use [pnpm](https://pnpm.io/installation) to manage project dependencies, which can be installed as follows.\\n\\n```bash\\nnpm install -g pnpm\\n```\\n\\n## Module Tools configuration file\\n\\nA configuration file for Module Tools is provided in the initial module project directory -- `modern.config.(j|t)s`. By default, no configuration is required, so the `modern.config` configuration file is not required to exist.\\n\\nThe contents of the initial configuration file are as follows.\\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**We recommend using the `defineConfig` function**, but it is not mandatory to use it. So you can also return an object directly in the configuration file: the:\\n\\n```typescript\\n// modern.config.ts\\nexport default {};\\n```\\n\\n```js\\n// modern.config.js\\nmodule.exports = {};\\n```\\n\"";
+const title = `Before you start`;
+const content = "\"---\\nsidebar_position: 1\\n---\\n\\n# Before you start\\n\\n## Environment preparation\\n\\nIn order to use the Modern.js module engineering solution, you first need [NodeJS](https://nodejs.org/zh/) engine, we recommend the latest [LTS version](https://github.com/nodejs/Release), and make sure the Node version is **>=14.18.0**. because non-stable NodeJS releases frequently have bugs. You might consider installing via [nvm-windows](https://github.com/coreybutler/nvm-windows) and [nvm](https://github.com/nvm-sh/nvm) (Mac/linux), so you can easily switch to different NodeJS versions that might be required for different projects that you work on.\\n\\n## Getting Started with npm\\n\\nOnce NodeJS is installed, not only can you access the `node` executable from the command line, but you can also execute the `npm` command.\\n\\nNpm is the standard package manager for NodeJS. It started out as a tool for downloading and managing NodeJS package dependencies, but it has since evolved into a tool for front-end JavaScript.\\n\\n**If you already know something about usage of npm and npm packages, then you can directly see [npm package manager](/en/guide/basic/before-getting-started#npm-package-manager) section.**\\n\\n## npm package type project\\n\\nSo what is an npm package type project? When we execute the `npm init` command in an empty project directory, it creates a JSON file with the file name `package.json` under the current directory. During the creation process, we will need to fill in information including but not limited to the _name_, _version_ _number_, _description_, etc. of the npm package, which will be found in the resulting `package.json` file as follows\\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\\nAt this point the project containing the initialized `package.json` file is an npm package type project, and you can execute the `npm publish` command to publish the project to the [npm Registry](https://www.npmjs.com/).\\n\\nThe npm Registry is a [npm package store](https://docs.npmjs.com/about-the-public-npm-registry) where developers can not only publish their own npm packages to the npm Registry, but also use npm packages published by other developers through the npm Registry.\\n\\nA quality npm package will be used by more people because it not only saves a lot of code implementation work, but is also less likely to cause problems with the project.\\n\\n## Using third-party npm packages\\n\\nWhen adding a third-party npm package to an initial project, we can call this process \\\"installing dependencies for the project\\\" or \\\"adding dependencies to the project\\\". Before adding dependencies, we need to know one thing in particular -- **the types of packages npm depends on**.\\n\\n- `\\\"dependencies\\\"`: a type of package that your application will need in a production environment.\\n- `\\\"devDependencies\\\"`: another type of package that is only needed for local development and testing.\\n  > packages can be understood as third-party npm packages.\\n\\nYou can install the packages you need in a **production environment** by running `npm install npm-package-name` or `npm add npm-package-name`, or you can manually write the packages you need to install and the corresponding [semantic version](https://docs.npmjs.com/about-semantic-versioning) in `\\\"dependencies\\\"` in the `package.json` file, and run the `npm install` command to.\\n\\n```json\\n{\\n  \\\"name\\\": \\\"your-npm-project\\\",\\n  \\\"dependencies\\\": {\\n    \\\"npm-package-name\\\": \\\"0.1.0\\\"\\n  }\\n}\\n```\\n\\nSimilarly, you can install **only packages needed for local development and testing** by running `npm install npm-package-name --save-dev` or `npm add npm-package-name --save-dev`, or you can manually write the packages to be installed and the corresponding [semantic version](https://docs.npmjs.com/about-semantic-versioning) in `\\\"devDependencies\\\"` in the `package.json` file, and run the `npm install` command as follows\\n\\n```json\\n{\\n  \\\"name\\\": \\\"your-npm-project\\\",\\n  \\\"devDependencies\\\": {\\n    \\\"npm-package-name\\\": \\\"0.1.0\\\"\\n  }\\n}\\n```\\n\\n**When installing or using third-party npm packages be sure to determine what they are for and whether they should be placed in `\\\"dependencies\\\"` or `\\\"devDependencies\\\"` by distinguishing between their types.**\\n\\n:::tip\\nIn general, packages that need to be used in source code are `dependencies` dependencies. Unless you are exporting dependent code locally via packaging, in which case it can be treated as a `devDependencies` dependency.\\n:::\\n\\n## Other npm bits and pieces to know\\n\\n### Program entry for npm packages\\n\\nThere is a `\\\"main\\\"` attribute in `package.json` that corresponds to a module ID or, more intuitively, a NodeJS file path, which is the main entry point for your application.\\n\\nFor example, if your package is named `foo` and the user installs it, and then executes the `require(\\\"foo\\\")` code, then the file corresponding to the `\\\"main\\\"` field of the npm package `foo` will be exported.\\n\\n**It is recommended to set the `\\\"main\\\"` field in your npm package**. If `\\\"main\\\"` is not set, the default entry will be the `index.js` file in the root of the package.\\n\\nIn addition to the `\\\"main\\\"` attribute, the `\\\"module\\\"` attribute is usually set. It is similar to the `\\\"main\\\"` attribute in that it is mainly used in webpack scenarios. webpack reads the npm package entry (file) in most cases in the order **\\\"module\\\" -> \\\"main \\\"**.\\n\\n> To learn more about how webpack does this, check out this [link](https://webpack.js.org/configuration/resolve/#resolvemainfields).\\n\\n### `\\\"scripts\\\"`\\n\\nThe `\\\"scripts\\\"` attribute of the `package.json` file supports a number of built-in scripts and npm-preset lifecycle events, as well as arbitrary scripts.\\n\\nThese can be executed by running `npm run-script <stage>` or simply `npm run <stage>`.\\n\\nName matching [pre and post commands](https://docs.npmjs.com/cli/v9/using-npm/scripts#pre--post-scripts) will also be run (e.g. `premyscript`, `myscript`, `postmyscript` ).\\n\\n```json\\n{\\n  \\\"scripts\\\": {\\n    \\\"premyscript\\\": \\\"\\\",\\n    \\\"myscript\\\": \\\"\\\",\\n    \\\"postmyscript\\\": \\\"\\\"\\n  }\\n}\\n```\\n\\nWhen `npm run myscripts` is executed, the script corresponding to `premyscripts` will be executed before it, and the script corresponding to `postmyscripts` will be executed after it.\\n\\nScript commands from dependencies can be run with `npm explore <pkg> -- npm run <stage>`.\\n\\nThere are also special lifecycle scripts that occur only under certain circumstances. Here are a few that are usually necessary to know.\\n\\n#### `npm install`\\n\\nWhen you run `npm install -g <pkg-name>`, the following scripts will run.\\n\\n- `preinstall`\\n- `install`\\n- `postinstall`\\n- `prepublish`\\n- `preprepare`\\n- `prepare`\\n- `postprepare`\\n\\nIf your package root has a `binding.gyp` file and you don't define an `install` or `preinstall` script, then npm will build with `node-gyp rebuild` as the default install command, using [node-gyp](https://github.com/nodejs/node-gyp).\\n\\n#### `npm publish`\\n\\nWhen publishing a project, executing this command will trigger the following script.\\n\\n- `prepublishOnly`\\n- `prepack`\\n- `prepare`\\n- `postpack`\\n- `publish`\\n- `postpublish`\\n\\nWhen running in [`-dry-run`](https://docs.npmjs.com/cli/v7/commands/npm-publish#dry-run) mode, the script corresponding to `prepare` will not be executed.\\n\\n### peerDependencies\\n\\nIn some cases, your npm project has a compatibility relationship with its host tool or library (e.g. a webpack plugin project and webpack), and your npm project does not want to use the host as a necessary dependency, which usually means that your project is probably a plugin for that host tool or library. Your npm project will have certain requirements for the version of the host package, as only the APIs required by the npm project will be exposed under a specific version.\\n\\nFor more explanation of `peerDependencies`, you can learn about the different ways npm, pnpm, and Yarn handle it at the following links.\\n\\n- [npm's explanation of 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 package manager\\n\\nIn addition to the standard package manager like npm, the mainstream ones are **pnpm** and **Yarn**, both of which are good alternatives to npm cli.\\n\\nIt is recommended to use [pnpm](https://pnpm.io/installation) to manage project dependencies, which can be installed as follows.\\n\\n```bash\\nnpm install -g pnpm\\n```\\n\\n## Module Tools configuration file\\n\\nThe Module Tools configuration file - `modern.config.(j|t)s` - is provided in the project directory of the module project created with `@modern-js/create`. However, the `modern.config` configuration file is not required to exist.\\n\\nBy default, the contents of the generated configuration file are as follows.\\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**We recommend using the `defineConfig` function**, but it is not mandatory to use it. So you can also return an object directly in the config file: the\\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",
@@ -1279,17 +1279,25 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["In order to use the Modern.js module engineering solution, you first need ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://nodejs.org/zh/",
+        target: "_blank",
+        rel: "nofollow",
         children: "NodeJS"
       }), " engine, we recommend the latest ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://github.com/nodejs/Release",
+        target: "_blank",
+        rel: "nofollow",
         children: "LTS version"
       }), ", and make sure the Node version is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
-        children: ">=14.17.6"
+        children: ">=14.18.0"
       }), ". because non-stable NodeJS releases frequently have bugs. You might consider installing via ", (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"
       }), " and ", (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), so you can easily switch to different NodeJS versions that might be required for different projects that you work on."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h2, {
@@ -1311,7 +1319,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: ["If you already know something about usage of npm and npm packages, then you can directly see ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/guide/basic/before-getting-started#npm-package-manager.html",
+          href: "/module-tools/en/guide/basic/before-getting-started.html#npm-package-manager",
           children: "npm package manager"
         }), " section."]
       })
@@ -1937,11 +1945,15 @@ function _createMdxContent(props) {
         children: "npm publish"
       }), " command to publish the project to the ", (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: ["The npm Registry is a ", (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 package store"
       }), " where developers can not only publish their own npm packages to the npm Registry, but also use npm packages published by other developers through the npm Registry."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
@@ -1981,6 +1993,8 @@ function _createMdxContent(props) {
         children: "npm add npm-package-name"
       }), ", or you can manually write the packages you need to install and the corresponding ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://docs.npmjs.com/about-semantic-versioning",
+        target: "_blank",
+        rel: "nofollow",
         children: "semantic version"
       }), " in ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "\"dependencies\""
@@ -2236,6 +2250,8 @@ function _createMdxContent(props) {
         children: "npm add npm-package-name --save-dev"
       }), ", or you can manually write the packages to be installed and the corresponding ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://docs.npmjs.com/about-semantic-versioning",
+        target: "_blank",
+        rel: "nofollow",
         children: "semantic version"
       }), " in ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "\"devDependencies\""
@@ -2496,13 +2512,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: ["In general, packages that need to be used in source code are ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+          children: ["\nIn general, packages that need to be used in source code are ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "dependencies"
           }), " dependencies. Unless you are exporting dependent code locally via packaging, in which case it can be treated as a ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "devDependencies"
-          }), " dependency."]
+          }), "dependency."]
         })
       })]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h2, {
@@ -2560,7 +2576,9 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.blockquote, {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
         children: ["To learn more about how webpack does this, check out this ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "https://webpack.js.org/configuration/resolve/#resolvemainfields",
+          href: "https://webpack.js.org/configuration/resolve/#resolvemainfields-1",
+          target: "_blank",
+          rel: "nofollow",
           children: "link"
         }), "."]
       }), "\n"]
@@ -2588,7 +2606,9 @@ function _createMdxContent(props) {
       }), "."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["Name matching ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        href: "https://docs.npmjs.com/cli/v9/using-npm/scripts#pre--post-scripts",
+        href: "https://docs.npmjs.com/cli/v9/using-npm/scripts#pre--post-scripts-1",
+        target: "_blank",
+        rel: "nofollow",
         children: "pre and post commands"
       }), " will also be run (e.g. ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "premyscript"
@@ -2934,6 +2954,8 @@ function _createMdxContent(props) {
         children: "node-gyp rebuild"
       }), " as the default install command, using ", (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, {
@@ -2976,7 +2998,9 @@ function _createMdxContent(props) {
       }), "\n"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["When running in ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        href: "https://docs.npmjs.com/cli/v7/commands/npm-publish#dry-run",
+        href: "https://docs.npmjs.com/cli/v7/commands/npm-publish#dry-run-1",
+        target: "_blank",
+        rel: "nofollow",
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "-dry-run"
         })
@@ -3000,12 +3024,16 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
       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",
+          href: "https://docs.npmjs.com/cli/v9/configuring-npm/package-json#peerdependencies-2",
+          target: "_blank",
+          rel: "nofollow",
           children: "npm's explanation of 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"]
@@ -3026,6 +3054,8 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["It is recommended to use ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://pnpm.io/installation",
+        target: "_blank",
+        rel: "nofollow",
         children: "pnpm"
       }), " to manage project dependencies, which can be installed as follows."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.Code, {
@@ -3062,13 +3092,15 @@ function _createMdxContent(props) {
         children: "#"
       }), "Module Tools configuration file"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-      children: ["A configuration file for Module Tools is provided in the initial module project directory -- ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+      children: ["The Module Tools configuration file - ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "modern.config.(j|t)s"
-      }), ". By default, no configuration is required, so the ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+      }), " - is provided in the project directory of the module project created with ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+        children: "@modern-js/create"
+      }), ". However, the ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "modern.config"
       }), " configuration file is not required to exist."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "The contents of the initial configuration file are as follows."
+      children: "By default, the contents of the generated configuration file are as follows."
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.Code, {
       codeConfig: chCodeConfig,
       northPanel: {
@@ -3104,6 +3136,27 @@ function _createMdxContent(props) {
                   "color": "#D8DEE9FF"
                 }
               }
+            }, {
+              "content": "moduleTools",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9"
+                }
+              }
+            }, {
+              "content": ",",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": " ",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
             }, {
               "content": "{",
               "props": {
@@ -3235,7 +3288,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"
@@ -3283,7 +3454,7 @@ function _createMdxContent(props) {
             }]
           }, {
             "tokens": [{
-              "content": "const",
+              "content": "import",
               "props": {
                 "style": {
                   "color": "#81A1C1"
@@ -3297,10 +3468,10 @@ function _createMdxContent(props) {
                 }
               }
             }, {
-              "content": "{",
+              "content": "moduleTools",
               "props": {
                 "style": {
-                  "color": "#ECEFF4"
+                  "color": "#8FBCBB"
                 }
               }
             }, {
@@ -3311,10 +3482,10 @@ function _createMdxContent(props) {
                 }
               }
             }, {
-              "content": "defineConfig",
+              "content": "from",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#81A1C1"
                 }
               }
             }, {
@@ -3325,21 +3496,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"
@@ -3353,91 +3542,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"
                 }
               }
             }, {
@@ -3448,31 +3644,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"
                 }
               }
             }, {
@@ -3493,7 +3698,7 @@ function _createMdxContent(props) {
         children: ["We recommend using the ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "defineConfig"
         }), " function"]
-      }), ", but it is not mandatory to use it. So you can also return an object directly in the configuration file: the:"]
+      }), ", but it is not mandatory to use it. So you can also return an object directly in the config file: the"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.Code, {
       codeConfig: chCodeConfig,
       northPanel: {
@@ -3585,24 +3790,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"
                 }
               }
             }, {
@@ -3613,7 +3804,7 @@ function _createMdxContent(props) {
                 }
               }
             }, {
-              "content": "=",
+              "content": "default",
               "props": {
                 "style": {
                   "color": "#81A1C1"
@@ -3649,21 +3840,17 @@ 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/en/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/en/guide/basic/before-getting-started.md`" : ""));
 }
-var _c;
-__webpack_require__.$Refresh$.register(_c, "MDXContent");
+
 
 /***/ })