@modern-js/module-tools-docs 2.59.0 → 2.60.1

package/doc_build/static/js/async/2206.f6b802b2.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["2206"],{5195:function(e,n,s){s.r(n),s.d(n,{default:function(){return c}});var i=s(8093),d=s(5878);function r(e){let n=Object.assign({h1:"h1",a:"a",p:"p",code:"code",ul:"ul",li:"li",div:"div",h2:"h2",pre:"pre",blockquote:"blockquote",strong:"strong",ol:"ol",h3:"h3"},(0,d.ah)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.h1,{id:"buildconfig",children:["buildConfig",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#buildconfig",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"buildConfig"})," 是一个用来描述如何编译、生成构建产物的配置项，它包含了构建的所有配置。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型：",(0,i.jsx)(n.code,{children:"object | object[]"})]}),"\n"]}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive tip",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"TIP"}),(0,i.jsxs)(n.div,{className:"rspress-directive-content",children:[(0,i.jsxs)(n.p,{children:["在开始使用 ",(0,i.jsx)(n.code,{children:"buildConfig"})," 之前，请先阅读以下文档来了解其作用："]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"/guide/basic/modify-output-product.html",children:"修改输出产物"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"/guide/advance/in-depth-about-build.html",children:"深入理解构建"})}),"\n"]}),"\n"]})]}),"\n",(0,i.jsxs)(n.h2,{id:"alias",children:["alias",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#alias",children:"#"})]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型：",(0,i.jsx)(n.code,{children:"Record<string, string> | Function"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值：",(0,i.jsx)(n.code,{children:"{'@': 'src',}"})]}),"\n"]}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive tip",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"TIP"}),(0,i.jsx)(n.div,{className:"rspress-directive-content",children:(0,i.jsxs)(n.p,{children:["对于 TypeScript 项目，只需要在 ",(0,i.jsx)(n.code,{children:"tsconfig.json"})," 中配置 ",(0,i.jsx)(n.a,{href:"https://www.typescriptlang.org/tsconfig#paths",target:"_blank",rel:"noopener noreferrer",children:"compilerOptions.paths"}),", Modern.js Module 会自动识别 ",(0,i.jsx)(n.code,{children:"tsconfig.json"})," 里的别名，因此不需要额外配置 ",(0,i.jsx)(n.code,{children:"alias"})," 字段。\n"]})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    alias: {\n      '@common': './src/common',\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["以上配置完成后，如果在代码中引用 ",(0,i.jsx)(n.code,{children:"@common/Foo.tsx"}),", 则会映射到 ",(0,i.jsx)(n.code,{children:"<project>/src/common/Foo.tsx"})," 路径上。"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"alias"})," 的值定义为函数时，可以接受预设的 alias 对象，并对其进行修改。"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    alias: alias => {\n      alias['@common'] = './src/common';\n    },\n  },\n});\n"})}),"\n",(0,i.jsx)(n.p,{children:"也可以在函数中返回一个新对象作为最终结果，新对象会覆盖预设的 alias 对象。"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    alias: alias => {\n      return {\n        '@common': './src/common',\n      };\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"asset",children:["asset",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#asset",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"包含静态资源相关的配置。"}),"\n",(0,i.jsxs)(n.h2,{id:"assetname",children:["asset.name",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#assetname",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"静态资源输出文件名。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"string | ((assetPath) => name)"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"[name].[hash].[ext]"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"当 asset.name 为 string 类型时，会自动对 [name]、[ext]、[hash] 进行替换，分别替换为文件名、拓展名、文件 hash。\n如果想要更高的自由度，可以把 asset.name 作为方法使用，返回值即为文件名。此时，该方法接收一个参数 assetPath，对应资源路径。"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    asset: {\n      // no hash\n      name: [name].[ext],\n      // any logic\n      // name: (assetPath) => 'any.png',\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"assetlimit",children:["asset.limit",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#assetlimit",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"用于设置静态资源被自动内联为 base64 的体积阈值。"}),"\n",(0,i.jsx)(n.p,{children:"Modern.js Module 在进行打包时，默认会内联体积小于 10KB 的图片、字体、媒体等资源，将它们通过 Base64 编码，并内联到产物中，不再会发送独立的 HTTP 请求。"}),"\n",(0,i.jsxs)(n.p,{children:["你可以通过修改 ",(0,i.jsx)(n.code,{children:"limit"})," 参数来调整这个阈值。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"number"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"10 * 1024"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["例如，将 ",(0,i.jsx)(n.code,{children:"limit"})," 设置为 ",(0,i.jsx)(n.code,{children:"0"})," 来避免资源内联："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    asset: {\n      limit: 0,\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"assetpath",children:["asset.path",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#assetpath",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["静态资源输出路径，会基于 ",(0,i.jsx)(n.a,{href:"/api/config/build-config#outdir",children:"outDir"})," 进行输出。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"assets"})]}),"\n"]}),"\n",(0,i.jsxs)(n.h2,{id:"assetpublicpath",children:["asset.publicPath",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#assetpublicpath",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"打包时给未内联资源的 CDN 前缀。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"undefined"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    asset: {\n      publicPath: 'https://xxx/',\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["此时，所有静态资源都会添加 ",(0,i.jsx)(n.code,{children:"https://xxx/"})," 前缀。"]}),"\n",(0,i.jsxs)(n.h2,{id:"assetsvgr",children:["asset.svgr",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#assetsvgr",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["打包时将 SVG 作为一个 React 组件处理，options 参考 ",(0,i.jsx)(n.a,{href:"https://react-svgr.com/docs/options/",target:"_blank",rel:"noopener noreferrer",children:"svgr"}),"，另外还支持了 ",(0,i.jsx)(n.code,{children:"include"})," 和 ",(0,i.jsx)(n.code,{children:"exclude"})," 两个配置项，用于匹配需要处理的 SVG 文件。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"boolean | object"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"false"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"开启 svgr 功能后，可以使用默认导出的方式将 SVG 当做组件使用。"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="index.ts"',children:"// true\nimport Logo from './logo.svg';\n\nexport default () => <Logo />;\n"})}),"\n",(0,i.jsxs)(n.p,{children:["当开启功能后，可以新建一个类型描述文件，并在 ",(0,i.jsx)(n.code,{children:"modern-app-env.d.ts"})," 文件中增加，修改使用 SVG 的类型："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",meta:'title="your-app-env.d.ts"',children:"declare module '*.svg' {\n  const src: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;\n  export default src;\n}\n"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",meta:'title="modern-app-env.d.ts"',children:"/// <reference path='./your-app-env.d.ts' />\n/// <reference types='@modern-js/module-tools/types' />\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"assetsvgrinclude",children:["asset.svgr.include",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#assetsvgrinclude",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"设定匹配的 SVG 文件"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"string | RegExp | (string | RegExp)[]"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"/\\.svg$/"})]}),"\n"]}),"\n",(0,i.jsxs)(n.h2,{id:"assetsvgrexclude",children:["asset.svgr.exclude",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#assetsvgrexclude",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"设定不匹配的 SVG 文件"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"string | RegExp | (string | RegExp)[]"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"undefined"})]}),"\n"]}),"\n",(0,i.jsxs)(n.h2,{id:"assetsvgrexporttype",children:["asset.svgr.exportType",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#assetsvgrexporttype",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"用于配置使用 SVGR 时 SVG 的导出形式。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"'named' | 'default'"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"default"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"当此选项设置为 'named' 时，你可以使用以下语法导入组件："}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="index.ts"',children:"import { ReactComponent } from './logo.svg';\n"})}),"\n",(0,i.jsxs)(n.p,{children:["命名导出默认为 ",(0,i.jsx)(n.code,{children:"ReactComponent"}),"，并可以通过 ",(0,i.jsx)(n.code,{children:"asset.svgr.namedExport"})," 进行自定义。"]}),"\n",(0,i.jsxs)(n.h2,{id:"autoextension",children:["autoExtension",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#autoextension",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["根据 ",(0,i.jsx)(n.a,{href:"#format",children:"format"})," 和 ",(0,i.jsx)(n.a,{href:"https://nodejs.org/api/packages.html#type",target:"_blank",rel:"noopener noreferrer",children:"type"})," 自动添加产物里 js 文件和类型描述文件的后缀。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型：",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值：",(0,i.jsx)(n.code,{children:"false"})]}),"\n",(0,i.jsxs)(n.li,{children:["版本：",(0,i.jsx)(n.code,{children:">=2.38.0"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["关闭时，js 产物后缀为 ",(0,i.jsx)(n.code,{children:".js"}),"，类型描述文件后缀为 ",(0,i.jsx)(n.code,{children:"d.ts"}),"。"]}),"\n",(0,i.jsxs)(n.p,{children:["开启后，当 type 为 ",(0,i.jsx)(n.code,{children:"module"})," 时，node 默认将 ",(0,i.jsx)(n.code,{children:".js"})," 作为 esm 加载，因此当我们要输出 cjs 产物时，js 产物后缀为 ",(0,i.jsx)(n.code,{children:".cjs"}),"，类型描述文件后缀为 ",(0,i.jsx)(n.code,{children:"d.cts"}),";\n反之，如果缺少 type 字段或者 type 为 ",(0,i.jsx)(n.code,{children:"commonjs"})," 时， node 默认将 ",(0,i.jsx)(n.code,{children:".js"})," 文件作为 cjs 加载，因此当我们要输出 esm 产物时，js 产物后缀为 ",(0,i.jsx)(n.code,{children:".mjs"}),"，类型描述文件后缀为 ",(0,i.jsx)(n.code,{children:"d.mts"}),"。"]}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive warning",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"WARNING"}),(0,i.jsxs)(n.div,{className:"rspress-directive-content",children:[(0,i.jsxs)(n.p,{children:["在 bundleless 模式下使用时，我们会有一步额外的操作，那就是处理每个文件里的 import/export 语句。我们会给相对路径加上 js 文件后缀，可能是 ",(0,i.jsx)(n.code,{children:".mjs"})," 或者 ",(0,i.jsx)(n.code,{children:".cjs"}),"，这取决于你的包配置，此行为可以通过 ",(0,i.jsx)(n.a,{href:"#redirect",children:"redirect.autoExtension"}),"关闭。"]}),"\n",(0,i.jsxs)(n.p,{children:["注意 ",(0,i.jsx)(n.a,{href:"https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-useless-path-segments.md#nouselessindex",target:"_blank",rel:"noopener noreferrer",children:"noUselessIndex"})," 规则会破坏此行为，你需要禁用此规则\n如果你需要在 bundleless 使用此配置，请补齐 ",(0,i.jsx)(n.code,{children:"index"}),"，例如 utils 是一个文件夹， 你需要将 ",(0,i.jsx)(n.code,{children:"import * from './utils'"})," 改写为 ",(0,i.jsx)(n.code,{children:"import * from './utils/index'"}),"\n"]})]})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    autoExtension: true,\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"autoexternal",children:["autoExternal",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#autoexternal",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["自动外置项目的 ",(0,i.jsx)(n.code,{children:'"dependencies"'})," 和 ",(0,i.jsx)(n.code,{children:'"peerDependencies"'}),"，不会将其打包到最终的 bundle 产物中。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"boolean | object"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"true"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"当我们希望关闭对于第三方依赖的默认处理行为时候，可以通过以下方式来实现："}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    autoExternal: false,\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["这样对于 ",(0,i.jsx)(n.code,{children:'"dependencies"'})," 和 ",(0,i.jsx)(n.code,{children:'"peerDependencies"'})," 下面的依赖都会进行打包处理。如果只想要关闭其中某个下面的依赖处理，则可以使用\n",(0,i.jsx)(n.code,{children:"buildConfig.autoExternal"})," 的对象形式："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    autoExternal: {\n      dependencies: false,\n      peerDependencies: false,\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"autoexternaldependencies",children:["autoExternal.dependencies",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#autoexternaldependencies",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["是否需要外置项目的 ",(0,i.jsx)(n.code,{children:'"dependencies"'})," 依赖。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"true"})]}),"\n"]}),"\n",(0,i.jsxs)(n.h2,{id:"autoexternalpeerdependencies",children:["autoExternal.peerDependencies",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#autoexternalpeerdependencies",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["是否需要外置项目的 ",(0,i.jsx)(n.code,{children:'"peerDependencies"'})," 依赖。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"true"})]}),"\n"]}),"\n",(0,i.jsxs)(n.h2,{id:"banner",children:["banner",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#banner",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"提供为每个 JS , CSS 和 DTS 文件的顶部和底部注入内容的能力。"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"interface BannerAndFooter {\n  js?: string;\n  css?: string;\n  dts?: string;\n}\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"BannerAndFooter"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值: ",(0,i.jsx)(n.code,{children:"{}"})]}),"\n",(0,i.jsxs)(n.li,{children:["版本： ",(0,i.jsx)(n.code,{children:">=2.36.0"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"例如你想为 JS 和 CSS 文件添加版权信息:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@edenx/module-tools';\n\nconst copyRight = `/*\n \xa9 Copyright 2020 example.com or one of its affiliates.\n * Some Sample Copyright Text Line\n * Some Sample Copyright Text Line\n*/`;\n\nexport default defineConfig({\n  plugins: [moduleTools()],\n  buildConfig: {\n    banner: {\n      js: copyRight,\n      css: copyRight,\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"buildtype",children:["buildType",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#buildtype",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["构建类型，",(0,i.jsx)(n.code,{children:"bundle"})," 会打包你的代码，",(0,i.jsx)(n.code,{children:"bundleless"})," 只做代码的转换。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"'bundle' | 'bundleless'"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"'bundle'"})]}),"\n"]}),"\n",(0,i.jsxs)(n.h2,{id:"copy",children:["copy",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#copy",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"将文件或目录拷贝到指定位置。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    copy: {\n      patterns: [{ from: './src/assets', to: '' }],\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"copypatterns",children:["copy.patterns",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#copypatterns",children:"#"})]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"CopyPattern[]"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"[]"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"interface CopyPattern {\n  from: string;\n  to?: string;\n  context?: string;\n  globOptions?: globby.GlobbyOptions;\n}\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"copyoptions",children:["copy.options",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#copyoptions",children:"#"})]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"类型："}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"type Options = {\n  concurrency?: number;\n  enableCopySync?: boolean;\n};\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["默认值： ",(0,i.jsx)(n.code,{children:"{ concurrency: 100, enableCopySync: false }"})]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"concurrency"}),": 指定并行执行多少个复制任务。"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"enableCopySync"}),": 使用 ",(0,i.jsx)(n.a,{href:"https://github.com/jprichardson/node-fs-extra/blob/master/lib/copy/copy-sync.js",target:"_blank",rel:"noopener noreferrer",children:(0,i.jsx)(n.code,{children:"fs.copySync"})}),"，默认情况下 ",(0,i.jsx)(n.a,{href:"https://github.com/jprichardson/node-fs-extra/blob/master/lib/copy/copy.js",target:"_blank",rel:"noopener noreferrer",children:(0,i.jsx)(n.code,{children:"fs.copy"})}),"。"]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.h2,{id:"define",children:["define",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#define",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"定义全局变量，注入到代码中"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"Record<string, string>"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"{}"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["由于 ",(0,i.jsx)(n.code,{children:"define"})," 功能是由全局文本替换实现的，所以需要保证全局变量值为字符串，更为安全的做法是将每个全局变量的值转化为字符串，如下所示："]}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive info",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"INFO"}),(0,i.jsxs)(n.div,{className:"rspress-directive-content",children:[(0,i.jsx)(n.p,{children:"框架内部会自动进行 JSON 序列化处理，因此不需要手动执行序列化。"}),"\n",(0,i.jsxs)(n.p,{children:["如果不需要自动序列化，可以通过配置 ",(0,i.jsx)(n.a,{href:"/api/config/build-config.html#esbuildoptions",children:(0,i.jsx)(n.code,{children:"esbuildOptions"})})," 定义 ",(0,i.jsx)(n.a,{href:"https://esbuild.github.io/api/#alias",target:"_blank",rel:"noopener noreferrer",children:(0,i.jsx)(n.code,{children:"alias"})})," 来实现。\n"]})]})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    define: {\n      VERSION: require('./package.json').version || '0.0.0',\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["不过要注意：如果项目是一个 TypeScript 项目，那么你可能需要在项目源代码目录下的 ",(0,i.jsx)(n.code,{children:".d.ts"})," 文件里增加以下内容："]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["如果不存在 ",(0,i.jsx)(n.code,{children:"d.ts"})," 文件，则可以手动创建。"]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",meta:'title="env.d.ts"',children:"declare const YOUR_ADD_GLOBAL_VAR;\n"})}),"\n",(0,i.jsx)(n.p,{children:"我们也可以进行环境变量替换："}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"import { defineConfig } from '@modern-js/module-tools';\nexport default defineConfig({\n  buildConfig: {\n    define: {\n      'process.env.VERSION': process.env.VERSION || '0.0.0',\n    },\n  },\n});\n"})}),"\n",(0,i.jsx)(n.p,{children:"通过上面的配置，我们就可以将下面这段代码："}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"// 编译前代码\nconsole.log(process.env.VERSION);\n"})}),"\n",(0,i.jsxs)(n.p,{children:["在执行 ",(0,i.jsx)(n.code,{children:"VERSION=1.0.0 modern build"})," 的时候，转换为："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"// 编译后代码\nconsole.log('1.0.0');\n"})}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive tip",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"TIP"}),(0,i.jsxs)(n.div,{className:"rspress-directive-content",children:[(0,i.jsx)(n.p,{children:"为了防止全局替换替换过度，建议使用时遵循以下两个原则："}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"全局常量使用大写"}),"\n",(0,i.jsx)(n.li,{children:"自定义全局常量前缀后缀，确保独一无二"}),"\n"]}),"\n"]})]}),"\n",(0,i.jsxs)(n.h2,{id:"dts",children:["dts",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#dts",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"类型文件生成的相关配置，默认情况会生成。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"false | object"})]}),"\n",(0,i.jsx)(n.li,{children:"默认值："}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"{\n  abortOnError: true,\n  distPath: './',\n  only: false,\n}\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"dtsabortonerror",children:["dts.abortOnError",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#dtsabortonerror",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"用于控制在出现类型错误的时候，是否允许构建成功。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型：",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值：",(0,i.jsx)(n.code,{children:"true"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"默认情况下，在出现类型错误的时候会导致构建失败"}),"。将 ",(0,i.jsx)(n.code,{children:"abortOnError"})," 设置为 ",(0,i.jsx)(n.code,{children:"false"})," 后，即使代码中出现了类型问题，构建依然会成功："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    dts: {\n      abortOnError: false,\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive warning",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"WARNING"}),(0,i.jsx)(n.div,{className:"rspress-directive-content",children:(0,i.jsxs)(n.p,{children:["当关闭该配置后，无法保证类型文件能正常生成，且不保证内容正确。在 ",(0,i.jsx)(n.code,{children:"buildType: 'bundle'"})," 时，即打包模式下，类型文件一定不会生成。\n"]})})]}),"\n",(0,i.jsxs)(n.h2,{id:"dtsdistpath",children:["dts.distPath",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#dtsdistpath",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["类型文件的输出路径，基于 ",(0,i.jsx)(n.a,{href:"/api/config/build-config#outdir",children:"outDir"})," 进行输出。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"./"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["比如输出到 ",(0,i.jsx)(n.code,{children:"outDir"})," 下面的 ",(0,i.jsx)(n.code,{children:"types"})," 目录："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    dts: {\n      distPath: './types',\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"dtsenabletscbuild",children:["dts.enableTscBuild",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#dtsenabletscbuild",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"开启 tsc '--build' 选项。当使用 project reference 时，\n可以使用 '--build' 选项以实现项目之间的协同工作以加快构建速度。"}),"\n",(0,i.jsx)(n.p,{children:"此选项要求版本 > 2.43.0，\n事实上，我们在 2.42.0 版本曾试验性地开启此选项，但其带来的许多问题使我们不得不动态开启。"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-warning",children:"当开启此选项时，为了满足构建需求，你必须显式地在 tsconfig.json 里设置 'declarationDir' 或者 'outDir'，\n如果你用的不是 TS >= 5.0 版本，你还需要显式地设置 'declaration' 和 'emitDeclarationOnly'。\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"false"})]}),"\n",(0,i.jsxs)(n.li,{children:["版本： ",(0,i.jsx)(n.code,{children:">2.43.0"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    dts: {\n      enableTscBuild: true,\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"dtsonly",children:["dts.only",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#dtsonly",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"是否在构建时只生成类型文件，不生成 JavaScript 产物文件。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"false"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    dts: {\n      only: true,\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"dtsrespectexternal",children:["dts.respectExternal",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#dtsrespectexternal",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["当设为 ",(0,i.jsx)(n.code,{children:"false"})," 时，不会打包任何三方包类型，设为 ",(0,i.jsx)(n.code,{children:"true"})," 时，会根据 ",(0,i.jsx)(n.a,{href:"#externals",children:"externals"})," 来决定是否需要打包三方类型。"]}),"\n",(0,i.jsx)(n.p,{children:"在对类型文件进行打包时，构建工具还未对 export 进行分析，因此当你引用的任何一个三方包出现类型错误时，都可能会中断当前的构建流程，这会导致构建流程不可控，因此我们可以通过这个配置来避免该问题。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"true"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    dts: {\n      respectExternal: false,\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"dtstsconfigpath",children:["dts.tsconfigPath",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#dtstsconfigpath",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"废弃"}),"，使用 ",(0,i.jsx)(n.a,{href:"#tsconfig",children:"tsconfig"})," 配置替代。"]}),"\n",(0,i.jsx)(n.p,{children:"指定用于生成类型文件的 tsconfig 文件路径。"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    dts: {\n      tsconfigPath: './other-tsconfig.json',\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"esbuildoptions",children:["esbuildOptions",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#esbuildoptions",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["用于修改底层的 ",(0,i.jsx)(n.a,{href:"https://esbuild.github.io/api/",target:"_blank",rel:"noopener noreferrer",children:"esbuild 配置"}),"。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"Function"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"c => c"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"例如，我们需要修改生成文件的后缀："}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    esbuildOptions: options => {\n      options.outExtension = { '.js': '.mjs' };\n      return options;\n    },\n  },\n});\n"})}),"\n",(0,i.jsx)(n.p,{children:"例如，注册一个 esbuild 插件："}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"import { myEsbuildPlugin } from './myEsbuildPlugin';\n\nexport default defineConfig({\n  buildConfig: {\n    esbuildOptions: options => {\n      options.plugins = [myEsbuildPlugin, ...options.plugins];\n      return options;\n    },\n  },\n});\n"})}),"\n",(0,i.jsx)(n.p,{children:"在增加 esbuild 插件时，请注意你需要将插件加在 plugins 数组的头部，因为 Modern.js Module 内部也是通过一个 esbuild 插件介入到整个构建流程中去的，因此需要将自定义插件优先注册。"}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive tip",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"TIP"}),(0,i.jsxs)(n.div,{className:"rspress-directive-content",children:[(0,i.jsx)(n.p,{children:"我们在原本 esbuild 构建的基础上做了许多扩展，因此使用此配置需要注意以下几点："}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["优先使用 Modern.js Module 提供的配置，例如 esbuild 并不支持 ",(0,i.jsx)(n.code,{children:"target: 'es5'"}),"，但我们内部使用 SWC 支持了此场景，此时通过 ",(0,i.jsx)(n.code,{children:"esbuildOptions"})," 设置",(0,i.jsx)(n.code,{children:"target: 'es5'"}),"会报错。"]}),"\n",(0,i.jsxs)(n.li,{children:["目前我们内部使用 ",(0,i.jsx)(n.code,{children:"enhanced-resolve"})," 替代了 esbuild 的 resolve 解析算法，所以修改 esbuild resolve 相关配置无效，计划在未来会切换回来。"]}),"\n"]}),"\n"]})]}),"\n",(0,i.jsxs)(n.h2,{id:"externalhelpers",children:["externalHelpers",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#externalhelpers",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"默认情况下，输出的 JS 代码可能会依赖一些辅助函数来支持目标环境或者输出格式，这些辅助函数会被内联在需要它的文件中。"}),"\n",(0,i.jsxs)(n.p,{children:["使用此配置，将会使用 SWC 对代码进行转换，将内联的辅助函数转换为从外部模块 ",(0,i.jsx)(n.code,{children:"@swc/helpers"})," 导入这些辅助函数。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型：",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值：",(0,i.jsx)(n.code,{children:"false"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"下面是使用该配置前后的产物变化比较。"}),"\n",(0,i.jsx)(n.p,{children:"开启前："}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="./dist/index.js"',children:"// 辅助函数\nfunction asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {\n  // ...\n}\n// 辅助函数\nfunction _async_to_generator(fn) {\n  return function () {\n    // use asyncGeneratorStep\n    // ...\n  };\n}\n\n// 你的代码\nexport var yourCode = function () {\n  // use _async_to_generator\n};\n"})}),"\n",(0,i.jsx)(n.p,{children:"开启后："}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="./dist/index.js"',children:"// 从 @swc/helpers 导入的辅助函数\nimport { _ as _async_to_generator } from '@swc/helpers/_/_async_to_generator';\n\n// 你的代码\nexport var yourCode = function () {\n  // use _async_to_generator\n};\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"externals",children:["externals",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#externals",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"用于在打包时排除一些外部依赖，避免将这些依赖打包到最终的 bundle 中。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"类型："}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"type Externals = (string | RegExp)[];\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"[]"})]}),"\n",(0,i.jsxs)(n.li,{children:["构建类型：",(0,i.jsx)(n.code,{children:"仅支持 buildType: 'bundle'"})]}),"\n",(0,i.jsx)(n.li,{children:"示例："}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    // 避免打包 React\n    externals: ['react'],\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"footer",children:["footer",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#footer",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["同 ",(0,i.jsx)(n.a,{href:"#banner",children:"banner"})," 配置，用于在输出文件末尾添加注释。"]}),"\n",(0,i.jsxs)(n.h2,{id:"format",children:["format",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#format",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["用于设置 JavaScript 产物输出的格式，其中 ",(0,i.jsx)(n.code,{children:"iife"})," 和 ",(0,i.jsx)(n.code,{children:"umd"})," 只在 ",(0,i.jsx)(n.code,{children:"buildType"})," 为 ",(0,i.jsx)(n.code,{children:"bundle"})," 时生效。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型：",(0,i.jsx)(n.code,{children:"'esm' | 'cjs' | 'iife' | 'umd'"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值：",(0,i.jsx)(n.code,{children:"cjs"})]}),"\n"]}),"\n",(0,i.jsxs)(n.h3,{id:"format-esm",children:["format: esm",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#format-esm",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:'esm 代表 "ECMAScript 模块"，它需要运行环境支持 import 和 export 语法。'}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"示例："}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    format: 'esm',\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h3,{id:"format-cjs",children:["format: cjs",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#format-cjs",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:'cjs 代表 "CommonJS"，它需要运行环境支持 exports、require 和 module 语法，通常为 Node.js 环境。'}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"示例："}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    format: 'cjs',\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h3,{id:"format-iife",children:["format: iife",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#format-iife",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:'iife 代表 "立即调用函数表达式"，它将代码包裹在函数表达式中，确保代码中的任何变量不会意外地与全局范围中的变量冲突，通常在浏览器环境中运行。'}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"示例："}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    format: 'iife',\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h3,{id:"format-umd",children:["format: umd",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#format-umd",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:'umd 代表 "Universal Module Definition"，用于在不同环境（浏览器、Node.js 等）中运行。umd 格式的模块可以在多种环境下使用，既可以作为全局变量访问，也可以通过模块加载器（如 RequireJS）进行模块化加载。'}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"示例："}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    format: 'umd',\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"hooks",children:["hooks",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#hooks",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"构建生命周期钩子,允许在构建流程的特定阶段注入自定义逻辑。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"类型："}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"type HookList = {\n  name: string;\n  apply: (compiler: ICompiler) => void;\n  // 是否在 buildIn 钩子之后执行\n  applyAfterBuiltIn?: boolean;\n};\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["默认值：",(0,i.jsx)(n.code,{children:"[]"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["我们可以在 apply 方法里拿到 compiler 实例，修改其属性，以及在不同阶段执行自定义逻辑，对于 Hook 的详细介绍，\n参考",(0,i.jsx)(n.a,{href:"/guide/advance/in-depth-about-build.html#%E4%BD%BF%E7%94%A8-hook-%E4%BB%8B%E5%85%A5%E6%9E%84%E5%BB%BA%E6%B5%81%E7%A8%8B",children:"使用 Hook 介入构建流程"}),"。"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    buildType: 'bundle',\n    hooks: [\n      {\n        name: 'renderChunk',\n        apply: compiler => {\n          // any logic for compiler\n          compiler.hooks.renderChunk.tapPromise(\n            { name: 'renderChunk' },\n            async chunk => {\n              return chunk;\n            },\n          );\n        },\n      },\n    ],\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"input",children:["input",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#input",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"指定构建的入口文件，数组形式可以指定目录。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"类型："}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"type Input =\n  | string[];\n  | {\n      [name: string]: string;\n    }\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["默认值：",(0,i.jsx)(n.code,{children:"bundle"})," 模式下默认为 ",(0,i.jsx)(n.code,{children:"['src/index.ts']"}),"，",(0,i.jsx)(n.code,{children:"bundleless"})," 模式下默认为 ",(0,i.jsx)(n.code,{children:"['src']"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"数组用法："})}),"\n",(0,i.jsxs)(n.p,{children:["在 ",(0,i.jsx)(n.code,{children:"bundle"})," 模式下，下面的配置会以 ",(0,i.jsx)(n.code,{children:"src/index.ts"})," 和 ",(0,i.jsx)(n.code,{children:"src/index2.ts"})," 为入口分别进行构建。",(0,i.jsx)(n.code,{children:"bundle"})," 模式不支持配置 ",(0,i.jsx)(n.code,{children:"input"})," 为目录。"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    buildType: 'bundle',\n    input: ['src/index.ts', 'src/index2.ts'],\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["在 ",(0,i.jsx)(n.code,{children:"bundleless"})," 模式下，下面的配置会同时处理 ",(0,i.jsx)(n.code,{children:"src/a"})," 目录下的文件和 ",(0,i.jsx)(n.code,{children:"src/index.ts"})," 文件。"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    buildType: 'bundleless',\n    input: ['src/a', 'src/index.ts'],\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["在 ",(0,i.jsx)(n.code,{children:"bundleless"})," 模式下，数组模式还支持使用 ",(0,i.jsx)(n.code,{children:"!"})," 来过滤部分文件："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    buildType: 'bundleless',\n    input: ['src', '!src/*.spec.ts'],\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["上面的配置将打包 ",(0,i.jsx)(n.code,{children:"src"})," 目录下的文件，同时会过滤以 ",(0,i.jsx)(n.code,{children:"spec.ts"})," 为后缀的文件。这在测试文件与源码文件在同一个根目录下的情况会很有用。"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"对象用法："})}),"\n",(0,i.jsx)(n.p,{children:"当在 bundle 模式下需要修改产物的输出文件名称的时候，可以使用对象形式进行配置。"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"对象的 Key 是产物的文件名称，Value 是源码的文件路径。"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    format: 'esm',\n    input: {\n      'index.esm': './src/index.ts',\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"jsx",children:["jsx",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#jsx",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"指定 JSX 的编译方式，默认支持 React 17 及更高版本，自动注入 JSX 运行时代码。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"automatic | transform | preserve"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"automatic"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["如果你需要支持 React 16，则可以设置 ",(0,i.jsx)(n.code,{children:"jsx"})," 为 ",(0,i.jsx)(n.code,{children:"transform"}),"："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    jsx: 'transform',\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive tip",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"TIP"}),(0,i.jsxs)(n.div,{className:"rspress-directive-content",children:[(0,i.jsxs)(n.p,{children:["如果你不需要转换 JSX ,可以设置 ",(0,i.jsx)(n.code,{children:"jsx"})," 为 ",(0,i.jsx)(n.code,{children:"preserve"}),", 但此时请不要",(0,i.jsx)(n.a,{href:"/guide/advance/in-depth-about-build#%E4%BD%BF%E7%94%A8-swc",children:"使用 swc"})," 做代码转换。\n关于 JSX Transform 的更多说明，可以参考以下链接："]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html",target:"_blank",rel:"noopener noreferrer",children:"React Blog - Introducing the New JSX Transform"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"https://esbuild.github.io/api/#jsx",target:"_blank",rel:"noopener noreferrer",children:"esbuild - JSX"}),"."]}),"\n"]}),"\n"]})]}),"\n",(0,i.jsxs)(n.h2,{id:"loader",children:["loader",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#loader",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"试验性功能"})}),"\n",(0,i.jsx)(n.p,{children:"此选项用来更改给定输入文件的解释方式。例如你需要将 js 文件当做 jsx 处理"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    loader: {\n      '.js': 'jsx',\n    }\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"metafile",children:["metafile",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#metafile",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"这个选项用于构建分析，开启该选项后，esbuild 会以 JSON 格式生成有关构建的一些元数据。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型：",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值：",(0,i.jsx)(n.code,{children:"false"})]}),"\n",(0,i.jsxs)(n.li,{children:["构建类型：",(0,i.jsx)(n.code,{children:"仅支持 buildType: 'bundle'"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["开启 ",(0,i.jsx)(n.code,{children:"metafile"})," 生成："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    buildType: 'bundle',\n    metafile: true,\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["在执行 build 构建后，产物目录下会生成 ",(0,i.jsx)(n.code,{children:"metafile-[xxx].json"})," 文件，你可以通过 ",(0,i.jsx)(n.a,{href:"https://esbuild.github.io/analyze/",target:"_blank",rel:"noopener noreferrer",children:"esbuild analyze"})," 和 ",(0,i.jsx)(n.a,{href:"https://bundle-buddy.com/esbuild",target:"_blank",rel:"noopener noreferrer",children:"bundle-buddy"})," 等工具进行可视化分析。"]}),"\n",(0,i.jsxs)(n.h2,{id:"minify",children:["minify",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#minify",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["使用 esbuild 或者 terser 压缩代码，也可以传入 ",(0,i.jsx)(n.a,{href:"https://github.com/terser/terser#minify-options",target:"_blank",rel:"noopener noreferrer",children:"terserOptions"}),"。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"'terser' | 'esbuild' | false | object"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"false"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    minify: {\n      compress: {\n        drop_console: true,\n      },\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"outdir",children:["outDir",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#outdir",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"指定构建的输出目录。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"./dist"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    outDir: './dist/esm',\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"platform",children:["platform",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#platform",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["默认生成用于 Node.js 环境下的代码，你也可以指定为 ",(0,i.jsx)(n.code,{children:"browser"}),"，会生成用于浏览器环境的代码。\n查看",(0,i.jsx)(n.a,{href:"https://esbuild.github.io/api/#platform",target:"_blank",rel:"noopener noreferrer",children:"esbuild.platform"}),"了解更多。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"'browser' | 'node'"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"'node'"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    platform: 'browser',\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"redirect",children:["redirect",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#redirect",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["在 ",(0,i.jsx)(n.strong,{children:(0,i.jsx)(n.code,{children:"buildType: 'bundleless'"})})," 构建模式下，会对引用路径进行重定向，确保指向了正确的产物，例如："]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"import './index.less'"})," 会被改写成 ",(0,i.jsx)(n.code,{children:"import './index.css'"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"import icon from './close.svg'"})," 会被改写成 ",(0,i.jsx)(n.code,{children:"import icon from '../asset/close.svg'"}),"（依实际情况而定）"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"import * from './utils'"})," 会被改写成 ",(0,i.jsx)(n.code,{children:"import * from './utils.mjs'"})," (如果生成了 utils.mjs，视实际情况而定)"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"在某些场景下，你可能不需要这些功能，那么可以通过此配置关闭它，关闭后，其引用路径将不会发生改变。"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default {\n  buildConfig: {\n    redirect: {\n      alias: false, // 关闭对别名路径的修改\n      style: false, // 关闭对样式文件路径的修改\n      asset: false, // 关闭对资源文件路径的修改\n      autoExtension: false, // 关闭对 js 文件后缀的修改\n    },\n  },\n};\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"resolve",children:["resolve",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#resolve",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"自定义模块解析选项"}),"\n",(0,i.jsxs)(n.h3,{id:"resolvealias",children:["resolve.alias",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#resolvealias",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["基本用法和 ",(0,i.jsx)(n.a,{href:"#alias",children:"alias"})," 一致。"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"#alias",children:"alias"})," 的问题在于我们在 bundleless 场景下错误的处理了 Module ID 的情况："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'import { createElement } from "react";\n'})}),"\n",(0,i.jsxs)(n.p,{children:["当我们配置了 ",(0,i.jsx)(n.code,{children:"alias: { react: 'react-native' }"})," 后，结果会变成"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'import { createElement } from "./react-native";\n'})}),"\n",(0,i.jsx)(n.p,{children:"一个 Module ID 被错误的处理成了相对路径，显然这是不符合预期的。"}),"\n",(0,i.jsxs)(n.p,{children:["我们想要修复这个问题，但是这可能会破坏已有的项目，因此我们在 2.58.0 版本提供了 ",(0,i.jsx)(n.code,{children:"resolve.alias"})," 来解决这个问题。\n并且 ",(0,i.jsx)(n.code,{children:"resolve.alias"})," 里移除了 ",(0,i.jsx)(n.a,{href:"#alias",children:"alias"})," 提供的默认值 ",(0,i.jsx)(n.code,{children:'{ "@": "./src"}'})]}),"\n",(0,i.jsxs)(n.p,{children:["如果你需要此功能，请使用 ",(0,i.jsx)(n.code,{children:"resolve.alias"}),"。"]}),"\n",(0,i.jsxs)(n.p,{children:["在下一个大版本，",(0,i.jsx)(n.code,{children:"resolve.alias"})," 将会取代 ",(0,i.jsx)(n.code,{children:"alias"})," 。"]}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive warning",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"WARNING"}),(0,i.jsxs)(n.div,{className:"rspress-directive-content",children:["\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["注意此配置不要与 ",(0,i.jsx)(n.a,{href:"#alias",children:"alias"})," 混用。"]}),"\n",(0,i.jsxs)(n.li,{children:["注意此配置必须标注一个相对路径，例如 ",(0,i.jsx)(n.code,{children:'{ "@": "./src" }'})," 而非 ",(0,i.jsx)(n.code,{children:'{ "@": "src"}'}),"。"]}),"\n"]}),"\n"]})]}),"\n",(0,i.jsxs)(n.h3,{id:"resolvemainfields",children:["resolve.mainFields",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#resolvemainfields",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"package.json 中，在解析包的入口点时尝试的字段列表。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型：",(0,i.jsx)(n.code,{children:"string[]"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值：取决于",(0,i.jsx)(n.a,{href:"#platform",children:"platform"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"node: ['module', 'main']"}),"\n",(0,i.jsx)(n.li,{children:"browser: ['module', 'browser', 'main']"}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["版本：",(0,i.jsx)(n.code,{children:">=2.36.0"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["例如，我们想要先加载 ",(0,i.jsx)(n.code,{children:"js:source"})," 字段："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    resolve: {\n      mainFields: ['js:source', 'module', 'main'],\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive warning",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"WARNING"}),(0,i.jsx)(n.div,{className:"rspress-directive-content",children:(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"resolve.mainFields"})," 比 package.json 中 exports 字段的优先级低，如果一个入口点从 exports 成功解析，",(0,i.jsx)(n.code,{children:"resolve.mainFields"})," 将被忽略。\n"]})})]}),"\n",(0,i.jsxs)(n.h3,{id:"resolvejsextentions",children:["resolve.jsExtentions",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#resolvejsextentions",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"支持隐式文件扩展名"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"string[]"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"['.jsx', '.tsx', '.js', '.ts', '.json']"})]}),"\n",(0,i.jsxs)(n.li,{children:["版本：",(0,i.jsx)(n.code,{children:">=2.36.0"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"对于 css 文件，请不要使用隐式文件扩展名，目前 Module 仅支持 ['.less', '.css', '.sass', '.scss'] 后缀。"}),"\n",(0,i.jsxs)(n.p,{children:["Node 的解析算法不会将 ",(0,i.jsx)(n.code,{children:".mjs"})," 和 ",(0,i.jsx)(n.code,{children:"cjs"})," 视为隐式文件扩展名，因此这里默认也不会，但是可以通过更改此配置来包含："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    resolve: {\n      jsExtentions: ['.mts', 'ts'],\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"shims",children:["shims",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#shims",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"在构建 cjs / esm 产物时注入一些垫片代码。"}),"\n",(0,i.jsxs)(n.p,{children:["例如 ",(0,i.jsx)(n.code,{children:"__dirname"})," 只能在 commonjs 里使用，开启此选项后，当产物格式为 esm 时，会将 ",(0,i.jsx)(n.code,{children:"__dirname"})," 编译为 ",(0,i.jsx)(n.code,{children:"path.dirname(fileURLToPath(import.meta.url))"}),"。"]}),"\n",(0,i.jsxs)(n.p,{children:["详细代码见 ",(0,i.jsx)(n.a,{href:"https://github.com/web-infra-dev/modern.js/blob/main/packages/solutions/module-tools/shims",target:"_blank",rel:"noopener noreferrer",children:"shims"}),"，\n需要注意的是 esm shims 只会在 ",(0,i.jsx)(n.a,{href:"#platform",children:"platform"})," 为 node 时注入，因为用到了 url 模块。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"false"})]}),"\n",(0,i.jsxs)(n.li,{children:["版本：",(0,i.jsx)(n.code,{children:">=2.38.0"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    shims: true,\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"sideeffects",children:["sideEffects",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#sideeffects",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"配置模块的副作用"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"RegExg[] | (filePath: string, isExternal: boolean) => boolean | boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"undefined"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["通常情况下，我们通过 package.json 的 ",(0,i.jsx)(n.code,{children:'"sideEffects"'})," 字段来配置模块的副作用，但是在某些情况下，三方包的 package.json 是不可靠的。\n例如我们引用了一个三方包的样式文件。"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"import 'other-package/dist/index.css';\n"})}),"\n",(0,i.jsxs)(n.p,{children:["但是这个三方包的 package.json 里并没有将样式文件配置到 ",(0,i.jsx)(n.code,{children:'"sideEffects"'})," 里。"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-json",meta:'title="other-package/package.json"',children:'{\n  "sideEffects": ["dist/index.js"]\n}\n'})}),"\n",(0,i.jsxs)(n.p,{children:["同时你又设置了 ",(0,i.jsx)(n.a,{href:"#styleinject",children:"style.inject"})," 为 ",(0,i.jsx)(n.code,{children:"true"}),"，在控制台可以看到类似的警告信息："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:'[LIBUILD:ESBUILD_WARN] Ignoring this import because "other-package/dist/index.css" was marked as having no side effects\n'})}),"\n",(0,i.jsxs)(n.p,{children:["这时候就可以使用这个配置项，手动配置模块的",(0,i.jsx)(n.code,{children:'"sideEffects"'}),"，配置支持正则和函数形式。"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    sideEffects: [/\\.css$/],\n    // or\n    // sideEffects: (filePath, isExternal) => /\\.css$/.test(filePath),\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive tip",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"TIP"}),(0,i.jsx)(n.div,{className:"rspress-directive-content",children:(0,i.jsxs)(n.p,{children:["添加此配置后，打包时将不会再读取 package.json 里的 ",(0,i.jsx)(n.code,{children:'"sideEffects"'})," 字段。\n"]})})]}),"\n",(0,i.jsxs)(n.h2,{id:"sourcedir",children:["sourceDir",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#sourcedir",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["指定构建的源码目录,默认为 ",(0,i.jsx)(n.code,{children:"src"}),"，用于在 ",(0,i.jsx)(n.code,{children:"bundleless"})," 构建时基于源码目录结构生成对应的产物目录。\n等同于",(0,i.jsx)(n.a,{href:"https://esbuild.github.io/api/#outbase",target:"_blank",rel:"noopener noreferrer",children:"esbuild.outbase"}),"。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"src"})]}),"\n"]}),"\n",(0,i.jsxs)(n.h2,{id:"sourcemap",children:["sourceMap",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#sourcemap",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"控制 sourceMap 如何生成。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"boolean | 'inline' | 'external'"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"false"})]}),"\n"]}),"\n",(0,i.jsxs)(n.h2,{id:"sourcetype",children:["sourceType",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#sourcetype",children:"#"})]}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive warning",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"WARNING"}),(0,i.jsx)(n.div,{className:"rspress-directive-content",children:(0,i.jsx)(n.p,{children:"已废弃，此配置不会产生任何影响。"})})]}),"\n",(0,i.jsxs)(n.p,{children:["设置源码的格式。默认情况下，会将源码作为 EsModule 进行处理。当源码使用的是 CommonJS 的时候，需要设置 ",(0,i.jsx)(n.code,{children:"commonjs"}),"。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型：",(0,i.jsx)(n.code,{children:"'commonjs' | 'module'"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值：",(0,i.jsx)(n.code,{children:"'module'"})]}),"\n"]}),"\n",(0,i.jsxs)(n.h2,{id:"splitting",children:["splitting",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#splitting",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["是否开启代码分割。\n仅支持 ",(0,i.jsx)(n.a,{href:"#format-esm",children:"format: 'esm'"})," 和 ",(0,i.jsx)(n.a,{href:"#format-cjs",children:"format: 'cjs'"}),"，查看",(0,i.jsx)(n.a,{href:"https://esbuild.github.io/api/#splitting",target:"_blank",rel:"noopener noreferrer",children:"esbuild.splitting"}),"了解更多。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"false"})]}),"\n"]}),"\n",(0,i.jsxs)(n.h2,{id:"style",children:["style",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#style",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"配置样式相关的配置。"}),"\n",(0,i.jsxs)(n.h2,{id:"styleless",children:["style.less",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#styleless",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"less 相关配置。"}),"\n",(0,i.jsxs)(n.h2,{id:"stylelesslessoptions",children:["style.less.lessOptions",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#stylelesslessoptions",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["详细配置参考 ",(0,i.jsx)(n.a,{href:"https://less.bootcss.com/usage/#less-options",target:"_blank",rel:"noopener noreferrer",children:"less"}),"。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"object"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"{ javascriptEnabled: true }"})]}),"\n"]}),"\n",(0,i.jsxs)(n.h2,{id:"stylelessadditionaldata",children:["style.less.additionalData",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#stylelessadditionaldata",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["在入口文件起始添加 ",(0,i.jsx)(n.code,{children:"Less"})," 代码。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"undefined"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    style: {\n      less: {\n        additionalData: `@base-color: #c6538c;`,\n      },\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"stylelessimplementation",children:["style.less.implementation",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#stylelessimplementation",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["配置 ",(0,i.jsx)(n.code,{children:"Less"})," 使用的实现库，在不指定的情况下，使用的内置版本是 ",(0,i.jsx)(n.code,{children:"4.1.3"}),"。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"string | object"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"undefined"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["设置 ",(0,i.jsx)(n.code,{children:"object"})," 类型时，可以指定 ",(0,i.jsx)(n.code,{children:"Less"})," 的实现库。"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    style: {\n      less: {\n        implementation: require('less'),\n      },\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"string"})," 类型时，指定 ",(0,i.jsx)(n.code,{children:"Less"})," 的实现库的路径"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    style: {\n      less: {\n        implementation: require.resolve('less'),\n      },\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"sass",children:["sass",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#sass",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"Sass 相关配置。"}),"\n",(0,i.jsxs)(n.h2,{id:"stylesasssassoptions",children:["style.sass.sassOptions",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#stylesasssassoptions",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["详细配置参考 ",(0,i.jsx)(n.a,{href:"https://github.com/sass/node-sass#options",target:"_blank",rel:"noopener noreferrer",children:"node-sass"})]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"object"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"{}"})]}),"\n"]}),"\n",(0,i.jsxs)(n.h2,{id:"stylesassadditionaldata",children:["style.sass.additionalData",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#stylesassadditionaldata",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["在入口文件起始添加 ",(0,i.jsx)(n.code,{children:"Sass"})," 代码。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"string | Function"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"undefined"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    style: {\n      sass: {\n        additionalData: `$base-color: #c6538c;\n          $border-dark: rgba($base-color, 0.88);`,\n      },\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"stylesassimplementation",children:["style.sass.implementation",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#stylesassimplementation",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["配置 ",(0,i.jsx)(n.code,{children:"Sass"})," 使用的实现库，在不指定的情况下，使用的内置版本是 ",(0,i.jsx)(n.code,{children:"1.5.4"}),"。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"string | object"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"undefined"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["设置为 ",(0,i.jsx)(n.code,{children:"object"})," 类型时，可以指定 ",(0,i.jsx)(n.code,{children:"Sass"})," 的实现库。"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    style: {\n      sass: {\n        implementation: require('sass'),\n      },\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"string"})," 类型时，指定 ",(0,i.jsx)(n.code,{children:"Sass"})," 的实现库的路径"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    style: {\n      sass: {\n        implementation: require.resolve('sass'),\n      },\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"stylepostcss",children:["style.postcss",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#stylepostcss",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["用于配置 PostCSS 的选项，传入的值会与默认配置通过 ",(0,i.jsx)(n.code,{children:"Object.assign"})," 合并。注意 ",(0,i.jsx)(n.code,{children:"Object.assign"})," 是浅拷贝，因此会完全覆盖内置的 plugins 数组。"]}),"\n",(0,i.jsxs)(n.p,{children:["详细配置请查看 ",(0,i.jsx)(n.a,{href:"https://github.com/postcss/postcss#options",target:"_blank",rel:"noopener noreferrer",children:"PostCSS"}),"。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"类型："}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"type PostcssOptions = {\n  processOptions?: ProcessOptions;\n  plugins?: AcceptedPlugin[];\n};\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"默认值："}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"const defaultConfig = {\n  plugins: [\n    // 以下插件默认启用\n    require('postcss-flexbugs-fixes'),\n    require('postcss-media-minmax'),\n    require('postcss-nesting'),\n    // 以下插件仅在 target 为 `es5` 时启用\n    require('postcss-custom-properties'),\n    require('postcss-initial'),\n    require('postcss-page-break'),\n    require('postcss-font-variant'),\n  ],\n};\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"示例："}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    style: {\n      postcss: {\n        plugins: [yourPostCSSPlugin],\n      },\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"styleinject",children:["style.inject",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#styleinject",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"配置打包模式下是否将 CSS 样式插入到 JavaScript 代码中。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"false"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["将 ",(0,i.jsx)(n.code,{children:"inject"})," 设置为 ",(0,i.jsx)(n.code,{children:"true"})," 来开启此功能："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    style: {\n      inject: true,\n    },\n  },\n});\n"})}),"\n",(0,i.jsx)(n.p,{children:"开启后，你会看到源码中引用的 CSS 代码被包含在了打包后的 JS 产物中。"}),"\n",(0,i.jsxs)(n.p,{children:["例如，你在源码里写了 ",(0,i.jsx)(n.code,{children:"import './index.scss'"}),"，那么在产物中你会看到以下代码："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="dist/index.js"',children:"// node_modules/style-inject/dist/style-inject.es.js\nfunction styleInject(css, ref) {\n  // ...\n}\nvar style_inject_es_default = styleInject;\n\n// src/index.scss\nvar css_248z = '.body {\\n  color: black;\\n}';\nstyle_inject_es_default(css_248z);\n"})}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive tip",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"TIP"}),(0,i.jsxs)(n.div,{className:"rspress-directive-content",children:["\n",(0,i.jsxs)(n.p,{children:["开启 ",(0,i.jsx)(n.code,{children:"inject"})," 后，你需要注意以下几点："]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["CSS 文件中的 ",(0,i.jsx)(n.code,{children:"@import"})," 不会被处理。如果你的 CSS 文件中有 ",(0,i.jsx)(n.code,{children:"@import"})," ，那么你需要在 JS 文件中手动引入 CSS 文件（less,scss 文件不需要，因为它们会有预处理）。"]}),"\n",(0,i.jsxs)(n.li,{children:["需要考虑 ",(0,i.jsx)(n.code,{children:"sideEffects"})," 的影响。默认情况下，我们的构建器会认为 CSS 是有副作用的，如果你的项目中或者三方包的 package.json 设置了 ",(0,i.jsx)(n.code,{children:"sideEffects"})," 字段并且没有包含此 CSS 文件，那么你将会得到一个警告："]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:'[LIBUILD:ESBUILD_WARN] Ignoring this import because "src/index.scss" was marked as having no side effects by plugin "libuild:adapter"\n'})}),"\n",(0,i.jsxs)(n.p,{children:["此时可以通过配置 ",(0,i.jsx)(n.a,{href:"#sideeffects",children:"sideEffects"})," 来解决。"]}),"\n"]})]}),"\n",(0,i.jsxs)(n.h2,{id:"styleautomodules",children:["style.autoModules",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#styleautomodules",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"根据文件名自动启用 CSS Modules。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"boolean | RegExp"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"true"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"true"})," : 为以 ",(0,i.jsx)(n.code,{children:".module.css"})," ",(0,i.jsx)(n.code,{children:".module.less"})," ",(0,i.jsx)(n.code,{children:".module.scss"})," ",(0,i.jsx)(n.code,{children:".module.sass"})," 文件名结尾的样式文件启用 CSS Modules。"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"false"})," : 禁用 CSS Modules."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"RegExp"})," : 为匹配正则条件的所有文件启用 CSS Modules."]}),"\n",(0,i.jsxs)(n.h2,{id:"stylemodules",children:["style.modules",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#stylemodules",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"CSS Modules 配置。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"object"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"{}"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["一个常用的配置是 ",(0,i.jsx)(n.code,{children:"localsConvention"}),"，它可以改变 CSS Modules 的类名生成规则。"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    style: {\n      modules: {\n        localsConvention: 'camelCaseOnly',\n      },\n    },\n  },\n});\n"})}),"\n",(0,i.jsx)(n.p,{children:"对于以下样式："}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",children:".box-title {\n  color: red;\n}\n"})}),"\n",(0,i.jsxs)(n.p,{children:["你可以使用 ",(0,i.jsx)(n.code,{children:"styles.boxTitle"})," 来访问。"]}),"\n",(0,i.jsxs)(n.p,{children:["详细配置查看 ",(0,i.jsx)(n.a,{href:"https://github.com/madyankin/postcss-modules#usage",target:"_blank",rel:"noopener noreferrer",children:"postcss-modules"})]}),"\n",(0,i.jsxs)(n.h2,{id:"styletailwindcss",children:["style.tailwindcss",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#styletailwindcss",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["用于修改 ",(0,i.jsx)(n.a,{href:"https://tailwindcss.com/docs/configuration",target:"_blank",rel:"noopener noreferrer",children:"Tailwind CSS"})," 的配置项。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"object | Function"})]}),"\n",(0,i.jsx)(n.li,{children:"默认值："}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"const tailwind = {\n  content: ['./src/**/*.{js,jsx,ts,tsx}', './config/html/**/*.{html,ejs,hbs}'],\n};\n"})}),"\n",(0,i.jsxs)(n.h3,{id:"启用-tailwind-css",children:["启用 Tailwind CSS",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#启用-tailwind-css",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["在使用 ",(0,i.jsx)(n.code,{children:"style.tailwindcss"})," 之前，你需要启用 Modern.js Module 的 Tailwind CSS 插件。"]}),"\n",(0,i.jsxs)(n.p,{children:["请阅读",(0,i.jsx)(n.a,{href:"/guide/best-practices/use-tailwindcss.html",children:"「使用 Tailwind CSS」"})," 章节来了解开启方式。"]}),"\n",(0,i.jsxs)(n.h3,{id:"类型",children:["类型",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#类型",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["值为 ",(0,i.jsx)(n.code,{children:"object"})," 类型时，与默认配置通过 ",(0,i.jsx)(n.code,{children:"Object.assign"})," 合并。"]}),"\n",(0,i.jsxs)(n.p,{children:["值为 ",(0,i.jsx)(n.code,{children:"Function"})," 类型时，函数返回的对象与默认配置通过 ",(0,i.jsx)(n.code,{children:"Object.assign"})," 合并。"]}),"\n",(0,i.jsxs)(n.p,{children:["其他的使用方式和 Tailwind CSS 一致: ",(0,i.jsx)(n.a,{href:"https://tailwindcss.com/docs/configuration",target:"_blank",rel:"noopener noreferrer",children:"快速传送门"}),"。"]}),"\n",(0,i.jsxs)(n.h3,{id:"注意事项",children:["注意事项",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#注意事项",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"注意："}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["如果你同时使用了 ",(0,i.jsx)(n.code,{children:"tailwind.config.{ts,js}"})," 文件和 ",(0,i.jsx)(n.code,{children:"tools.tailwindcss"})," 选项，那么 ",(0,i.jsx)(n.code,{children:"tools.tailwindcss"})," 定义的配置会优先生效，并覆盖 ",(0,i.jsx)(n.code,{children:"tailwind.config.{ts,js}"})," 中定义的内容。"]}),"\n",(0,i.jsxs)(n.li,{children:["如果你同时使用了 ",(0,i.jsx)(n.code,{children:"designSystem"})," 配置项，那么 Tailwind CSS 的 ",(0,i.jsx)(n.code,{children:"theme"})," 配置将会被 ",(0,i.jsx)(n.code,{children:"designSystem"})," 的值所覆盖。"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["其他配置的使用方式与 Tailwind CSS 官方用法一致，请参考 ",(0,i.jsx)(n.a,{href:"https://tailwindcss.com/docs/configuration",target:"_blank",rel:"noopener noreferrer",children:"tailwindcss - Configuration"}),"。"]}),"\n",(0,i.jsxs)(n.h2,{id:"target",children:["target",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#target",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"target"})," 用于为生成的 JavaScript 代码设置目标环境。它让 Modern.js Module 将目标环境无法识别的 JavaScript 语法转换为在这些环境中可用的低版本 JavaScript 语法。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"类型："}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"type Target =\n  | 'es5'\n  | 'es6'\n  | 'es2015'\n  | 'es2016'\n  | 'es2017'\n  | 'es2018'\n  | 'es2019'\n  | 'es2020'\n  | 'es2021'\n  | 'es2022'\n  | 'esnext';\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"'es6'"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["例如，将代码编译到 ",(0,i.jsx)(n.code,{children:"es5"})," 语法："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    target: 'es5',\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"transformimport",children:["transformImport",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#transformimport",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"提供与 babel-plugin-import 等价的能力和配置，基于 SWC 实现，使用此配置，将会使用 SWC 对代码进行转换。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型：",(0,i.jsx)(n.code,{children:"object[]"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值：",(0,i.jsx)(n.code,{children:"[]"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["数组元素为一个 babel-plugin-import 的配置对象。配置对象可以参考 ",(0,i.jsx)(n.a,{href:"https://github.com/umijs/babel-plugin-import#options",target:"_blank",rel:"noopener noreferrer",children:"options"}),"。"]}),"\n",(0,i.jsx)(n.p,{children:"使用示例："}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    transformImport: [\n      // babel-plugin-import 的 options 配置\n      {\n        libraryName: 'foo',\n        style: true,\n      },\n    ],\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["参考",(0,i.jsx)(n.a,{href:"/plugins/official-list/plugin-import.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9",children:"「Import 插件——注意事项」"})]}),"\n",(0,i.jsxs)(n.h2,{id:"transformlodash",children:["transformLodash",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#transformlodash",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["是否模块化 ",(0,i.jsx)(n.a,{href:"https://www.npmjs.com/package/lodash",target:"_blank",rel:"noopener noreferrer",children:"lodash"})," 的导入，删除未使用的 lodash 模块，从而减少 lodash 代码体积。这项优化基于 ",(0,i.jsx)(n.a,{href:"https://www.npmjs.com/package/babel-plugin-lodash",target:"_blank",rel:"noopener noreferrer",children:"babel-plugin-lodash"})," 和 ",(0,i.jsx)(n.a,{href:"https://github.com/web-infra-dev/swc-plugins/tree/main/crates/plugin_lodash",target:"_blank",rel:"noopener noreferrer",children:"swc-plugin-lodash"})," 实现。\n使用此配置，将会使用 SWC 对代码进行转换。"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型：",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值：",(0,i.jsx)(n.code,{children:"false"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"当开启此选项时，Modern.js Module 会自动将 lodash 的代码引用指向子路径。"}),"\n",(0,i.jsx)(n.p,{children:"比如："}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",meta:'title="input.js"',children:"import _ from 'lodash';\nimport { add } from 'lodash/fp';\n\nconst addOne = add(1);\n_.map([1, 2, 3], addOne);\n"})}),"\n",(0,i.jsx)(n.p,{children:"转换后的代码："}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",meta:'title="output.js"',children:"import _add from 'lodash/fp/add';\nimport _map from 'lodash/map';\n\nconst addOne = _add(1);\n_map([1, 2, 3], addOne);\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"tsconfig",children:["tsconfig",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#tsconfig",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"TypeScript 配置文件的路径。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"tsconfig.json"})]}),"\n",(0,i.jsxs)(n.li,{children:["版本： ",(0,i.jsx)(n.code,{children:">=2.36.0"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    tsconfig: 'tsconfig.build.json',\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"umdglobals",children:["umdGlobals",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#umdglobals",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"指定 UMD 产物外部导入的全局变量。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"Record<string, string>"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"{}"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    umdGlobals: {\n      react: 'React',\n      'react-dom': 'ReactDOM',\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["此时，",(0,i.jsx)(n.code,{children:"react"})," 和 ",(0,i.jsx)(n.code,{children:"react-dom"})," 会被看做是外部导入的全局变量，不会被打包进 UMD 产物中，而是通过 ",(0,i.jsx)(n.code,{children:"global.React"})," 和 ",(0,i.jsx)(n.code,{children:"global.ReactDOM"})," 的方式进行访问。"]}),"\n",(0,i.jsxs)(n.h2,{id:"umdmodulename",children:["umdModuleName",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#umdmodulename",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"指定 UMD 产物的模块名。"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["类型： ",(0,i.jsx)(n.code,{children:"string | Function"})]}),"\n",(0,i.jsxs)(n.li,{children:["默认值： ",(0,i.jsx)(n.code,{children:"name => name"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    format: 'umd',\n    umdModuleName: 'myLib',\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["此时 UMD 产物会去挂载到 ",(0,i.jsx)(n.code,{children:"global.myLib"})," 上。"]}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive tip",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"TIP"}),(0,i.jsxs)(n.div,{className:"rspress-directive-content",children:["\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"需要遵守 UMD 规范，UMD 产物的模块名不能和全局变量名冲突。"}),"\n",(0,i.jsxs)(n.li,{children:["模块名会被转换为驼峰命名，如 ",(0,i.jsx)(n.code,{children:"my-lib"})," 会被转换为 ",(0,i.jsx)(n.code,{children:"myLib"}),"，可参考",(0,i.jsx)(n.a,{href:"https://github.com/babel/babel/blob/main/packages/babel-types/src/converters/toIdentifier.ts",target:"_blank",rel:"noopener noreferrer",children:"toIdentifier"}),"。"]}),"\n"]}),"\n"]})]}),"\n",(0,i.jsx)(n.p,{children:"同时函数形式可以接收一个参数，为当前打包文件的输出路径"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    format: 'umd',\n    umdModuleName: path => {\n      if (path.includes('index')) {\n        return 'myLib';\n      } else {\n        return 'myLib2';\n      }\n    },\n  },\n});\n```import { aliases } from '../../../../../../toolkit/utils/dist/compiled/browserslist';\nimport { createElement } from 'react';\n\n"})})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,d.ah)(),e.components);return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(r,{...e})}):r(e)}let c=l;l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["zh%2Fapi%2Fconfig%2Fbuild-config.mdx"]={toc:[{text:"alias",id:"alias",depth:2},{text:"asset",id:"asset",depth:2},{text:"asset.name",id:"assetname",depth:2},{text:"asset.limit",id:"assetlimit",depth:2},{text:"asset.path",id:"assetpath",depth:2},{text:"asset.publicPath",id:"assetpublicpath",depth:2},{text:"asset.svgr",id:"assetsvgr",depth:2},{text:"asset.svgr.include",id:"assetsvgrinclude",depth:2},{text:"asset.svgr.exclude",id:"assetsvgrexclude",depth:2},{text:"asset.svgr.exportType",id:"assetsvgrexporttype",depth:2},{text:"autoExtension",id:"autoextension",depth:2},{text:"autoExternal",id:"autoexternal",depth:2},{text:"autoExternal.dependencies",id:"autoexternaldependencies",depth:2},{text:"autoExternal.peerDependencies",id:"autoexternalpeerdependencies",depth:2},{text:"banner",id:"banner",depth:2},{text:"buildType",id:"buildtype",depth:2},{text:"copy",id:"copy",depth:2},{text:"copy.patterns",id:"copypatterns",depth:2},{text:"copy.options",id:"copyoptions",depth:2},{text:"define",id:"define",depth:2},{text:"dts",id:"dts",depth:2},{text:"dts.abortOnError",id:"dtsabortonerror",depth:2},{text:"dts.distPath",id:"dtsdistpath",depth:2},{text:"dts.enableTscBuild",id:"dtsenabletscbuild",depth:2},{text:"dts.only",id:"dtsonly",depth:2},{text:"dts.respectExternal",id:"dtsrespectexternal",depth:2},{text:"dts.tsconfigPath",id:"dtstsconfigpath",depth:2},{text:"esbuildOptions",id:"esbuildoptions",depth:2},{text:"externalHelpers",id:"externalhelpers",depth:2},{text:"externals",id:"externals",depth:2},{text:"footer",id:"footer",depth:2},{text:"format",id:"format",depth:2},{text:"format: esm",id:"format-esm",depth:3},{text:"format: cjs",id:"format-cjs",depth:3},{text:"format: iife",id:"format-iife",depth:3},{text:"format: umd",id:"format-umd",depth:3},{text:"hooks",id:"hooks",depth:2},{text:"input",id:"input",depth:2},{text:"jsx",id:"jsx",depth:2},{text:"loader",id:"loader",depth:2},{text:"metafile",id:"metafile",depth:2},{text:"minify",id:"minify",depth:2},{text:"outDir",id:"outdir",depth:2},{text:"platform",id:"platform",depth:2},{text:"redirect",id:"redirect",depth:2},{text:"resolve",id:"resolve",depth:2},{text:"resolve.alias",id:"resolvealias",depth:3},{text:"resolve.mainFields",id:"resolvemainfields",depth:3},{text:"resolve.jsExtentions",id:"resolvejsextentions",depth:3},{text:"shims",id:"shims",depth:2},{text:"sideEffects",id:"sideeffects",depth:2},{text:"sourceDir",id:"sourcedir",depth:2},{text:"sourceMap",id:"sourcemap",depth:2},{text:"sourceType",id:"sourcetype",depth:2},{text:"splitting",id:"splitting",depth:2},{text:"style",id:"style",depth:2},{text:"style.less",id:"styleless",depth:2},{text:"style.less.lessOptions",id:"stylelesslessoptions",depth:2},{text:"style.less.additionalData",id:"stylelessadditionaldata",depth:2},{text:"style.less.implementation",id:"stylelessimplementation",depth:2},{text:"sass",id:"sass",depth:2},{text:"style.sass.sassOptions",id:"stylesasssassoptions",depth:2},{text:"style.sass.additionalData",id:"stylesassadditionaldata",depth:2},{text:"style.sass.implementation",id:"stylesassimplementation",depth:2},{text:"style.postcss",id:"stylepostcss",depth:2},{text:"style.inject",id:"styleinject",depth:2},{text:"style.autoModules",id:"styleautomodules",depth:2},{text:"style.modules",id:"stylemodules",depth:2},{text:"style.tailwindcss",id:"styletailwindcss",depth:2},{text:"启用 Tailwind CSS",id:"启用-tailwind-css",depth:3},{text:"类型",id:"类型",depth:3},{text:"注意事项",id:"注意事项",depth:3},{text:"target",id:"target",depth:2},{text:"transformImport",id:"transformimport",depth:2},{text:"transformLodash",id:"transformlodash",depth:2},{text:"tsconfig",id:"tsconfig",depth:2},{text:"umdGlobals",id:"umdglobals",depth:2},{text:"umdModuleName",id:"umdmodulename",depth:2}],title:"buildConfig",frontmatter:{sidebar_position:1}}}}]);

package/doc_build/static/js/async/2300.cba0106e.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["2300"],{561:function(e,n,r){r.r(n),r.d(n,{default:function(){return a}});var s=r(8093),i=r(5878),d=r(8078);function l(e){let n=Object.assign({h1:"h1",a:"a",p:"p",div:"div",code:"code",h2:"h2",h3:"h3",pre:"pre",ul:"ul",li:"li",strong:"strong"},(0,i.ah)(),e.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.h1,{id:"banner-插件",children:["Banner 插件",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#banner-插件",children:"#"})]}),"\n",(0,s.jsx)(n.p,{children:"提供为每个 JS 和 CSS 文件的顶部和底部注入内容的能力。"}),"\n",(0,s.jsxs)(n.div,{className:"rspress-directive tip",children:[(0,s.jsx)(n.div,{className:"rspress-directive-title",children:"TIP"}),(0,s.jsx)(n.div,{className:"rspress-directive-content",children:(0,s.jsxs)(n.p,{children:["从 ",(0,s.jsx)(n.code,{children:"@modern-js/module-tools"})," 2.36.0 版本开始，该插件功能内置在 Modern.js Module 中，由 ",(0,s.jsx)(n.a,{href:"/api/config/build-config#banner",children:(0,s.jsx)(n.code,{children:"banner"})})," 和 ",(0,s.jsx)(n.a,{href:"/api/config/build-config#footer",children:(0,s.jsx)(n.code,{children:"footer"})}),"\n配置提供。\n"]})})]}),"\n",(0,s.jsxs)(n.h2,{id:"快速开始",children:["快速开始",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#快速开始",children:"#"})]}),"\n",(0,s.jsxs)(n.h3,{id:"安装",children:["安装",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#安装",children:"#"})]}),"\n","\n",(0,s.jsx)(d.SU,{command:"add @modern-js/plugin-module-banner -D"}),"\n",(0,s.jsxs)(n.h3,{id:"注册插件",children:["注册插件",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#注册插件",children:"#"})]}),"\n",(0,s.jsx)(n.p,{children:"在 Modern.js Module 中，你可以按照如下方式注册插件："}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\nimport { modulePluginBanner } from '@modern-js/plugin-module-banner';\n\nexport default defineConfig({\n  plugins: [\n    moduleTools(),\n    modulePluginBanner({\n      banner: {\n        js: '//comment',\n        css: '/*comment*/',\n      },\n    }),\n  ],\n});\n"})}),"\n",(0,s.jsxs)(n.div,{className:"rspress-directive tip",children:[(0,s.jsx)(n.div,{className:"rspress-directive-title",children:"TIP"}),(0,s.jsx)(n.div,{className:"rspress-directive-content",children:(0,s.jsxs)(n.p,{children:["注意：CSS 的注释不支持 ",(0,s.jsx)(n.code,{children:"//comment"})," 这样的写法。详见",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/zh-CN/docs/Web/CSS/Comments",target:"_blank",rel:"noopener noreferrer",children:"「CSS 注释」"}),"\n"]})})]}),"\n",(0,s.jsxs)(n.h2,{id:"示例",children:["示例",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#示例",children:"#"})]}),"\n",(0,s.jsxs)(n.h3,{id:"在-js-文件顶部增加版权信息",children:["在 JS 文件顶部增加版权信息",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#在-js-文件顶部增加版权信息",children:"#"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import { modulePluginBanner } from '@modern-js/plugin-module-banner';\nimport { moduleTools, defineConfig } from '@modern-js/module-tools';\n\nconst copyRight = `/*\n \xa9 Copyright 2020 example.com or one of its affiliates.\n * Some Sample Copyright Text Line\n * Some Sample Copyright Text Line\n * Some Sample Copyright Text Line\n * Some Sample Copyright Text Line\n * Some Sample Copyright Text Line\n * Some Sample Copyright Text Line\n*/`;\n\nexport default defineConfig({\n  plugins: [\n    moduleTools(),\n    modulePluginBanner({\n      banner: {\n        js: copyRight,\n      },\n    }),\n  ],\n});\n"})}),"\n",(0,s.jsxs)(n.h2,{id:"配置",children:["配置",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#配置",children:"#"})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.strong,{children:"类型："})}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type BannerOptions = {\n  banner: {\n    js?: string;\n    css?: string;\n  };\n  footer?: {\n    js?: string;\n    css?: string;\n  };\n};\n"})}),"\n",(0,s.jsxs)(n.h3,{id:"banner",children:["banner",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#banner",children:"#"})]}),"\n",(0,s.jsx)(n.p,{children:"在顶部增加内容。"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"banner.js"}),"：在 JS 文件顶部增加内容。"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"banner.css"}),"：在 CSS 文件顶部增加内容。"]}),"\n"]}),"\n",(0,s.jsxs)(n.h3,{id:"footer",children:["footer",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#footer",children:"#"})]}),"\n",(0,s.jsx)(n.p,{children:"在底部增加内容。"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer.js"}),"：在 JS 文件底部增加内容。"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer.css"}),"：在 CSS 文件底部增加内容。"]}),"\n"]})]})}function o(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,i.ah)(),e.components);return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}let a=o;o.__RSPRESS_PAGE_META={},o.__RSPRESS_PAGE_META["zh%2Fplugins%2Fofficial-list%2Fplugin-banner.mdx"]={toc:[{text:"快速开始",id:"快速开始",depth:2},{text:"安装",id:"安装",depth:3},{text:"注册插件",id:"注册插件",depth:3},{text:"示例",id:"示例",depth:2},{text:"在 JS 文件顶部增加版权信息",id:"在-js-文件顶部增加版权信息",depth:3},{text:"配置",id:"配置",depth:2},{text:"banner",id:"banner",depth:3},{text:"footer",id:"footer",depth:3}],title:"Banner 插件",frontmatter:{}}}}]);

package/doc_build/static/js/async/2347.a480682f.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["2347"],{162:function(e,n,r){r.r(n),r.d(n,{default:function(){return t}});var s=r(8093),d=r(5878);function o(e){let n=Object.assign({h1:"h1",a:"a",p:"p",h2:"h2",code:"code",pre:"pre",ul:"ul",li:"li",em:"em",div:"div"},(0,d.ah)(),e.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.h1,{id:"cli-commands",children:["CLI Commands",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#cli-commands",children:"#"})]}),"\n",(0,s.jsx)(n.p,{children:"CLI Commands available for Modern.js Module projects are as follows:"}),"\n",(0,s.jsxs)(n.h2,{id:"modern-build",children:[(0,s.jsx)(n.code,{children:"modern build"}),(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#modern-build",children:"#"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:'Usage: modern build [options]\n\nBuild module command\n\nOptions:\n  -w, --watch Enable watch mode to listen for changes on the fs and automatically rebuild\n  --tsconfig [tsconfig] Specify the path to the tsconfig.json file (default:\n                         ". /tsconfig.json")\n  --platform [platform] Build artifacts for all or specified platforms\n  --no-dts disables DTS type file generation and type checking\n  --no-clear disables automatic clearing of output directories\n  -c, --config <config>  Specify the path to the config file (default: "modern.config.j(t)s")\n  -h, --help Show information about the current command\n'})}),"\n",(0,s.jsxs)(n.p,{children:["Modern.js Module supports the ",(0,s.jsx)(n.code,{children:"platform"})," build mode, which can be used to execute build tasks of other tools. Currently, the official support includes ",(0,s.jsx)(n.a,{href:"https://rspress.dev/",target:"_blank",rel:"noopener noreferrer",children:"Rspress"}),". For example, you can start the doc build task to generate doc products by executing the ",(0,s.jsx)(n.code,{children:"modern build --platform"})," commands."]}),"\n",(0,s.jsxs)(n.h2,{id:"modern-new",children:[(0,s.jsx)(n.code,{children:"modern new"}),(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#modern-new",children:"#"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"Usage: modern new [options]\n\nExecute the generator in a modular project scenario\n\nOptions:\n  -d, --debug Enable Debug mode, print debug log messages (default: false)\n  -c, --config <config> Generators run default configuration (JSON string)\n  --dist-tag <tag> Generator uses a special version of npm Tag\n  --registry customize npm Registry during generator runtime\n  -h, --help display help for command\n"})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"modern new"})," command is used to start the microgenerator functionality, which enables features for the project that are not provided by default."]}),"\n",(0,s.jsx)(n.p,{children:"The following features can currently be enabled."}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"Storybook V7"}),"\n",(0,s.jsx)(n.li,{children:"Tailwind CSS support"}),"\n",(0,s.jsx)(n.li,{children:"Modern.js Runtime API"}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["You can learn more about these features in the ",(0,s.jsx)(n.a,{href:"/guide/basic/use-micro-generator",children:"Using the micro generator"})," section."]}),"\n",(0,s.jsxs)(n.h2,{id:"modern-dev",children:[(0,s.jsx)(n.code,{children:"modern dev"}),(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#modern-dev",children:"#"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"Usage: modern dev [options]\n\nLocal development commands\n\nOptions:\n  -h, --help display help for command\n\nCommands:\n[dev-tools-subCommand]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["The Modern.js Module provides the ability to use debugging tools, which can be started with the ",(0,s.jsx)(n.code,{children:"modern dev"})," command. Note, however, that no debugging-related plugins are provided by default, so executing ",(0,s.jsx)(n.code,{children:"modern dev"})," will prompt: ",(0,s.jsx)(n.em,{children:'"No dev tools found available "'}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["The officially supported debugging tool is ",(0,s.jsx)(n.a,{href:"https://rspress.dev/",target:"_blank",rel:"noopener noreferrer",children:"Rspress"}),", so you can run ",(0,s.jsx)(n.code,{children:"modern dev"})," or ",(0,s.jsx)(n.code,{children:"modern dev doc"})," to execute it after you run ",(0,s.jsx)(n.code,{children:"modern new"})," to enable it."]}),"\n",(0,s.jsxs)(n.h2,{id:"modern-change",children:[(0,s.jsx)(n.code,{children:"modern change"}),(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#modern-change",children:"#"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"Usage: modern change [options]\n\nCreate a changeset\n\nOptions:\n  --empty Create an empty changeset (default: false)\n  --open Open the created changeset in the editor (default: false)\n  -h, --help display help for command\n"})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"modern change"})," command is used to generate the required Markdown file for ",(0,s.jsx)(n.a,{href:"https://github.com/changesets/changesets",target:"_blank",rel:"noopener noreferrer",children:"changesets"}),"."]}),"\n",(0,s.jsxs)(n.h2,{id:"modern-pre",children:[(0,s.jsx)(n.code,{children:"modern pre"}),(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#modern-pre",children:"#"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"Usage: modern pre [options] <enter|exit> [tag]\n\nEntering and exiting pre-publishing mode\n\nOptions:\n  -h, --help display help for command\n"})}),"\n",(0,s.jsxs)(n.p,{children:["You can use the ",(0,s.jsx)(n.code,{children:"modern pre"})," command to ",(0,s.jsx)(n.a,{href:"https://github.com/atlassian/changesets/blob/main/docs/prereleases.md",target:"_blank",rel:"noopener noreferrer",children:"pre-release"})," a version before the official release."]}),"\n",(0,s.jsxs)(n.h2,{id:"modern-bump",children:[(0,s.jsx)(n.code,{children:"modern bump"}),(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#modern-bump",children:"#"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:'Usage: modern bump [options]\n\nUse changesets to automatically update releases and changelogs\n\nOptions:\n  --canary Create a pre-release for testing (default: false)\n  --preid <tag> Specify an identifier when versioning a pre-release (default: "next")\n  --snapshot Create a special version for testing (default: false)\n  -h, --help display help for command\n'})}),"\n",(0,s.jsxs)(n.p,{children:["Modify the version number in ",(0,s.jsx)(n.code,{children:"package.json"})," according to the Markdown file of the changelog generated by ",(0,s.jsx)(n.a,{href:"https://github.com/changesets/changesets",target:"_blank",rel:"noopener noreferrer",children:"changesets"}),", and generate the ",(0,s.jsx)(n.code,{children:"CHANGELOG.md"})," file."]}),"\n",(0,s.jsxs)(n.h2,{id:"modern-release",children:[(0,s.jsx)(n.code,{children:"modern release"}),(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#modern-release",children:"#"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:'Usage: modern release [options]\n\nRelease npm packages\n\nOptions:\n  --tag <tag> Release npm packages with a specific tag (default: "")\n  --ignore-scripts release ignores the scripts command in package.json, only supported in pnpm monorepo\n                    (default: "")\n  -h, --help display help for command\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"-modern release"})," command releases the module to the ",(0,s.jsx)(n.a,{href:"https://www.npmjs.com/",target:"_blank",rel:"noopener noreferrer",children:"npm Registry"}),"."]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["The ",(0,s.jsx)(n.code,{children:"-tag"})," argument specifies the specific ",(0,s.jsx)(n.a,{href:"https://docs.npmjs.com/adding-dist-tags-to-packages",target:"_blank",rel:"noopener noreferrer",children:"dist tags"})," to be used for the release."]}),"\n"]}),"\n",(0,s.jsxs)(n.h2,{id:"modern-gen-release-note",children:[(0,s.jsx)(n.code,{children:"modern gen-release-note"}),(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#modern-gen-release-note",children:"#"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"Usage: modern gen-release-note [options]\n\nGenerate Release Note based on current repository changeset information\n\nOptions:\n  --repo <repo> The name of the repository to generate the Pull Request link, e.g.: web-infra-dev/modern.js\n  --custom <cumtom> Custom Release Note generation function\n  -h, --help display help for command\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Automatically generate ",(0,s.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/Release_notes",target:"_blank",rel:"noopener noreferrer",children:"Release Note"})," based on the changeset information of the current repository."]}),"\n",(0,s.jsxs)(n.div,{className:"rspress-directive tip",children:[(0,s.jsx)(n.div,{className:"rspress-directive-title",children:"TIP"}),(0,s.jsx)(n.div,{className:"rspress-directive-content",children:(0,s.jsxs)(n.p,{children:["needs to be executed before the ",(0,s.jsx)(n.code,{children:"bump"})," command.\n"]})})]}),"\n",(0,s.jsxs)(n.h2,{id:"modern-upgrade",children:[(0,s.jsx)(n.code,{children:"modern upgrade"}),(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#modern-upgrade",children:"#"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:'Usage: modern upgrade [options]\n\nUpgrade Modern.js to the latest version\n\nOptions:\n  --registry <registry> customize npm registry (default: "")\n  -d,--debug Enable Debug mode to print debug log messages (default: false)\n  --cwd <cwd> project path (default: "")\n  -h, --help display help for command\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"modern upgrade"})," command is used to upgrade the project Modern.js related dependencies to the latest version."]}),"\n",(0,s.jsxs)(n.p,{children:["Executing the command ",(0,s.jsx)(n.code,{children:"npx modern upgrade"})," in the project root directory will update the Modern.js dependencies in ",(0,s.jsx)(n.code,{children:"package.json"})," of the currently executing project to the latest version by default."]})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,d.ah)(),e.components);return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(o,{...e})}):o(e)}let t=a;a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["en%2Fguide%2Fbasic%2Fcommand-preview.md"]={toc:[{text:"`modern build`",id:"modern-build",depth:2},{text:"`modern new`",id:"modern-new",depth:2},{text:"`modern dev`",id:"modern-dev",depth:2},{text:"`modern change`",id:"modern-change",depth:2},{text:"`modern pre`",id:"modern-pre",depth:2},{text:"`modern bump`",id:"modern-bump",depth:2},{text:"`modern release`",id:"modern-release",depth:2},{text:"`modern gen-release-note`",id:"modern-gen-release-note",depth:2},{text:"`modern upgrade`",id:"modern-upgrade",depth:2}],title:"CLI Commands",frontmatter:{sidebar_position:2}}}}]);

package/doc_build/static/js/async/2365.daed0a9c.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["2365"],{8539:function(e,n,d){d.r(n),d.d(n,{default:function(){return o}});var s=d(8093),r=d(5878),i=d(8078);function l(e){let n=Object.assign({h1:"h1",a:"a",h2:"h2",p:"p",strong:"strong",h3:"h3",pre:"pre",code:"code",div:"div",blockquote:"blockquote",ul:"ul",li:"li"},(0,r.ah)(),e.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.h1,{id:"快速开始",children:["快速开始",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#快速开始",children:"#"})]}),"\n",(0,s.jsxs)(n.h2,{id:"三分钟快速上手",children:["三分钟快速上手",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#三分钟快速上手",children:"#"})]}),"\n",(0,s.jsxs)(n.p,{children:["想要实际体验 Modern.js Module？首先你需要安装 ",(0,s.jsx)(n.a,{href:"https://github.com/nodejs/Release",target:"_blank",rel:"noopener noreferrer",children:"Node.js LTS"}),"，并确保 Node 版本大于等于 ",(0,s.jsx)(n.strong,{children:"16.0.0"}),"。我们推荐使用 Node.js 18 的 LTS 版本。"]}),"\n",(0,s.jsxs)(n.h3,{id:"创建新项目",children:["创建新项目",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#创建新项目",children:"#"})]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"如果你想要创建一个完整的 Modern.js Module 项目，可以执行以下命令："})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npx @modern-js/create your-project-dir-name\n"})}),"\n",(0,s.jsxs)(n.div,{className:"rspress-directive info",children:[(0,s.jsx)(n.div,{className:"rspress-directive-title",children:"INFO"}),(0,s.jsx)(n.div,{className:"rspress-directive-content",children:(0,s.jsxs)(n.p,{children:["执行 ",(0,s.jsx)(n.code,{children:"npx @modern-js/create -h"})," 查看更多命令行参数\n"]})})]}),"\n",(0,s.jsx)(n.p,{children:"接着在问题交互中，按照如下选择："}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"? 请选择你想创建的工程类型：Npm 模块\n? 请填写项目名称：library\n? 请选择开发语言：TS\n? 请选择包管理工具：pnpm\n"})}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["项目名称为 ",(0,s.jsx)(n.code,{children:"package.json"})," 中的 ",(0,s.jsx)(n.code,{children:'"name"'})," 字段值。"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"接着就会开始初始化项目的流程。在项目目录和文件生成以及依赖安装完毕后，此时就创建了一个完整的 Modern.js Module 项目。"}),"\n",(0,s.jsxs)(n.p,{children:["我们可以直接执行 ",(0,s.jsx)(n.code,{children:"pnpm build"})," 命令启动项目的构建，执行 ",(0,s.jsx)(n.code,{children:"pnpm build --watch"})," 命令开启构建的观察模式。"]}),"\n",(0,s.jsxs)(n.h3,{id:"接入已有项目",children:["接入已有项目",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#接入已有项目",children:"#"})]}),"\n",(0,s.jsx)(n.p,{children:"在你的项目里安装以下依赖："}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:'"@modern-js/module-tools"'})}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"typescript"'}),"（如果不是 TypeScript 项目，则省略）"]}),"\n"]}),"\n","\n",(0,s.jsx)(i.SU,{command:"add @modern-js/module-tools typescript -D"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["对于使用 pnpm 或者 Yarn 包管理器的项目，只需要替换 npm 就可以了。",(0,s.jsx)(n.strong,{children:"推荐使用 pnpm"}),"。"]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["接着在项目的根目录下创建 ",(0,s.jsx)(n.code,{children:"modern.config.(t|j)s"})," 文件："]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\n\nexport default defineConfig({\n  plugins: [moduleTools()],\n});\n"})}),"\n",(0,s.jsxs)(n.p,{children:["最后在项目的 ",(0,s.jsx)(n.code,{children:"package.json"})," 文件里增加命令 ",(0,s.jsx)(n.code,{children:'"build": "modern build"'}),"："]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-json",children:'{\n  "scripts": {\n    "build": "modern build"\n  }\n}\n'})}),"\n",(0,s.jsxs)(n.p,{children:["如果你的项目存在 ",(0,s.jsx)(n.code,{children:"src/index.(js|jsx)"})," 文件或者同时存在 ",(0,s.jsx)(n.code,{children:"src/index.(ts|tsx)"})," 和 ",(0,s.jsx)(n.code,{children:"tsconfig.json"})," 文件，那么恭喜你可以运行直接运行 ",(0,s.jsx)(n.code,{children:"npm run build"})," 来使用 Modern.js Module 构建你的项目了。"]}),"\n",(0,s.jsxs)(n.h3,{id:"核心-npm-包",children:["核心 npm 包",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#核心-npm-包",children:"#"})]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"@modern-js/module-tools"})," 是 Modern.js Module 的核心 npm 包，主要提供以下能力："]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["提供 ",(0,s.jsx)(n.code,{children:"modern dev"}),", ",(0,s.jsx)(n.code,{children:"modern build"})," 等常用的 CLI 命令。"]}),"\n",(0,s.jsx)(n.li,{children:"集成 Modern.js Core，提供配置解析、插件加载等能力。"}),"\n",(0,s.jsx)(n.li,{children:"集成 esbuild 和 SWC，提供构建能力。"}),"\n",(0,s.jsxs)(n.li,{children:["集成一些最为常用的插件，比如 ",(0,s.jsx)(n.code,{children:"plugin-lint"}),"、",(0,s.jsx)(n.code,{children:"plugin-changeset"})," 等。"]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"@modern-js/module-tools"})," 是基于 Modern.js 的插件体系实现的，本质上是一个插件，因此你需要在配置文件的 ",(0,s.jsx)(n.code,{children:"plugins"})," 字段中注册 ",(0,s.jsx)(n.code,{children:"moduleTools"}),"："]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\n\nexport default defineConfig({\n  plugins: [moduleTools()],\n});\n"})}),"\n",(0,s.jsxs)(n.h3,{id:"查看官方示例",children:["查看官方示例",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#查看官方示例",children:"#"})]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"如果你想要看看使用了 Modern.js Module 的完整项目，可以执行以下命令"}),"："]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"git clone https://github.com/web-infra-dev/modern-js-examples\ncd modern-js-examples/examples/basic-module\n\n## 执行构建：\npnpm build\n\n## 监听模式执行构建：\npnpm build --watch\n"})}),"\n",(0,s.jsxs)(n.h2,{id:"让我们开始吧",children:["让我们开始吧",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#让我们开始吧",children:"#"})]}),"\n",(0,s.jsx)(n.p,{children:"选择适合你的教程："}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["我是初学者，需要学习 Modern.js Module 的",(0,s.jsx)(n.a,{href:"/guide/basic/before-getting-started",children:"基础使用"}),"。"]}),"\n",(0,s.jsxs)(n.li,{children:["我已经初步掌握了 Modern.js Module 的使用，可以学习 Modern.js Module 的",(0,s.jsx)(n.a,{href:"/guide/advance/in-depth-about-build",children:"进阶指南"}),"。"]}),"\n",(0,s.jsxs)(n.li,{children:["我需要扩展项目能力，需要学习如何开发 Modern.js Module 的",(0,s.jsx)(n.a,{href:"/plugins/guide/getting-started",children:"插件"}),"。"]}),"\n"]})]})}function c(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,r.ah)(),e.components);return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}let o=c;c.__RSPRESS_PAGE_META={},c.__RSPRESS_PAGE_META["zh%2Fguide%2Fintro%2Fgetting-started.mdx"]={toc:[{text:"三分钟快速上手",id:"三分钟快速上手",depth:2},{text:"创建新项目",id:"创建新项目",depth:3},{text:"接入已有项目",id:"接入已有项目",depth:3},{text:"核心 npm 包",id:"核心-npm-包",depth:3},{text:"查看官方示例",id:"查看官方示例",depth:3},{text:"让我们开始吧",id:"让我们开始吧",depth:2}],title:"快速开始",frontmatter:{sidebar_position:3}}}}]);

package/doc_build/static/js/async/2561.2e43400c.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["2561"],{4688:function(e,s,n){n.r(s),n.d(s,{default:function(){return c}});var i=n(8093),d=n(5878);function l(e){let s=Object.assign({h1:"h1",a:"a",p:"p",code:"code",h2:"h2",ul:"ul",li:"li",strong:"strong",pre:"pre"},(0,d.ah)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.h1,{id:"handle-static-assets",children:["Handle static assets",(0,i.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#handle-static-assets",children:"#"})]}),"\n",(0,i.jsxs)(s.p,{children:["Modern.js Module will handle static assets used in the code. If configuration is required, then the ",(0,i.jsx)(s.a,{href:"/en/api/config/build-config#asset",children:(0,i.jsx)(s.code,{children:"buildConfig.asset"})})," API can be used."]}),"\n",(0,i.jsxs)(s.h2,{id:"default-behavior",children:["Default behavior",(0,i.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#default-behavior",children:"#"})]}),"\n",(0,i.jsx)(s.p,{children:"By default, Modern.js Module handles the following static assets:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"'.svg'"}),"、",(0,i.jsx)(s.code,{children:"'.png'"}),"、",(0,i.jsx)(s.code,{children:"'.jpg'"}),"、",(0,i.jsx)(s.code,{children:"'.jpeg'"}),"、",(0,i.jsx)(s.code,{children:"'.gif'"}),"、",(0,i.jsx)(s.code,{children:"'.webp'"})]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"'.ttf'"}),"、",(0,i.jsx)(s.code,{children:"'.otf'"}),"、",(0,i.jsx)(s.code,{children:"'.woff'"}),"、",(0,i.jsx)(s.code,{children:"'.woff2'"}),"、",(0,i.jsx)(s.code,{children:"'.eot'"})]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"'.mp3'"}),"、",(0,i.jsx)(s.code,{children:"'.mp4'"}),"、",(0,i.jsx)(s.code,{children:"'.webm'"}),"、",(0,i.jsx)(s.code,{children:"'.ogg'"}),"、",(0,i.jsx)(s.code,{children:"'.wav'"}),"、",(0,i.jsx)(s.code,{children:"'.flac'"}),"、",(0,i.jsx)(s.code,{children:"'.aac'"}),"、",(0,i.jsx)(s.code,{children:"'.mov'"})]}),"\n"]}),"\n",(0,i.jsx)(s.p,{children:"For the handling of static files, Modern.js Module currently supports the following functions."}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["Set the static asset path to ",(0,i.jsx)(s.code,{children:". /assets"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Files less than ",(0,i.jsx)(s.strong,{children:"10kb"})," will be inlined into the code."]}),"\n"]}),"\n",(0,i.jsxs)(s.h2,{id:"example",children:["Example",(0,i.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#example",children:"#"})]}),"\n",(0,i.jsx)(s.p,{children:"Let us look at the following example:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Project source code:"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",meta:'title="./src/asset.ts"',children:"import img from './bg.png';\n//...\n"})}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["If the size of ",(0,i.jsx)(s.code,{children:"bg.png"})," is less than 10 kb, then the output directory structure and file content are."]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-bash",children:"./dist\n└── asset.js\n"})}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",meta:'title="./dist/asset.js"',children:"var bg_default = 'data:image/png;base64,';\nconsole.info(bg_default);\n"})}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["If the size of ",(0,i.jsx)(s.code,{children:"bg.png"})," is larger than 10 kb, then the output directory structure and file content are."]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-bash",children:"./dist\n├── asset.js\n└── assets\n    └── bg.13e2aba2.png\n"})}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",meta:'title="./dist/asset.js"',children:"import img from './assets/bg.13e2aba2.png';\nconsole.info(img);\n"})}),"\n",(0,i.jsx)(s.p,{children:"When wanting to modify the default behavior, the following API can be used:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"asset.path"}),": modify the output path of the static assets."]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"asset.limit"}),": modify the threshold value for inline assets."]}),"\n"]})]})}function t(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,d.ah)(),e.components);return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}let c=t;t.__RSPRESS_PAGE_META={},t.__RSPRESS_PAGE_META["en%2Fguide%2Fadvance%2Fasset.mdx"]={toc:[{text:"Default behavior",id:"default-behavior",depth:2},{text:"Example",id:"example",depth:2}],title:"Handle static assets",frontmatter:{sidebar_position:6}}}}]);

package/doc_build/static/js/async/2579.f7c71e6b.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["2579"],{5293:function(n,e,o){o.r(e),o.d(e,{default:function(){return d}});var s=o(8093),l=o(5878);function i(n){let e=Object.assign({h1:"h1",a:"a",p:"p",ul:"ul",li:"li",code:"code",pre:"pre",h2:"h2",strong:"strong"},(0,l.ah)(),n.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(e.h1,{id:"插件对象",children:["插件对象",(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#插件对象",children:"#"})]}),"\n",(0,s.jsx)(e.p,{children:"Modern.js Module 的插件是一个对象，对象包含以下属性："}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.code,{children:"name"}),"：插件的名称，唯一标识符。"]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.code,{children:"setup"}),"：插件初始化函数，只会执行一次。setup 函数可以返回一个 Hooks 对象，Modern.js Module 会在特定的时机执行 Hooks 对象上定义的 Hook 对应的函数。"]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["例如在下面的插件代码示例中，在项目开始执行构建任务之前会触发 ",(0,s.jsx)(e.code,{children:"beforeBuild"})," 函数的执行，并打印 ",(0,s.jsx)(e.code,{children:"build start"})," 的 log 内容。"]}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-ts",meta:'title="./plugins/demo.tsx"',children:"import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';\n\nconst myPlugin: CliPlugin<ModuleTools> = {\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      // this is hook\n      beforeBuild: () => {\n        console.info('build start');\n      },\n    };\n  },\n};\n"})}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"import { myPlugin } from './plugins/demo';\nexport default {\n  plugins: [myPlugin()],\n};\n"})}),"\n",(0,s.jsxs)(e.h2,{id:"插件类型定义",children:["插件类型定义",(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#插件类型定义",children:"#"})]}),"\n",(0,s.jsxs)(e.p,{children:["使用 TypeScript 时，可以引入内置的 ",(0,s.jsx)(e.code,{children:"CliPlugin"})," 和 ",(0,s.jsx)(e.code,{children:"ModuleTools"})," 类型，为插件提供正确的类型推导："]}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-ts",children:"import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';\n\nconst myPlugin: CliPlugin<ModuleTools> = {\n  name: 'my-plugin',\n\n  setup() {\n    const foo = '1';\n\n    return {\n      // this is hook\n      afterBuild: () => {\n        //...\n      },\n    };\n  },\n};\n"})}),"\n",(0,s.jsxs)(e.h2,{id:"插件配置项",children:["插件配置项",(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#插件配置项",children:"#"})]}),"\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.strong,{children:"建议将插件写成函数的形式"}),"，使插件能通过函数入参来接收配置项："]}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-ts",children:"import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';\n\ntype MyPluginOptions = {\n  foo: string;\n};\n\nconst myPlugin = (options: MyPluginOptions): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    console.log(options.foo);\n  },\n});\n"})})]})}function r(){let n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,l.ah)(),n.components);return e?(0,s.jsx)(e,{...n,children:(0,s.jsx)(i,{...n})}):i(n)}let d=r;r.__RSPRESS_PAGE_META={},r.__RSPRESS_PAGE_META["zh%2Fplugins%2Fguide%2Fplugin-object.mdx"]={toc:[{text:"插件类型定义",id:"插件类型定义",depth:2},{text:"插件配置项",id:"插件配置项",depth:2}],title:"插件对象",frontmatter:{sidebar_position:2}}}}]);

package/doc_build/static/js/async/2671.c711355f.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["2671"],{4103:function(t,e,n){n.r(e),n.d(e,{default:function(){return u}});var o=n(8093),r=n(5878);function s(t){return(0,o.jsx)(o.Fragment,{})}function _(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,r.ah)(),t.components);return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(s,{...t})}):s(t)}let u=_;_.__RSPRESS_PAGE_META={},_.__RSPRESS_PAGE_META["zh%2Fcomponents%2Ffaq-build-product.mdx"]={toc:[],title:"",frontmatter:{}}}}]);

package/doc_build/static/js/async/2704.561dadd9.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["2704"],{6453:function(e,n,t){t.r(n),t.d(n,{default:function(){return c}});var o=t(8093),s=t(5878);function _(e){return(0,o.jsx)(o.Fragment,{})}function r(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,s.ah)(),e.components);return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(_,{...e})}):_(e)}let c=r;r.__RSPRESS_PAGE_META={},r.__RSPRESS_PAGE_META["en%2Fcomponents%2Ffaq-build-exception.mdx"]={toc:[],title:"",frontmatter:{}}}}]);

package/doc_build/static/js/async/2712.5ffea5ba.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["2712"],{2721:function(e,n,s){s.r(n),s.d(n,{default:function(){return c}});var r=s(8093),d=s(5878);function l(e){let n=Object.assign({h1:"h1",a:"a",p:"p",strong:"strong",h2:"h2",h3:"h3",code:"code",pre:"pre",ul:"ul",li:"li",ol:"ol",h4:"h4",img:"img"},(0,d.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"构建相关问题",children:["构建相关问题",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#构建相关问题",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"这里只记录了一些常见问题和 bad case。"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsxs)(n.strong,{children:["如果是构建产物不符合预期的场景，尤其是配置了 ",(0,r.jsx)(n.a,{href:"/api/config/build-preset",children:"buildPreset"})," 的情况下，\n请先了解 buildPreset 代表了哪些配置项，再根据所有的配置项逐个检查"]})}),"\n",(0,r.jsxs)(n.h2,{id:"产物问题",children:["产物问题",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#产物问题",children:"#"})]}),"\n",(0,r.jsxs)(n.h3,{id:"class-fields-的初始化处理",children:["Class Fields 的初始化处理",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#class-fields-的初始化处理",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:["TypeSript 提供了 ",(0,r.jsx)(n.code,{children:"useDefineForClassFields"})," 配置用于控制对于 ",(0,r.jsx)(n.code,{children:"public class fields"})," 的转换处理。"]}),"\n",(0,r.jsx)(n.p,{children:"如果有一段代码："}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"class C {\n  foo = 100;\n  bar: string;\n}\n"})}),"\n",(0,r.jsxs)(n.p,{children:["当 ",(0,r.jsx)(n.code,{children:"useDefineForClassFields"})," 为 ",(0,r.jsx)(n.code,{children:"false"})," 的时候，则编译后的代码会变为："]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"class C {\n  constructor() {\n    this.foo = 100;\n  }\n}\n"})}),"\n",(0,r.jsxs)(n.p,{children:["当 ",(0,r.jsx)(n.code,{children:"useDefineForClassFields"})," 为 ",(0,r.jsx)(n.code,{children:"true"})," 的时候，则编译后的代码会变为："]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"class C {\n  constructor() {\n    Object.defineProperty(this, 'foo', {\n      enumerable: true,\n      configurable: true,\n      writable: true,\n      value: 100,\n    });\n    Object.defineProperty(this, 'bar', {\n      enumerable: true,\n      configurable: true,\n      writable: true,\n      value: void 0,\n    });\n  }\n}\n"})}),"\n",(0,r.jsxs)(n.p,{children:["同时该配置的默认值会根据 tsconfig.json 的 ",(0,r.jsx)(n.a,{href:"https://www.typescriptlang.org/tsconfig#target",target:"_blank",rel:"noopener noreferrer",children:(0,r.jsx)(n.code,{children:"target"})})," 配置而变化：",(0,r.jsxs)(n.strong,{children:["当 ",(0,r.jsx)(n.code,{children:"target"})," 是 ES2022 或者更高的时候，则 ",(0,r.jsx)(n.code,{children:"useDefineForClassFields"})," 默认配置为 ",(0,r.jsx)(n.code,{children:"true"}),"，否则就是默认为 ",(0,r.jsx)(n.code,{children:"false"})]}),"。"]}),"\n",(0,r.jsx)(n.p,{children:"关于 TypeScript 这个配置的更多信息，可以参考下面的链接："}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier",target:"_blank",rel:"noopener noreferrer",children:"The useDefineForClassFields Flag and The declare Property Modifier"})}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Modern.js Module 目前会根据下面的逻辑进行处理："}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsxs)(n.li,{children:["首先根据当前项目的 tsconfig.json 的 ",(0,r.jsx)(n.code,{children:"useDefineForClassFields"})," 配置确定在 Modern.js Module 内部如何处理。目前只会读取当前项目路径下的 tsconfig.json 文件的内容，暂时不支持根据 ",(0,r.jsx)(n.a,{href:"https://www.typescriptlang.org/tsconfig#extends",target:"_blank",rel:"noopener noreferrer",children:(0,r.jsx)(n.code,{children:"extends"})})," 配置来获取最终的 tsconfig 配置。"]}),"\n",(0,r.jsxs)(n.li,{children:["如果没有检测 tsconfig.json 的 ",(0,r.jsx)(n.code,{children:"useDefineForClassFields"})," 配置，则会根据 tsconfig.json 的 ",(0,r.jsx)(n.code,{children:"target"})," 配置来确定默认值。如果 ",(0,r.jsx)(n.code,{children:"target"})," 大于 ",(0,r.jsx)(n.code,{children:"ES2022"}),"（包含 ",(0,r.jsx)(n.code,{children:"EsNext"}),"），则",(0,r.jsx)(n.code,{children:"useDefineForClassFields"}),"默认为 ",(0,r.jsx)(n.code,{children:"true"}),"，否则为 ",(0,r.jsx)(n.code,{children:"false"}),"。"]}),"\n",(0,r.jsxs)(n.li,{children:["如果没有检测到 tsconfig.json 的 ",(0,r.jsx)(n.code,{children:"target"}),"，则按照 ",(0,r.jsx)(n.code,{children:"useDefineForClassFields"}),"的值 为 ",(0,r.jsx)(n.code,{children:"true"})," 进行处理。"]}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"babel-plugin-lodash-将引入的-lodash-处理成-undefined",children:["babel-plugin-lodash 将引入的 lodash 处理成 ",(0,r.jsx)(n.code,{children:"undefined"}),(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#babel-plugin-lodash-将引入的-lodash-处理成-undefined",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"当使用类似下面的方式的时候，会出现这个问题："}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import * as Lodash from 'lodash';\n\nexport const libs = {\n  _: Lodash,\n};\n"})}),"\n",(0,r.jsxs)(n.p,{children:["目前在 ",(0,r.jsx)(n.code,{children:"babel-plugin-lodash"})," Github 上的相关 Issue："]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://github.com/lodash/babel-plugin-lodash/issues/235",target:"_blank",rel:"noopener noreferrer",children:"#235"})}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["这个问题的解决办法是移除 ",(0,r.jsx)(n.code,{children:"babel-plugin-lodash"}),"，因为此时不需要该插件进行按需引用，使用该插件会产生副作用。"]}),"\n",(0,r.jsxs)(n.p,{children:["类似的情况在 ",(0,r.jsx)(n.code,{children:"babel-plugin-import"})," 上也可能会出现。比如有类似如下的代码："]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import * as Comps from 'components';\n\nexport const libs = {\n  comps: Comps,\n};\n"})}),"\n",(0,r.jsxs)(n.p,{children:["此时 ",(0,r.jsx)(n.code,{children:"babel-plugin-import"})," 也可能会导致 ",(0,r.jsx)(n.code,{children:"Comps"})," 变为 ",(0,r.jsx)(n.code,{children:"undefined"}),"。因此也需要移除对应的 ",(0,r.jsx)(n.code,{children:"babel-plugin-import"}),"。"]}),"\n",(0,r.jsxs)(n.h3,{id:"cannot-find-module-http",children:["Cannot find module 'http'",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#cannot-find-module-http",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:["如果产物在浏览器运行时报了类似 ",(0,r.jsx)(n.code,{children:"Cannot find module 'http'"})," 的错误，说明你的产物打包进了 node 模块。\n这可能会发生于你的依赖里有一些同时支持 browser 和 node 的三方包，例如 ",(0,r.jsx)(n.code,{children:"axios"}),"，此时只需要将 ",(0,r.jsx)(n.a,{href:"/api/config/build-config.html#platform",children:"platform"})," 设置为 ",(0,r.jsx)(n.code,{children:"browser"})," 即可。\n如果一些三方包不支持 browser, 你可能需要手动注入 ",(0,r.jsx)(n.a,{href:"/plugins/official-list/plugin-node-polyfill",children:"node polyfill"}),"。"]}),"\n",(0,r.jsxs)(n.h2,{id:"异常类问题",children:["异常类问题",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#异常类问题",children:"#"})]}),"\n",(0,r.jsxs)(n.h3,{id:"dynamic-require-of-react-is-not-supported",children:['Dynamic require of "react" is not supported',(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#dynamic-require-of-react-is-not-supported",children:"#"})]}),"\n",(0,r.jsxs)(n.h4,{id:"问题描述",children:["问题描述",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#问题描述",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"当构建的产物配置中产物格式为 ES modules 的时候："}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"export default defineConfig({\n  buildConfig: {\n    format: 'esm',\n  },\n});\n"})}),"\n",(0,r.jsx)(n.p,{children:"如果导入了的第三方 npm 包的 cjs 产物，那么生成的产物可能会在 webpack 下有可能无法正常运行。"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{src:"https://lf3-static.bytednsdoc.com/obj/eden-cn/shylnyhaeh7uldvivhn/1280X1280.png",alt:""})}),"\n",(0,r.jsxs)(n.h4,{id:"解决办法",children:["解决办法",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#解决办法",children:"#"})]}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"首先需要找到是哪个第三方包引起的问题"}),"。例如报错信息中指向了 ",(0,r.jsx)(n.code,{children:"react"})," 这个包，那么就要寻找在哪个第三方包里存在 ",(0,r.jsx)(n.code,{children:"require('react')"})," 这样的代码。比如 ",(0,r.jsx)(n.a,{href:"https://www.npmjs.com/package/react-draggable",target:"_blank",rel:"noopener noreferrer",children:(0,r.jsx)(n.code,{children:"react-draggable"})})," ，这个包仅包含 ",(0,r.jsx)(n.code,{children:"cjs"})," 产物，那么问题定位到 ",(0,r.jsx)(n.code,{children:"react-draggable"})," 这个包。"]}),"\n",(0,r.jsxs)(n.li,{children:["然后我们需要将这个包通过下面的配置进行排除，即",(0,r.jsx)(n.strong,{children:"不打包存在问题的第三方包"}),"。"]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"export default defineConfig({\n  buildConfig: {\n    externals: ['react-draggable'],\n  },\n});\n"})}),"\n",(0,r.jsxs)(n.h4,{id:"参考链接",children:["参考链接",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#参考链接",children:"#"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://stackoverflow.com/questions/68423950/when-using-esbuild-with-external-react-i-get-dynamic-require-of-react-is-not-s",target:"_blank",rel:"noopener noreferrer",children:'When using esbuild with external react I get Dynamic require of "react" is not supported'})}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"编译过程中因为某个组件库的-less-文件报错operation-on-an-invalid-type",children:["编译过程中，因为某个组件库的 less 文件报错：",(0,r.jsx)(n.code,{children:"'Operation on an invalid type'"}),(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#编译过程中因为某个组件库的-less-文件报错operation-on-an-invalid-type",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:["可能是因为该组件库依赖的 Less 版本是 v3，而 Modern.js Module 默认是 v4。v3 与 v4 在 ",(0,r.jsx)(n.code,{children:"math"})," 配置上存在有 Break Change，可以查看这个",(0,r.jsx)(n.a,{href:"https://stackoverflow.com/questions/73298187/less-error-operation-on-an-invalid-type-in-antd-dependency",target:"_blank",rel:"noopener noreferrer",children:"链接"})," 了解详情。"]}),"\n",(0,r.jsx)(n.p,{children:"因此，如果是在源码中使用了类似这样的组件库："}),"\n",(0,r.jsxs)(n.p,{children:["在构建配置中使用了 ",(0,r.jsx)(n.code,{children:"buildPreset"})," 的情况下，按照下面进行修改："]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"module.exports = {\n  buildPreset({ extendPreset }) {\n    return extendPreset('your-build-preset', {\n      style: {\n        less: {\n          lessOptions: {\n            math: 'always',\n          },\n        },\n      },\n    });\n  },\n};\n"})}),"\n",(0,r.jsxs)(n.p,{children:["或者使用了自定义的 ",(0,r.jsx)(n.code,{children:"buildConfig"})," 的情况下，按照下面进行修改："]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"module.exports = {\n  buildConfig: {\n    style: {\n      less: {\n        lessOptions: {\n          math: 'always',\n        },\n      },\n    },\n  },\n};\n"})}),"\n",(0,r.jsx)(n.p,{children:"如果是在 Storybook 中使用了类似这样的组件，则需要修改 Storybook 的调试配置："}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",meta:"filename='.storybook/main.ts'",children:"module.exports = {\n  framework: {\n    options: {\n      builderConfig: {\n        tools: {\n          webpackChain(chain, { CHAIN_ID }) {\n            chain.module\n              .rule(CHAIN_ID.RULE.LESS)\n              .use(CHAIN_ID.USE.LESS)\n              .tap(options => {\n                options.lessOptions = {\n                  ...options.lessOptions,\n                  math: 'always',\n                };\n                return options;\n              });\n          },\n        },\n      },\n    },\n  },\n};\n"})}),"\n",(0,r.jsxs)(n.h3,{id:"bundleless-dts-failed",children:["Bundleless DTS failed",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#bundleless-dts-failed",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:["在不打包的场景下，是直接 ",(0,r.jsx)(n.code,{children:"tsc"})," 生成类型声明文件。通过终端打印的错误信息，你可以找到问题文件。对于源码文件，推荐将类型问题进行修复，这能够更好地使你的包得到复用。但如果遇到三方包的类型检查问题："]}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsxs)(n.li,{children:["开启 ",(0,r.jsx)(n.a,{href:"https://www.typescriptlang.org/tsconfig#skipLibCheck",target:"_blank",rel:"noopener noreferrer",children:"skipLibCheck"})," 来跳过三方包的 d.ts 检查。"]}),"\n",(0,r.jsxs)(n.li,{children:["如果三方包直接导出 ts 文件， skipLibCheck 将会失效，因为其只能跳过 d.ts 检查，因此你只能关闭 ",(0,r.jsx)(n.a,{href:"/api/config/build-config.html#dtsabortonerror",children:"dts.abortOnError"})," 来忽略这些错误。"]}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"bundle-dts-failed",children:["Bundle DTS failed",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#bundle-dts-failed",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:["Modern.js Module 直接使用 ",(0,r.jsx)(n.a,{href:"https://github.com/Swatinem/rollup-plugin-dts",target:"_blank",rel:"noopener noreferrer",children:"rollup-plugin-dts"})," 来打包你的类型描述文件。\n",(0,r.jsx)(n.strong,{children:"它可能无法处理某些第三方依赖的类型文件"}),"。"]}),"\n",(0,r.jsxs)(n.p,{children:["如果遇到 Modern.js Module 构建过程中出现 ",(0,r.jsx)(n.code,{children:"Bundle DTS failed"})," 的错误信息标题的时候，可以观察报错信息是来自某个第三方依赖。尝试设置 ",(0,r.jsx)(n.a,{href:"/api/config/build-config.html#dtsrespectexternal",children:(0,r.jsx)(n.code,{children:"dts.respectExternal"})})," 为 ",(0,r.jsx)(n.code,{children:"false"})," 来关闭打包第三方依赖的类型文件的行为。"]}),"\n",(0,r.jsxs)(n.h3,{id:"defineconfig-函数类型报错如果没有引用-则无法命名-default-的推断类型",children:[(0,r.jsx)(n.code,{children:"defineConfig"})," 函数类型报错：",(0,r.jsx)(n.code,{children:'如果没有引用 "..."，则无法命名 "default" 的推断类型'}),(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#defineconfig-函数类型报错如果没有引用-则无法命名-default-的推断类型",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:["检查项目的 tsconfig.json 文件中是否存在 ",(0,r.jsx)(n.a,{href:"https://www.typescriptlang.org/tsconfig#include",target:"_blank",rel:"noopener noreferrer",children:(0,r.jsx)(n.code,{children:"include"})})," 配置，如果没有，则尝试增加下面的内容："]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",children:'{\n  "include": ["src"]\n}\n'})}),"\n",(0,r.jsxs)(n.h2,{id:"其他",children:["其他",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#其他",children:"#"})]}),"\n",(0,r.jsxs)(n.h3,{id:"bundleless-如何跳过对-less--scss-文件的预处理",children:["bundleless 如何跳过对 less / scss 文件的预处理",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#bundleless-如何跳过对-less--scss-文件的预处理",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:["bundleless 是单文件编译的方式，只需要将你的 less / scss 文件从入口里移除并且将其拷贝到产物里即可。\n注意我们还会把 js 引用 less / scss 的 moduleId 进行改写，你可以通过 ",(0,r.jsx)(n.a,{href:"/api/config/build-config#redirect",children:"redirect"})," 配置关闭它。"]}),"\n",(0,r.jsx)(n.p,{children:"下面是一个跳过 less 文件处理的例子，你会发现 src 里面所有的 less 文件都被拷贝到 dist 里并且保留了一致的相对路径。"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildType: 'bundleless',\n  buildConfig: {\n    input: ['src', '!src/**/*.less'],\n    redirect: {\n      style: false,\n    },\n    copy: {\n      patterns: [\n        {\n          from: './**/*.less',\n          to: './',\n        },\n      ],\n      options: {\n        enableCopySync: true,\n      },\n    },\n  },\n});\n"})}),"\n",(0,r.jsxs)(n.h3,{id:"增加额外的编译能力",children:["增加额外的编译能力",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#增加额外的编译能力",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"Modern.js Module 基于 esbuild 实现，因此如果有特殊需求或者想要增加额外的编译能力，可以通过实现 esbuild 插件来解决。"}),"\n",(0,r.jsxs)(n.p,{children:["Modern.js Module 提供了 ",(0,r.jsx)(n.a,{href:"/api/config/build-config.html#esbuildoptions",children:(0,r.jsx)(n.code,{children:"esbuildOptions"})})," 配置允许修改 Modern.js Module 内部的 esbuild 配置，因此可以通过该配置来增加自定义的 esbuild 插件："]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",meta:'title="modern.config.ts"',children:"import { myEsbuildPlugin } from './myEsbuildPlugin';\n\nexport default defineConfig({\n  buildConfig: {\n    esbuildOptions: options => {\n      options.plugins = [myEsbuildPlugin, ...options.plugins];\n      return options;\n    },\n  },\n});\n"})}),"\n",(0,r.jsx)(n.p,{children:"在增加 esbuild 插件时，请注意你需要将插件加在 plugins 数组的头部，因为 Modern.js Module 内部也是通过一个 esbuild 插件介入到整个构建流程中去的，因此需要将自定义插件优先注册。"}),"\n",(0,r.jsxs)(n.h3,{id:"支持生成-css-modules-的-typescript-声明文件",children:["支持生成 CSS Modules 的 TypeScript 声明文件",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#支持生成-css-modules-的-typescript-声明文件",children:"#"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["方案一：",(0,r.jsx)(n.a,{href:"https://github.com/Quramy/typed-css-modules",target:"_blank",rel:"noopener noreferrer",children:"typed-css-modules"})]}),"\n",(0,r.jsxs)(n.li,{children:["方案二：",(0,r.jsx)(n.a,{href:"https://www.npmjs.com/package/@guanghechen/postcss-modules-dts",target:"_blank",rel:"noopener noreferrer",children:"postcss-modules-dts"})]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"import { defineConfig } from '@modern-js/module-tools';\n\nexport default defineConfig(async () => {\n  const { dts } = await import('@guanghechen/postcss-modules-dts');\n  return {\n    buildConfig: {\n      style: {\n        modules: { ...dts },\n      },\n    },\n    // 你的自定义配置\n  };\n});\n"})})]})}function i(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,d.ah)(),e.components);return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}let c=i;i.__RSPRESS_PAGE_META={},i.__RSPRESS_PAGE_META["zh%2Fguide%2Ffaq%2Fbuild.mdx"]={toc:[{text:"产物问题",id:"产物问题",depth:2},{text:"Class Fields 的初始化处理",id:"class-fields-的初始化处理",depth:3},{text:"babel-plugin-lodash 将引入的 lodash 处理成 `undefined`",id:"babel-plugin-lodash-将引入的-lodash-处理成-undefined",depth:3},{text:"Cannot find module 'http'",id:"cannot-find-module-http",depth:3},{text:"异常类问题",id:"异常类问题",depth:2},{text:'Dynamic require of "react" is not supported',id:"dynamic-require-of-react-is-not-supported",depth:3},{text:"问题描述",id:"问题描述",depth:4},{text:"解决办法",id:"解决办法",depth:4},{text:"参考链接",id:"参考链接",depth:4},{text:"编译过程中，因为某个组件库的 less 文件报错：`'Operation on an invalid type'`",id:"编译过程中因为某个组件库的-less-文件报错operation-on-an-invalid-type",depth:3},{text:"Bundleless DTS failed",id:"bundleless-dts-failed",depth:3},{text:"Bundle DTS failed",id:"bundle-dts-failed",depth:3},{text:'`defineConfig` 函数类型报错：`如果没有引用 "..."，则无法命名 "default" 的推断类型`',id:"defineconfig-函数类型报错如果没有引用-则无法命名-default-的推断类型",depth:3},{text:"其他",id:"其他",depth:2},{text:"bundleless 如何跳过对 less / scss 文件的预处理",id:"bundleless-如何跳过对-less--scss-文件的预处理",depth:3},{text:"增加额外的编译能力",id:"增加额外的编译能力",depth:3},{text:"支持生成 CSS Modules 的 TypeScript 声明文件",id:"支持生成-css-modules-的-typescript-声明文件",depth:3}],title:"构建相关问题",frontmatter:{}}}}]);

package/doc_build/static/js/async/3023.5bef6325.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["3023"],{7966:function(n,e,s){s.r(e),s.d(e,{default:function(){return r}});var o=s(8093),t=s(5878);function i(n){let e=Object.assign({pre:"pre",code:"code",p:"p"},(0,t.ah)(),n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-js",meta:'title="modern.config.ts"',children:"import { myEsbuildPlugin } from './myEsbuildPlugin';\n\nexport default defineConfig({\n  buildConfig: {\n    esbuildOptions: options => {\n      options.plugins = [myEsbuildPlugin, ...options.plugins];\n      return options;\n    },\n  },\n});\n"})}),"\n",(0,o.jsx)(e.p,{children:"在增加 esbuild 插件时，请注意你需要将插件加在 plugins 数组的头部，因为 Modern.js Module 内部也是通过一个 esbuild 插件介入到整个构建流程中去的，因此需要将自定义插件优先注册。"})]})}function l(){let n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,t.ah)(),n.components);return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(i,{...n})}):i(n)}let r=l;l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["zh%2Fcomponents%2Fregister-esbuild-plugin.mdx"]={toc:[],title:"",frontmatter:{}}}}]);

package/doc_build/static/js/async/3039.3982622e.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["3039"],{2375:function(e,n,s){s.r(n),s.d(n,{default:function(){return a}});var l=s(8093),o=s(5878),d=s(8078);function r(e){let n=Object.assign({h1:"h1",a:"a",div:"div",p:"p",h2:"h2",h3:"h3",pre:"pre",code:"code"},(0,o.ah)(),e.components);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(n.h1,{id:"babel-插件",children:["Babel 插件",(0,l.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#babel-插件",children:"#"})]}),"\n",(0,l.jsxs)(n.div,{className:"rspress-directive tip",children:[(0,l.jsx)(n.div,{className:"rspress-directive-title",children:"TIP"}),(0,l.jsx)(n.div,{className:"rspress-directive-content",children:(0,l.jsx)(n.p,{children:"通常情况下，我们无需使用 Babel 转换我们的代码，此插件仅作为一种降级方式。"})})]}),"\n",(0,l.jsxs)(n.h2,{id:"快速开始",children:["快速开始",(0,l.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#快速开始",children:"#"})]}),"\n",(0,l.jsxs)(n.h3,{id:"安装",children:["安装",(0,l.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#安装",children:"#"})]}),"\n","\n",(0,l.jsx)(d.SU,{command:"add @modern-js/plugin-module-babel -D"}),"\n",(0,l.jsxs)(n.h3,{id:"注册插件",children:["注册插件",(0,l.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#注册插件",children:"#"})]}),"\n",(0,l.jsx)(n.p,{children:"在 Modern.js Module 中，你可以按照如下方式注册插件："}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\nimport { modulePluginBabel } from '@modern-js/plugin-module-babel';\n\nexport default defineConfig({\n  plugins: [moduleTools(), modulePluginBabel()],\n});\n"})}),"\n",(0,l.jsx)(n.p,{children:"你也可以通过 hooks 配置注册，例如你同时需要打包 A，B 两个文件，并只需要在打包 A 时使用 babel："}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\nimport { getBabelHook } from '@modern-js/plugin-module-babel';\n\nconst babelHook = getBabelHook({\n  // babel options\n});\n\nexport default defineConfig({\n  plugins: [moduleTools()],\n  buildConfig: [\n    {\n      hooks: [babelHook],\n      input: ['src/a.ts'],\n    },\n    {\n      input: ['src/b.ts'],\n    },\n  ],\n});\n"})}),"\n",(0,l.jsxs)(n.h2,{id:"配置",children:["配置",(0,l.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#配置",children:"#"})]}),"\n",(0,l.jsxs)(n.p,{children:["See ",(0,l.jsx)(n.a,{href:"https://babeljs.io/docs/options",target:"_blank",rel:"noopener noreferrer",children:"Babel options"})]}),"\n",(0,l.jsxs)(n.p,{children:["下面是一个配置了",(0,l.jsx)(n.code,{children:"@babel/preset-env"}),"的例子："]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\nimport { modulePluginBabel } from '@modern-js/plugin-module-babel';\n\nexport default defineConfig({\n  plugins: [\n    moduleTools(),\n    modulePluginBabel({\n      presets: [['@babel/preset-env']],\n    }),\n  ],\n});\n"})})]})}function i(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,o.ah)(),e.components);return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(r,{...e})}):r(e)}let a=i;i.__RSPRESS_PAGE_META={},i.__RSPRESS_PAGE_META["zh%2Fplugins%2Fofficial-list%2Fplugin-babel.mdx"]={toc:[{text:"快速开始",id:"快速开始",depth:2},{text:"安装",id:"安装",depth:3},{text:"注册插件",id:"注册插件",depth:3},{text:"配置",id:"配置",depth:2}],title:"Babel 插件",frontmatter:{}}}}]);

package/doc_build/static/js/async/3097.b043b3aa.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["3097"],{216:function(e,n,i){i.r(n),i.d(n,{default:function(){return o}});var l=i(8093),s=i(5878);function t(e){let n=Object.assign({h1:"h1",a:"a",p:"p",ol:"ol",li:"li",code:"code",pre:"pre",ul:"ul"},(0,s.ah)(),e.components);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(n.h1,{id:"quick-start",children:["Quick Start",(0,l.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#quick-start",children:"#"})]}),"\n",(0,l.jsx)(n.p,{children:"Modern.js Module not only provides a rich set of features, but also supports extending the capabilities of the current project by way of plugins."}),"\n",(0,l.jsx)(n.p,{children:"We can quickly see how to write a Modern.js Module plugin by using the following example."}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsxs)(n.li,{children:["First we create ",(0,l.jsx)(n.code,{children:". /plugins/example.ts"})," file under the initialized project."]}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-md",meta:'title=". /project"',children:". /project .\n├── plugins\n│ └── example.ts\n├── src/\n└── modern.config.ts\n"})}),"\n",(0,l.jsxs)(n.ol,{start:"2",children:["\n",(0,l.jsxs)(n.li,{children:["Next add the code for the plugin to the ",(0,l.jsx)(n.code,{children:"example.ts"})," file."]}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-ts",children:"import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';\n\nexport const ExamplePlugin = (): CliPlugin<ModuleTools> => {\n  return {\n    name: 'example',\n    setup() {\n      console.info('this is example plugin');\n      return {\n        // use hooks\n        afterBuild() {\n          console.info('build over');\n        },\n      };\n    },\n  };\n};\n"})}),"\n",(0,l.jsxs)(n.ol,{start:"3",children:["\n",(0,l.jsxs)(n.li,{children:["Then we register the plugin we just wrote via the ",(0,l.jsx)(n.a,{href:"/en/api/config/plugins",children:(0,l.jsx)(n.code,{children:"plugins"})})," API."]}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-ts",meta:'title=". /modern.config.ts"',children:"import { examplePlugin } from '. /plugins/example';\nexport default defineConfig({\n  plugins: [examplePlugin()],\n});\n"})}),"\n",(0,l.jsxs)(n.ol,{start:"4",children:["\n",(0,l.jsxs)(n.li,{children:["Finally, run ",(0,l.jsx)(n.code,{children:"modern build"})," and you will see:"]}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",meta:'title="terminal"',children:"This is example plugin\nBuild succeed: 510.684ms\nbuild over\n"})}),"\n",(0,l.jsx)(n.p,{children:"With the above example, we learned the following things."}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"The recommended plugin directory structure"}),"\n",(0,l.jsx)(n.li,{children:"The initialization code of the plugin"}),"\n",(0,l.jsx)(n.li,{children:"Plugin registration"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"In addition to the above, we also need to understand."}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"/en/plugins/guide/plugin-object",children:"plugin objects, type definitions and recommended configuration options"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsxs)(n.a,{href:"/en/plugins/guide/setup-function",children:["setup functions, ",(0,l.jsx)(n.code,{children:"api"})," object parameters, lifecycle hooks"]})}),"\n"]})]})}function r(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,s.ah)(),e.components);return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(t,{...e})}):t(e)}let o=r;r.__RSPRESS_PAGE_META={},r.__RSPRESS_PAGE_META["en%2Fplugins%2Fguide%2Fgetting-started.mdx"]={toc:[],title:"Quick Start",frontmatter:{sidebar_position:1}}}}]);

package/doc_build/static/js/async/3213.df408a99.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["3213"],{5959:function(e,s,n){n.r(s),n.d(s,{default:function(){return o}});var i=n(8093),r=n(5878);function l(e){let s=Object.assign({h1:"h1",a:"a",p:"p",h2:"h2",ol:"ol",li:"li",code:"code",pre:"pre",ul:"ul",h3:"h3",blockquote:"blockquote",strong:"strong"},(0,r.ah)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.h1,{id:"developing-components",children:["Developing Components",(0,i.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#developing-components",children:"#"})]}),"\n",(0,i.jsx)(s.p,{children:"This chapter will describe how to develop component projects using the Modern.js Module."}),"\n",(0,i.jsxs)(s.h2,{id:"initialize-the-project",children:["Initialize the project",(0,i.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#initialize-the-project",children:"#"})]}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["It is recommended to use the ",(0,i.jsx)(s.code,{children:"@modern-js/create"})," command to initialize an npm project."]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-text",meta:'title="Interactive questions"',children:"npx @modern-js/create@latest components-project\n\n? Please select the type of project you want to create: Npm Module\n? Please fill in the project name: components-demo\n? Please select the programming language: TS\n? Please select the package manager: pnpm\n"})}),"\n",(0,i.jsxs)(s.ol,{start:"2",children:["\n",(0,i.jsx)(s.li,{children:"The initialized directory structure:"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-bash",children:".\n├── README.md\n├── node_modules/\n├── dist/\n├── modern.config.ts\n├── package.json\n├── pnpm-lock.yaml\n├── src\n│   ├── index.ts\n│   └── modern-app-env.d.ts\n└── tsconfig.json\n"})}),"\n",(0,i.jsxs)(s.ol,{start:"3",children:["\n",(0,i.jsxs)(s.li,{children:["Finally, modify the file suffix and content of ",(0,i.jsx)(s.code,{children:"./src/index.ts"})," as follows, and the initialization of the component project is completed."]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-tsx",meta:'title="./src/index.tsx"',children:"export default () => {\n  return <div>hello world</div>;\n};\n"})}),"\n",(0,i.jsxs)(s.h2,{id:"debugging-code-with-storybook",children:["Debugging code with Storybook",(0,i.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#debugging-code-with-storybook",children:"#"})]}),"\n",(0,i.jsxs)(s.p,{children:["Please refer to ",(0,i.jsx)(s.a,{href:"/guide/basic/using-storybook.html",children:'"Using Storybook"'})," to debug code using Storybook."]}),"\n",(0,i.jsxs)(s.h2,{id:"developing-styles",children:["Developing Styles",(0,i.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#developing-styles",children:"#"})]}),"\n",(0,i.jsx)(s.p,{children:"Next we can add styles to the component."}),"\n",(0,i.jsx)(s.p,{children:"The following capabilities are currently supported for developing styles."}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"CSS/PostCSS"}),"\n",(0,i.jsx)(s.li,{children:"Less"}),"\n",(0,i.jsx)(s.li,{children:"Scss/Sass"}),"\n",(0,i.jsx)(s.li,{children:"Tailwind CSS"}),"\n",(0,i.jsx)(s.li,{children:"CSS Modules"}),"\n"]}),"\n",(0,i.jsxs)(s.h3,{id:"csspostcss",children:["CSS/PostCSS",(0,i.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#csspostcss",children:"#"})]}),"\n",(0,i.jsx)(s.p,{children:"Modern.js Module supports PostCSS and has the following built-in PostCSS plugins."}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://github.com/luisrudge/postcss-flexbugs-fixes",target:"_blank",rel:"noopener noreferrer",children:"flexbugs-fixes"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://github.com/postcss/postcss-custom-properties",target:"_blank",rel:"noopener noreferrer",children:"custom-properties"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://github.com/maximkoretskiy/postcss-initial",target:"_blank",rel:"noopener noreferrer",children:"initial"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://github.com/shrpne/postcss-page-break",target:"_blank",rel:"noopener noreferrer",children:"page-break"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://github.com/postcss/postcss-font-variant",target:"_blank",rel:"noopener noreferrer",children:"font-variant"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://github.com/postcss/postcss-media-minmax",target:"_blank",rel:"noopener noreferrer",children:"media-minmax"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#readme",target:"_blank",rel:"noopener noreferrer",children:"nesting"})}),"\n"]}),"\n",(0,i.jsxs)(s.p,{children:["So we can create ",(0,i.jsx)(s.code,{children:".css"})," files in our projects and use the syntax support and capabilities provided by these plugins directly in our css files."]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Source Code:"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-less",meta:'title="./src/index.css"',children:'a,\nb {\n  color: red;\n\n  /* "&" comes first */\n  & c,\n  & d {\n    color: white;\n  }\n\n  /* "&" comes later, requiring "@nest" */\n  @nest e & {\n    color: yellow;\n  }\n}\n'})}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"CSS artifact:"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-css",meta:'title="./dist/es/index.css"',children:"a,\nb {\n  color: red;\n}\na c,\nb c,\na d,\nb d {\n  color: white;\n}\ne a,\ne b {\n  color: yellow;\n}\n"})}),"\n",(0,i.jsxs)(s.h3,{id:"less",children:["Less",(0,i.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#less",children:"#"})]}),"\n",(0,i.jsx)(s.p,{children:"Modern.js Module supports development styles using Less."}),"\n",(0,i.jsxs)(s.blockquote,{children:["\n",(0,i.jsx)(s.p,{children:"The current built-in Less version is v4.1.3"}),"\n"]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Source Code:"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-less",meta:'title="./src/common.less"',children:"@bg: black;\n@bg-light: boolean(luma(@bg) > 50%);\n\ndiv {\n  background: @bg;\n  color: if(@bg-light, black, white);\n}\n"})}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Less artifact:"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-css",meta:'title="./dist/es/common.css"',children:"div {\n  background: black;\n  color: white;\n}\n"})}),"\n",(0,i.jsxs)(s.h3,{id:"sassscss",children:["Sass/Scss",(0,i.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#sassscss",children:"#"})]}),"\n",(0,i.jsx)(s.p,{children:"Modern.js Module supports developing styles using Scss/Sass."}),"\n",(0,i.jsxs)(s.blockquote,{children:["\n",(0,i.jsx)(s.p,{children:"The current built-in Sass version is v1.54.4"}),"\n"]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Source code:"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-sass",meta:'title="./src/common.sass"',children:"$font-stack: Helvetica, sans-serif;\n$primary-color: #333;\n\nbody {\n  font: 100% $font-stack;\n  color: $primary-color;\n}\n"})}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Less artifact:"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-css",meta:'title="./dist/es/common.css"',children:"body {\n  font: 100% Helvetica, sans-serif;\n  color: #333;\n}\n"})}),"\n",(0,i.jsxs)(s.h3,{id:"tailwind-css",children:["Tailwind CSS",(0,i.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#tailwind-css",children:"#"})]}),"\n",(0,i.jsxs)(s.p,{children:["Please refer to ",(0,i.jsx)(s.a,{href:"/guide/best-practices/use-tailwindcss.html",children:'"Using Tailwind CSS"'})," for detailed usage."]}),"\n",(0,i.jsxs)(s.h3,{id:"css-modules",children:["CSS Modules",(0,i.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#css-modules",children:"#"})]}),"\n",(0,i.jsx)(s.p,{children:"Modern.js Module supports the development of styles using CSS Modules. By default, the following files are recognized as CSS Module files."}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.code,{children:".module.css"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.code,{children:".module.less"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.code,{children:".module.scss"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.code,{children:".module.sass"})}),"\n"]}),"\n",(0,i.jsx)(s.p,{children:"If you need to configure CSS Modules, you can check out the API at"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"/en/api/config/build-config#styleautomodules",children:"style.autoModules"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"/en/api/config/build-config#stylemodules",children:"style.modules"})}),"\n"]}),"\n",(0,i.jsx)(s.p,{children:"The following is a code example."}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-tsx",meta:'title="./src/index.tsx"',children:"import style from './index.module.css';\n\nexport default () => {\n  return <div className={style.btn}>hello world</div>;\n};\n"})}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-css",meta:'title="./src/index.module.css"',children:".btn {\n  color: blue;\n}\n"})}),"\n",(0,i.jsxs)(s.h2,{id:"configuring-build-artifacts",children:["Configuring build artifacts",(0,i.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#configuring-build-artifacts",children:"#"})]}),"\n",(0,i.jsxs)(s.p,{children:["Based on most scenarios of component project usage, ",(0,i.jsxs)(s.strong,{children:["it is recommended to use the ",(0,i.jsx)(s.code,{children:"npm-component"})," build preset"]}),". This preset yields a output directory structure of"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-bash",children:".\n├── dist\n│   ├── es\n│   ├── lib\n│   └── types\n"})}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:". /dist/es"}),": Contains bundleless artifacts in ES modules format that support the es6 syntax."]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:". /dist/lib"}),": Contains bundleless artifacts in CommonJS format with support for es6 syntax."]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:". /dist/types"}),": Contains the types file."]}),"\n"]}),"\n",(0,i.jsxs)(s.p,{children:["The ",(0,i.jsx)(s.a,{href:"/en/api/config/build-preset",children:(0,i.jsx)(s.code,{children:"buildPreset"})})," can be configured manually if there is a requirement to use syntax support, and supports modifying the supported syntax by adding a suffix to ",(0,i.jsx)(s.code,{children:"npm-component"}),"."]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-tsx",children:"export default defineConfig({\n  buildPreset: 'npm-component-es2019',\n});\n"})}),"\n",(0,i.jsxs)(s.p,{children:["If you have special needs for the build artifacts directory structure, you can use the ",(0,i.jsxs)(s.a,{href:"/en/api/config/build-config",children:[(0,i.jsx)(s.code,{children:"buildConfig"})," API"]}),", which can be used by the following documentation."]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"/en/guide/basic/modify-output-product#build-configuration-object",children:"modify-output-product"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"/en/guide/advance/in-depth-about-build",children:"in-depth-about-build"})}),"\n"]}),"\n",(0,i.jsxs)(s.h2,{id:"releasing-components",children:["Releasing components",(0,i.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#releasing-components",children:"#"})]}),"\n",(0,i.jsxs)(s.p,{children:["It is recommended to use the version release feature provided by Modern.js Module. You can refer to the ",(0,i.jsx)(s.a,{href:"/en/guide/basic/publish-your-project",children:'"Version Management and Release"'})," section for more information."]})]})}function t(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,r.ah)(),e.components);return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}let o=t;t.__RSPRESS_PAGE_META={},t.__RSPRESS_PAGE_META["en%2Fguide%2Fbest-practices%2Fcomponents.mdx"]={toc:[{text:"Initialize the project",id:"initialize-the-project",depth:2},{text:"Debugging code with Storybook",id:"debugging-code-with-storybook",depth:2},{text:"Developing Styles",id:"developing-styles",depth:2},{text:"CSS/PostCSS",id:"csspostcss",depth:3},{text:"Less",id:"less",depth:3},{text:"Sass/Scss",id:"sassscss",depth:3},{text:"Tailwind CSS",id:"tailwind-css",depth:3},{text:"CSS Modules",id:"css-modules",depth:3},{text:"Configuring build artifacts",id:"configuring-build-artifacts",depth:2},{text:"Releasing components",id:"releasing-components",depth:2}],title:"Developing Components",frontmatter:{sidebar_position:1}}}}]);

package/doc_build/static/js/async/3235.0c4d2c9b.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["3235"],{9242:function(n,e,d){d.r(e),d.d(e,{default:function(){return r}});var i=d(8093),s=d(5878);function l(n){let e=Object.assign({h1:"h1",a:"a",p:"p",code:"code",h2:"h2",ol:"ol",li:"li",ul:"ul",pre:"pre"},(0,s.ah)(),n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(e.h1,{id:"深入理解-dev-命令",children:["深入理解 dev 命令",(0,i.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#深入理解-dev-命令",children:"#"})]}),"\n",(0,i.jsxs)(e.p,{children:["Modern.js Module 提供的 ",(0,i.jsx)(e.code,{children:"dev"})," 命令主要用于代码的调试。"]}),"\n",(0,i.jsxs)(e.h2,{id:"命令运行的整体流程",children:["命令运行的整体流程",(0,i.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#命令运行的整体流程",children:"#"})]}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsxs)(e.li,{children:["当执行 ",(0,i.jsx)(e.code,{children:"dev"})," 命令的时候，Modern.js Module 开始寻找是否存在可以执行的调试工具或者任务。调试工具或者任务就是类似 doc 这样的 Modern.js Module 调试工具插件。"]}),"\n",(0,i.jsx)(e.li,{children:"当发现存在一个调试工具的时候，则会立即执行它。"}),"\n",(0,i.jsx)(e.li,{children:"当发现多个调试工具的时候，则显示调试工具列表菜单。可以通过选择某个调试工具对应的名称选项启动它。"}),"\n",(0,i.jsx)(e.li,{children:"当没有发现调试工具的时候，则告诉用户没有可用的调试工具。"}),"\n"]}),"\n",(0,i.jsxs)(e.p,{children:["我们除了可以执行 ",(0,i.jsx)(e.code,{children:"dev"})," 命令以外，也可以通过 ",(0,i.jsx)(e.code,{children:"dev [调试工具名称]"})," 的方式来直接启动调试工具或者任务。"]}),"\n",(0,i.jsxs)(e.h2,{id:"扩展-dev-命令",children:["扩展 dev 命令",(0,i.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#扩展-dev-命令",children:"#"})]}),"\n",(0,i.jsx)(e.p,{children:"如果需要扩展 dev 命令或者说提供自己的 Modern.js Module 调试工具插件，那么你需要先了解以下内容："}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"/plugins/guide/getting-started",children:"开发插件"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"/api/plugin-api/plugin-hooks#%E8%B0%83%E8%AF%95%E9%92%A9%E5%AD%90",children:"调试工具插件 API"})}),"\n"]}),"\n",(0,i.jsx)(e.p,{children:"一般来说，实现一个什么都不做的调试工具，其实现代码以及相关配置如下："}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",meta:"do-nothing.ts",children:"export const myPlugin = (): CliPlugin<ModuleTools> => ({\n  name: 'do-nothing',\n  setup() {\n    return {\n      registerDev() {\n        return {\n          // 调试工具名称\n          name: 'do-nothing',\n          // 菜单显示内容\n          menuItem: {\n            name: 'DoNothing',\n            value: 'do-nothing',\n          },\n          // 定义的 dev 子命令\n          subCommands: ['donothing', 'dn'],\n          async action() {\n            // dev logic\n            console.info('Run build --watch, and do nothing.');\n          },\n        };\n      },\n    };\n  },\n});\n"})}),"\n",(0,i.jsx)(e.p,{children:"如果需要使用该调试工具插件，则需要在配置文件中增加它："}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",children:"import doNothingPlugin from './plugins/do-nothing';\n\nexport default defineConfig({\n  plugins: [\n    //..\n    doNothingPlugin()\n  ],\n});\n"})}),"\n",(0,i.jsxs)(e.p,{children:["此时我们执行 ",(0,i.jsx)(e.code,{children:"dev"})," 或者 ",(0,i.jsx)(e.code,{children:"dev do-nothing"})," 命令的时候，就可以执行它了。在执行后，它会先执行监听模式的源码构建任务，并紧接着打印日志信息。"]}),"\n",(0,i.jsxs)(e.p,{children:["对于目前官方支持的调试工具和第三方支持的调试工具，可以在",(0,i.jsx)(e.a,{href:"/plugins/official-list/overview",children:"插件列表"}),"中查看。"]})]})}function o(){let n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,s.ah)(),n.components);return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(l,{...n})}):l(n)}let r=o;o.__RSPRESS_PAGE_META={},o.__RSPRESS_PAGE_META["zh%2Fguide%2Fadvance%2Fin-depth-about-dev-command.md"]={toc:[{text:"命令运行的整体流程",id:"命令运行的整体流程",depth:2},{text:"扩展 dev 命令",id:"扩展-dev-命令",depth:2}],title:"深入理解 dev 命令",frontmatter:{sidebar_position:2}}}}]);