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

package/doc_build/static/js/async/en_guide_advance_external-dependency.js

@@ -18,13 +18,13 @@ __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,
   Spotlight: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.Spotlight,
   CodeSlot: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.CodeSlot
 };
-var chCodeConfig = {
+const chCodeConfig = {
   "staticMediaQuery": "not screen, (max-width: 768px)",
   "theme": {
     "name": "nord",
@@ -1187,12 +1187,12 @@ var chCodeConfig = {
   "autoImport": true,
   "showCopyButton": true,
   "skipLanguages": [],
-  "filepath": "/Users/bytedance/modern.js/website/module-tools/docs/en/guide/advance/external-dependency.mdx"
+  "filepath": "/Users/targeral/github/targeral-modern-js/website/module-tools/docs/en/guide/advance/external-dependency.mdx"
 };
-var frontmatter = {
+const frontmatter = {
   "sidebar_position": 4
 };
-var toc = [{
+const toc = [{
   "id": "default-handling-of-third-party-dependencies",
   "text": "Default handling of third-party dependencies",
   "depth": 2
@@ -1209,10 +1209,10 @@ var toc = [{
   "text": "Exclude specified third-party dependencies",
   "depth": 3
 }];
-var title = "How to handle third-party dependencies";
-var content = "\"---\\nsidebar_position: 4\\n---\\n\\n# How to handle third-party dependencies\\n\\nGenerally, third-party dependencies required by a project can be installed via the `install` command in the package manager. After the third-party dependencies are successfully installed, they will generally appear under `dependencies` and `devDependencies` in the project `package.json`.\\n\\n```json pacakge.json\\n{\\n  \\\"dependencies\\\": {},\\n  \\\"devDependencies\\\": {}\\n}\\n```\\n\\nDependencies under `\\\"dependencies\\\"` are generally related to project code and builds, and if these third-party dependencies are declared under `\\\"devDependencies\\\"`, then there will be missing dependencies in production environments.\\n\\nIn addition to `\\\"dependencies\\\"`, [`\\\"peerDependencies\\\"`](/en/guide/basic/before-getting-started#peerdependencies) can also declare dependencies that are needed in the production environment, but it puts more emphasis on the existence of these dependencies declared by `\\\"peerDependencies\\\"` in the project's runtime environment, similar to the plugin mechanism.\\n\\n## Default handling of third-party dependencies\\n\\nBy default, third-party dependencies under `\\\"dependencies\\\"` and `\\\"peerDependencies\\\"` are not packaged in the module project\\\\*\\\\*, so:\\n\\n<CH.Spotlight>\\n\\n```json ./v1/package.json\\n{\\n  \\\"dependencies\\\": {\\n    \\\"react\\\": \\\"^17\\\"\\n  },\\n  // or\\n  \\\"peerDependencies\\\": {\\n    \\\"react\\\": \\\"^17\\\"\\n  }\\n}\\n```\\n\\n---\\n\\nIf the project has a dependency on `react`.\\n\\n```json ./v1/package.json\\n{\\n  \\\"dependencies\\\": {\\n    \\\"react\\\": \\\"^17\\\"\\n  },\\n  // or\\n  \\\"peerDependencies\\\": {\\n    \\\"react\\\": \\\"^17\\\"\\n  }\\n}\\n```\\n\\n---\\n\\nWhen a `react` dependency is used in the source code.\\n\\n```tsx src/index.ts\\nimport React from 'react';\\nconsole.info(React);\\n```\\n\\n---\\n\\nThe `react` code is not packaged into the product at this point.\\n\\n```js dist/index.js\\nimport React from 'react';\\nconsole.info(React);\\n```\\n\\n</CH.Spotlight>\\n\\n## Packaging third-party dependencies\\n\\nHowever there are cases where you want to package these third-party dependencies into the product. The benefits of packaging third-party dependencies into the product are: **Reducing the time spent downloading third-party dependencies**.\\n\\nThis way of handling third-party dependencies is generally more common in developing command-line tools, which can improve the loading speed of command-line tools and give users a better experience.\\n\\nSo how do you enable the packaging of third-party dependencies in your module project?\\n\\nThe following APIs are provided in the build configuration to handle third-party dependencies:\\n\\n- [`buildConfig.autoExternal`](/en/api/config/build-config#autoexternal)\\n- [`buildConfig.externals`](/en/api/config/build-config#externals)\\n\\n### Turn off default behavior\\n\\nWhen we want to turn off the default handling behavior for third-party dependencies, we can do so by:\\n\\n```ts\\nexport default defineConfig({\\n  buildConfig: {\\n    autoExternal: false,\\n  },\\n});\\n```\\n\\nThis way the dependencies under `\\\"dependencies\\\"` and `\\\"peerDependencies\\\"` will be packaged. If you want to turn off the processing of only one of these dependencies, you can use the\\n`buildConfig.autoExternal` in the form of an object.\\n\\n```ts\\nexport default defineConfig({\\n  buildConfig: {\\n    autoExternal: {\\n      dependencies: false,\\n      peerDependencies: false,\\n    },\\n  },\\n});\\n```\\n\\n### Exclude specified third-party dependencies\\n\\nAnd in addition to the `buildConfig.autoExternal` API, `buildConfig.externals` can also control which third-party dependencies are to be handled. We can combine these two\\nAPIs to handle the project's dependencies in a more granular way.\\n\\nFor example, when we need to leave only certain dependencies unpacked, we can configure it as follows.\\n\\n> In this case, it is likely that some dependencies are not suitable for packaging. If this is the case, then you can handle it as follows.\\n\\n```ts\\nepxort default defineConfig({\\n  buildConfig: {\\n    autoExternal: false,\\n    externals: ['pkg-1', /pkg-2/],\\n  }\\n});\\n```\\n\"";
+const title = `How to handle third-party dependencies`;
+const content = "\"---\\nsidebar_position: 4\\n---\\n\\n# How to handle third-party dependencies\\n\\nGenerally, third-party dependencies required by a project can be installed via the `install` command in the package manager. After the third-party dependencies are successfully installed, they will generally appear under `dependencies` and `devDependencies` in the project `package.json`.\\n\\n```json pacakge.json\\n{\\n  \\\"dependencies\\\": {},\\n  \\\"devDependencies\\\": {}\\n}\\n```\\n\\nDependencies under `\\\"dependencies\\\"` are generally related to project code and builds, and if these third-party dependencies are declared under `\\\"devDependencies\\\"`, then there will be missing dependencies in production environments.\\n\\nIn addition to `\\\"dependencies\\\"`, [`\\\"peerDependencies\\\"`](/en/guide/basic/before-getting-started#peerdependencies) can also declare dependencies that are needed in the production environment, but it puts more emphasis on the existence of these dependencies declared by `\\\"peerDependencies\\\"` in the project's runtime environment, similar to the plugin mechanism.\\n\\n## Default handling of third-party dependencies\\n\\nBy default, third-party dependencies under `\\\"dependencies\\\"` and `\\\"peerDependencies\\\"` are not packaged in the module project\\\\*\\\\*, so:\\n\\n<CH.Spotlight>\\n\\n```json ./v1/package.json\\n{\\n  \\\"dependencies\\\": {\\n    \\\"react\\\": \\\"^17\\\"\\n  },\\n  // or\\n  \\\"peerDependencies\\\": {\\n    \\\"react\\\": \\\"^17\\\"\\n  }\\n}\\n```\\n\\n---\\n\\nIf the project has a dependency on `react`.\\n\\n```json ./v1/package.json\\n{\\n  \\\"dependencies\\\": {\\n    \\\"react\\\": \\\"^17\\\"\\n  },\\n  // or\\n  \\\"peerDependencies\\\": {\\n    \\\"react\\\": \\\"^17\\\"\\n  }\\n}\\n```\\n\\n---\\n\\nWhen a `react` dependency is used in the source code.\\n\\n```tsx src/index.ts\\nimport React from 'react';\\nconsole.info(React);\\n```\\n\\n---\\n\\nThe `react` code is not packaged into the product at this point.\\n\\n```js dist/index.js\\nimport React from 'react';\\nconsole.info(React);\\n```\\n\\n</CH.Spotlight>\\n\\n## Packaging third-party dependencies\\n\\nHowever there are cases where you want to package these third-party dependencies into the product. The benefits of packaging third-party dependencies into the product are: **Reducing the time spent downloading third-party dependencies**.\\n\\nThis way of handling third-party dependencies is generally more common in developing command-line tools, which can improve the loading speed of command-line tools and give users a better experience.\\n\\nSo how do you enable the packaging of third-party dependencies in your module project?\\n\\nThe following APIs are provided in the build configuration to handle third-party dependencies:\\n\\n- [`buildConfig.autoExternal`](/en/api/config/build-config#autoexternal)\\n- [`buildConfig.externals`](/en/api/config/build-config#externals)\\n\\n### Turn off default behavior\\n\\nWhen we want to turn off the default handling behavior for third-party dependencies, we can do so by:\\n\\n```ts\\nexport default defineConfig({\\n  buildConfig: {\\n    autoExternal: false,\\n  },\\n});\\n```\\n\\nThis way the dependencies under `\\\"dependencies\\\"` and `\\\"peerDependencies\\\"` will be packaged. If you want to turn off the processing of only one of these dependencies, you can use the\\n`buildConfig.autoExternal` in the form of an object.\\n\\n```ts\\nexport default defineConfig({\\n  buildConfig: {\\n    autoExternal: {\\n      dependencies: false,\\n      peerDependencies: false,\\n    },\\n  },\\n});\\n```\\n\\n### Exclude specified third-party dependencies\\n\\nAnd in addition to the `buildConfig.autoExternal` API, `buildConfig.externals` can also control which third-party dependencies are to be handled. We can combine these two\\nAPIs to handle the project's dependencies in a more granular way.\\n\\nFor example, when we need to leave only certain dependencies unpacked, we can configure it as follows.\\n\\n> In this case, it is likely that some dependencies are not suitable for packaging. If this is the case, then you can handle it as follows.\\n\\n```ts\\nepxort default defineConfig({\\n  buildConfig: {\\n    autoExternal: false,\\n    externals: ['pkg-1', /pkg-2/],\\n  }\\n});\\n```\\n\"";
 function _createMdxContent(props) {
-  var _components = Object.assign({
+  const _components = Object.assign({
     h1: "h1",
     a: "a",
     p: "p",
@@ -1393,7 +1393,7 @@ function _createMdxContent(props) {
       children: ["In addition to ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "\"dependencies\""
       }), ", ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        href: "/en/guide/basic/before-getting-started#peerdependencies.html",
+        href: "/en/guide/basic/before-getting-started.html#peerdependencies-2",
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "\"peerDependencies\""
         })
@@ -2976,14 +2976,14 @@ 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: "/en/api/config/build-config#autoexternal.html",
+          href: "/en/api/config/build-config.html#autoexternal-4",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.autoExternal"
           })
         })
       }), "\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: "/en/api/config/build-config#externals.html",
+          href: "/en/api/config/build-config.html#externals-5",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.externals"
           })
@@ -3788,21 +3788,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/advance/external-dependency.mdx`" : ""));
+  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/advance/external-dependency.mdx`" : ""));
 }
-var _c;
-__webpack_require__.$Refresh$.register(_c, "MDXContent");
+
 
 /***/ })