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

package/doc_build/static/js/async/9740.b27e6629.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["9740"],{5381:function(e,n,s){s.r(n),s.d(n,{default:function(){return d}});var i=s(8093),r=s(5878);function t(e){let n=Object.assign({h1:"h1",a:"a",p:"p",code:"code",ul:"ul",li:"li",strong:"strong",div:"div",h2:"h2",pre:"pre",blockquote:"blockquote",ol:"ol",h3:"h3"},(0,r.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"})," is a configuration option that describes how to compile and generate build artifacts. It contains all the configurations related to the build process."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(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:["Before start using ",(0,i.jsx)(n.code,{children:"buildConfig"}),", please read the following documentation to understand its purpose:"]}),"\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:"Modifying Output Artifacts"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"/guide/advance/in-depth-about-build.html",children:"In-Depth Understanding of the Build Process"})}),"\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.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"Record<string, string> | Function"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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:["For TypeScript projects, you only need to configure ",(0,i.jsx)(n.a,{href:"https://www.typescriptlang.org/tsconfig#paths",target:"_blank",rel:"noopener noreferrer",children:"compilerOptions.paths"})," in ",(0,i.jsx)(n.code,{children:"tsconfig.json"}),", Modern.js Module will automatically recognize the alias in ",(0,i.jsx)(n.code,{children:"tsconfig.json"}),", so there is no need to configure the ",(0,i.jsx)(n.code,{children:"alias"})," field additionally.\n"]})})]}),"\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    alias: {\n      '@common': '. /src/common',\n    },\n  },\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:["After the above configuration is done, if ",(0,i.jsx)(n.code,{children:"@common/Foo.tsx"})," is referenced in the code, it will map to the ",(0,i.jsx)(n.code,{children:"<project>/src/common/Foo.tsx"})," path."]}),"\n",(0,i.jsxs)(n.p,{children:["When the value of ",(0,i.jsx)(n.code,{children:"alias"})," is defined as a function, you can accept the pre-defined alias object and modify it."]}),"\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    alias: alias => {\n      alias['@common'] = '. /src/common';\n    },\n  },\n};\n"})}),"\n",(0,i.jsx)(n.p,{children:"It is also possible to return a new object as the final result in the function, which will override the pre-defined alias object."}),"\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    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:"Contains configuration related to static assets."}),"\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:"Static resource output file name."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"string | ((assetPath) => name)"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"[name].[hash].[ext]"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"When asset.name is a string, it will automatically replace [name], [ext], and [hash], respectively replaced by the file name, extension, and file hash."}),"\n",(0,i.jsx)(n.p,{children:"Also you can use asset.name as a function, and the return is output asset name. At this time, this function receives a parameter assetPath, which corresponds to the resource path."}),"\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:"Used to set the threshold for static assets to be automatically inlined as base64."}),"\n",(0,i.jsx)(n.p,{children:"By default, Modern.js Module will inline assets such as images, fonts and media smaller than 10KB during bundling. They are Base64 encoded and inlined in the bundles, eliminating the need for separate HTTP requests."}),"\n",(0,i.jsxs)(n.p,{children:["You can adjust this threshold by modifying the ",(0,i.jsx)(n.code,{children:"limit"})," config."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"number"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"10 * 1024"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["For example, set ",(0,i.jsx)(n.code,{children:"limit"})," to ",(0,i.jsx)(n.code,{children:"0"})," to avoid assets inlining:"]}),"\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:["Static resource output path, will be based on ",(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.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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:"The CDN prefix given to unlinked assets when bundling."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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 {\n  buildConfig: {\n    asset: {\n      publicPath: 'https://xxx/',\n    },\n  },\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:["At this point, all static assets will be prefixed with ",(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:["Packaged to handle svg as a React component, options reference ",(0,i.jsx)(n.a,{href:"https://react-svgr.com/docs/options/",target:"_blank",rel:"noopener noreferrer",children:"svgr"}),", plus support for two configuration options ",(0,i.jsx)(n.code,{children:"include"})," and ",(0,i.jsx)(n.code,{children:"exclude"})," to match the svg file to be handled"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean | object"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"false"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"When svgr feature is enabled, you can use svg as a component using the default export."}),"\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.div,{className:"rspress-directive ",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title"}),(0,i.jsxs)(n.div,{className:"rspress-directive-content",children:["\n",(0,i.jsxs)(n.p,{children:["When enabled, the type of svg used can be modified by initing a new declaration file and adding to the ",(0,i.jsx)(n.code,{children:"modern-app-env.d.ts"}),":"]}),"\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:"Set the matching svg file"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"string | RegExp | (string | RegExp)[]"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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:"Set unmatched svg files"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"string | RegExp | (string | RegExp)[]"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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:"Used to configure the SVG export type when using SVGR."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"'named' | 'default'"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"default"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"when it is 'named', use the following syntax:"}),"\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:["The named export defaults to ",(0,i.jsx)(n.code,{children:"ReactComponent"}),", and can be customized with the ",(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:["Suffixes for js files and type description files in automation based on ",(0,i.jsx)(n.a,{href:"#format",children:"format"})," and ",(0,i.jsx)(n.a,{href:"https://nodejs.org/api/packages.html#type",target:"_blank",rel:"noopener noreferrer",children:"type"}),"."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"false"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Version"}),": ",(0,i.jsx)(n.code,{children:">=2.38.0"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["When disabled, js artifacts are suffixed with ",(0,i.jsx)(n.code,{children:".js"})," and type description files are suffixed with ",(0,i.jsx)(n.code,{children:"d.ts"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["When enabled, node loads ",(0,i.jsx)(n.code,{children:".js"})," as esm by default when type is ",(0,i.jsx)(n.code,{children:"module"}),", so when we want to output cjs artifacts, the js product is suffixed with ",(0,i.jsx)(n.code,{children:".cjs"})," and the type description file is suffixed with ",(0,i.jsx)(n.code,{children:"d.cts"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["On the other hand, if the type field is missing or the type is ",(0,i.jsx)(n.code,{children:"commonjs"}),", node loads the ",(0,i.jsx)(n.code,{children:".js"})," file as cjs by default.\nSo when we want to output esm output, the js output is suffixed with ",(0,i.jsx)(n.code,{children:".mjs"})," and the type description file is suffixed with ",(0,i.jsx)(n.code,{children:"d.mts"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:[":::warning\nWhen used in bundleless mode, we have an extra step of processing the import/export statement in each file. We will suffix the relative path to the js file, possibly ",(0,i.jsx)(n.code,{children:".mjs"})," or ",(0,i.jsx)(n.code,{children:".cjs"}),", depending on your package configuration.\nYou can disable this step by ",(0,i.jsx)(n.a,{href:"#redirect",children:"redirect.autoExtension"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["Notice ",(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"})," will break this behavior, you should disable it.\nIf you need to use this configuration in bundleless, please patch the ",(0,i.jsx)(n.code,{children:"index"}),", e.g. if utils is a folder, you need to rewrite ",(0,i.jsx)(n.code,{children:"import * from './utils'"})," to ",(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.jsx)(n.p,{children:"Automatically externalize project dependencies and peerDependencies and not package them into the final bundle"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean | object"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"true"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"When we want to turn off the default handling behavior for third-party dependencies, we can do so by:"}),"\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    autoExternal: false,\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["This way the dependencies under ",(0,i.jsx)(n.code,{children:'"dependencies"'})," and ",(0,i.jsx)(n.code,{children:'"peerDependencies"'})," will be bundled. If you want to turn off the processing of only one of these dependencies, you can use the\n",(0,i.jsx)(n.code,{children:"buildConfig.autoExternal"})," in the form of an object."]}),"\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    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.jsx)(n.p,{children:"Whether or not the dep dependencies of the external project are needed"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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.jsx)(n.p,{children:"Whether to require peerDep dependencies for external projects"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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:"Provides the ability to inject content into the top and bottom of each JS , CSS and DTS file."}),"\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.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"BannerAndFooter"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"{}"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Version"}),": ",(0,i.jsx)(n.code,{children:">=2.36.0"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Let's say you want to add copyright information to JS and CSS files."}),"\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:["The build type, ",(0,i.jsx)(n.code,{children:"bundle"})," will package your code, ",(0,i.jsx)(n.code,{children:"bundleless"})," will only do the code conversion"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"'bundle' | 'bundleless'"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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:"Copies the specified file or directory into the build output directory"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"object[]"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"[]"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"export default {\n  buildConfig: {\n    copy: [{ from: '. /src/assets', to: '' }],\n  },\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Reference for array settings: ",(0,i.jsx)(n.a,{href:"https://github.com/webpack-contrib/copy-webpack-plugin#patterns",target:"_blank",rel:"noopener noreferrer",children:"copy-webpack-plugin patterns"})]}),"\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.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"CopyPattern[]"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),":"]}),"\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.strong,{children:"Default"}),": ",(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"}),": Specifies how many copy tasks to execute in parallel."]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"enableCopySync"}),": Uses ",(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"})})," by default, instead of ",(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:"Define global variables that will be injected into the code"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"Record<string, string>"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"{}"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Since the ",(0,i.jsx)(n.code,{children:"define"})," function is implemented by global text replacement, you need to ensure that the global variable values are strings. A safer approach is to convert the value of each global variable to a string, as follows."]}),"\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:"Modern.js automatically performs JSON serialization handling internally, so manual serialization is not required."}),"\n",(0,i.jsxs)(n.p,{children:["If automatic serialization is not needed, you can define ",(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"})})," using ",(0,i.jsx)(n.a,{href:"/api/config/build-config.html#esbuildoptions",children:(0,i.jsx)(n.code,{children:"esbuildOptions"})})," configuration."]}),"\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:["If the project is a TypeScript project, then you may need to add the following to the ",(0,i.jsx)(n.code,{children:".d.ts"})," file in the project source directory."]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["If the ",(0,i.jsx)(n.code,{children:".d.ts"})," file does not exist, then you can create it manually."]}),"\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:"You can also replace environment variable:"}),"\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:"With the above configuration, we can put the following code."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"// pre-compiler code\nconsole.log(process.env.VERSION);\n"})}),"\n",(0,i.jsxs)(n.p,{children:["When executing ",(0,i.jsx)(n.code,{children:"VERSION=1.0.0 modern build"}),", the conversion is:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"// compiled code\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:"To prevent excessive global replacement substitution, it is recommended that the following two principles be followed when using"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Use upper case for global constants"}),"\n",(0,i.jsx)(n.li,{children:"Customize the prefix and suffix of global constants to ensure uniqueness"}),"\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:"The dts file generates the relevant configuration, by default it generates."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"false | object"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),":"]}),"\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:"Whether to allow the build to succeed if a type error occurs."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"true"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"By default, type errors will cause the build to fail"}),". When ",(0,i.jsx)(n.code,{children:"abortOnError"})," is set to ",(0,i.jsx)(n.code,{children:"false"}),", the build will still succeed even if there are type issues in the code:"]}),"\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:["When this configuration is disabled, there is no guarantee that the type files will be generated correctly. In ",(0,i.jsx)(n.code,{children:"buildType: 'bundle'"}),", which is the bundle mode, type files will not be generated.\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:["The output path of the dts file, based on ",(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.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"./"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["For example, output to the ",(0,i.jsx)(n.code,{children:"types"})," directory under the ",(0,i.jsx)(n.code,{children:"outDir"}),":"]}),"\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:"Enable the tsc '--build' option. When using project reference,\nyou can use the '--build' option to achieve cooperation between projects and speed up the build speed."}),"\n",(0,i.jsx)(n.p,{children:"This option requires version > 2.43.0,In fact,\nwe experimentally enabled this option in the 2.42.0 version, but the many problems it brought forced us to enable it dynamically."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-warning",children:"When this option is enabled, to meet the build requirements, you must explicitly set 'declarationDir' or 'outDir' in tsconfig.json,\nIf you are not using TS >= 5.0 version, you also need to explicitly set 'declaration' and 'emitDeclarationOnly'.\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"false"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Version"}),": ",(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:"Whether to generate only type files during the build process without generating JavaScript output files."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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:"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:"deprecated"}),",use ",(0,i.jsx)(n.a,{href:"#tsconfig",children:"tsconfig"})," instead."]}),"\n",(0,i.jsx)(n.p,{children:"Specifies the path to the tsconfig file used to generate the type file."}),"\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:"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:["When set to ",(0,i.jsx)(n.code,{children:"false"}),", the type of third-party packages will be excluded from the bundle, when set to ",(0,i.jsx)(n.code,{children:"true"}),", it will determine whether third-party types need to be bundled based on ",(0,i.jsx)(n.a,{href:"#externals",children:"externals"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"When bundle d.ts, export is not analyzed, so any third-party package type you use may break your build, which is obviously uncontrollable.\nSo we can avoid it with this configuration."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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:"esbuildoptions",children:["esbuildOptions",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#esbuildoptions",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["Used to modify the ",(0,i.jsx)(n.a,{href:"https://esbuild.github.io/api/",target:"_blank",rel:"noopener noreferrer",children:"esbuild configuration"}),"."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"Function"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Build Type"}),": ",(0,i.jsx)(n.code,{children:"Only supported for buildType: 'bundle'"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"c => c"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"For example, if we need to modify the file extension of the generated files:"}),"\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    esbuildOptions: options => {\n      options.outExtension = { '.js': '.mjs' };\n      return options;\n    },\n  },\n});\n"})}),"\n",(0,i.jsx)(n.p,{children:"For example, register an esbuild plugin:"}),"\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:"When adding an esbuild plugin, please note that you need to add the plugin at the beginning of the plugins array. This is because the Modern.js Module is also integrated into the entire build process through an esbuild plugin. Therefore, custom plugins need to be registered with higher priority."}),"\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:"We have done many extensions based on the original esbuild build. Therefore, when using this configuration, pay attention to the following:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["Prefer to use the configuration that Modern.js Module provides. For example, esbuild does not support ",(0,i.jsx)(n.code,{children:"target: 'es5'"}),", but we support this scenario internally using SWC. Setting ",(0,i.jsx)(n.code,{children:"target: 'es5'"})," through esbuildOptions will result in an error."]}),"\n",(0,i.jsx)(n.li,{children:"Currently, we use enhanced-resolve internally to replace esbuild's resolve algorithm, so modifying esbuild resolve-related configurations is invalid. We plan to switch back in the future."}),"\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:"By default, the output JS code may depend on helper functions to support the target environment or output format, and these helper functions will be inlined in the file that requires it."}),"\n",(0,i.jsxs)(n.p,{children:["With this configuration, the code will be converted using SWC, it will inline helper functions to import them from the external module ",(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.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"false"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Below is a comparison of the output file changes before and after using this configuration."}),"\n",(0,i.jsx)(n.p,{children:"Before enable:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="./dist/index.js"',children:"// helper function\nfunction asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {\n  // ...\n}\n// helper function\nfunction _async_to_generator(fn) {\n  return function () {\n    // use asyncGeneratorStep\n    // ...\n  };\n}\n\n// your code\nexport var yourCode = function () {\n  // use _async_to_generator\n};\n"})}),"\n",(0,i.jsx)(n.p,{children:"After enabled:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="./dist/index.js"',children:"// helper functions imported from @swc/helpers\nimport { _ as _async_to_generator } from '@swc/helpers/_/_async_to_generator';\n\n// your code\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:"Configure external dependencies that will not be bundled into the final bundle."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),":"]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"type External = (string | RegExp)[];\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"[]"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Build Type"}),": ",(0,i.jsx)(n.code,{children:"Only supported for buildType: 'bundle'"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Example"}),":"]}),"\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    // do not bundle 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:["Same as the ",(0,i.jsx)(n.a,{href:"#banner",children:"banner"})," configuration for adding a comment at the end of the output file."]}),"\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:["Used to set the output format of JavaScript files. The options ",(0,i.jsx)(n.code,{children:"iife"})," and ",(0,i.jsx)(n.code,{children:"umd"})," only take effect when ",(0,i.jsx)(n.code,{children:"buildType"})," is ",(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.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"'esm' | 'cjs' | 'iife' | 'umd'"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"esm"}),' stands for "ECMAScript module" and requires the runtime environment to support import and export syntax.']}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Example"}),":"]}),"\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.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"cjs"}),' stands for "CommonJS" and requires the runtime environment to support exports, require, and module syntax. This format is commonly used in Node.js environments.']}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Example"}),":"]}),"\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.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"iife"}),' stands for "immediately-invoked function expression" and wraps the code in a function expression to ensure that any variables in the code do not accidentally conflict with variables in the global scope. This format is commonly used in browser environments.']}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Example"}),":"]}),"\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.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"umd"}),' stands for "Universal Module Definition" and is used to run modules in different environments such as browsers and Node.js. Modules in UMD format can be used in various environments, either as global variables or loaded as modules using module loaders like RequireJS.']}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Example"}),":"]}),"\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:"Build lifecycle hooks that allow custom logic to be injected at specific stages of the build process."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Types"}),":"]}),"\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  applyAfterBuiltIn?: boolean;\n}\n\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"[]"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["We can get the compiler instance in the apply method, modify its properties, and execute custom logic at different stages. For more information on Hooks, see [Using Hooks to Intervene in the Build Process](see [Using Hooks to Intervene in the Build Process]).\nFor more information on Hooks, see ",(0,i.jsx)(n.a,{href:"/guide/advance/in-depth-about-build.html#using-hooks-to-intervene-in-the-build-process",children:"Using-hooks-to-intervene-in-the-build-process"}),"."]}),"\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:"Specify the entry file for the build, in the form of an array that can specify the directory"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),":"]}),"\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.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"['src/index.ts']"})," in ",(0,i.jsx)(n.code,{children:"bundle"})," mode, ",(0,i.jsx)(n.code,{children:"['src']"})," in ",(0,i.jsx)(n.code,{children:"bundleless"})," mode"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Array usage:"})}),"\n",(0,i.jsxs)(n.p,{children:["In ",(0,i.jsx)(n.code,{children:"bundle"})," mode, the following configurations will be built using ",(0,i.jsx)(n.code,{children:"src/index.ts"})," and ",(0,i.jsx)(n.code,{children:"src/index2.ts"})," as entry points. The ",(0,i.jsx)(n.code,{children:"bundle"})," mode does not support configuring ",(0,i.jsx)(n.code,{children:"input"})," as a directory."]}),"\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    buildType: 'bundle',\n    input: ['src/index.ts', 'src/index2.ts'],\n  },\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:["In ",(0,i.jsx)(n.code,{children:"bundleless"})," mode, the following configuration compiles both files in the ",(0,i.jsx)(n.code,{children:"src/a"})," directory and ",(0,i.jsx)(n.code,{children:"src/index.ts"})," file."]}),"\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:["In ",(0,i.jsx)(n.code,{children:"bundleless"})," mode, ",(0,i.jsx)(n.strong,{children:"Array usage"})," also supports the usage of ",(0,i.jsx)(n.code,{children:"!"})," to filter partial files:"]}),"\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:["The above configuration will build the files in the ",(0,i.jsx)(n.code,{children:"src"})," directory, and will also filter files with the ",(0,i.jsx)(n.code,{children:"spec.ts"})," suffix.This is useful in cases where the test files are in the same root directory as the source files."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Object usage:"})}),"\n",(0,i.jsx)(n.p,{children:"When you need to modify the output file name in bundle mode, you can use an object configuration."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"The key of the object is the file name of the output, and the value is the file path of the source code."})}),"\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:"Specify the compilation method for JSX, which by default supports React 17 and higher versions and automatically injects JSX runtime code."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"automatic | transform"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"automatic"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["If you need to support React 16, you can set ",(0,i.jsx)(n.code,{children:"jsx"})," to ",(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:["If you don't need to convert JSX, you can set ",(0,i.jsx)(n.code,{children:"jsx"})," to ",(0,i.jsx)(n.code,{children:"preserve"}),", but don't ",(0,i.jsx)(n.a,{href:"/guide/advance/in-depth-about-build#use-swc",children:"use swc"})," to do the code conversion.\nFor more information about JSX Transform, you can refer to the following links:"]}),"\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:"Experimental"})}),"\n",(0,i.jsx)(n.p,{children:"This option is used to change the interpretation method of the given input file.\nFor example, you need to handle the js file as 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:"This option is used for build analysis. When enabled, esbuild will generate metadata about the build in JSON format."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"false"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Build Type"}),": ",(0,i.jsx)(n.code,{children:"Only supported for buildType: 'bundle'"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["To enable ",(0,i.jsx)(n.code,{children:"metafile"})," generation:"]}),"\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:["After executing the build, a ",(0,i.jsx)(n.code,{children:"metafile-[xxx].json"})," file will be generated in the output directory. You can use tools like ",(0,i.jsx)(n.a,{href:"https://esbuild.github.io/analyze/",target:"_blank",rel:"noopener noreferrer",children:"esbuild analyze"})," and ",(0,i.jsx)(n.a,{href:"https://bundle-buddy.com/esbuild",target:"_blank",rel:"noopener noreferrer",children:"bundle-buddy"})," for visual analysis."]}),"\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:["Use esbuild or terser to compress code, also pass ",(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.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"'terser' | 'esbuild' | false | object"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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 {\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:"Specifies the output directory of the build."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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:["Generates code for the node environment by default, you can also specify ",(0,i.jsx)(n.code,{children:"browser"})," which will generate code for the browser environment.\nSee ",(0,i.jsx)(n.a,{href:"https://esbuild.github.io/api/#platform",target:"_blank",rel:"noopener noreferrer",children:"esbuild.platform"})," learn more."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"'browser' | 'node'"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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:["In ",(0,i.jsx)(n.strong,{children:(0,i.jsx)(n.code,{children:"buildType: 'bundleless'"})})," build mode, the reference path is redirected to ensure that it points to the correct product, e.g:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"import '. /index.less'"})," will be rewritten to ",(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'"})," would be rewritten as ",(0,i.jsx)(n.code,{children:"import icon from '... /asset/close.svg'"})," to ",(0,i.jsx)(n.code,{children:"import icon from '. /asset/close.svg'"})," (depending on the situation)"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"import * from './utils'"})," will be rewritten to ",(0,i.jsx)(n.code,{children:"import * from './utils.mjs'"})," (if generate utils.mjs, depending on the situation)"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"In some scenarios, you may not need these functions, then you can turn it off with this configuration, and its reference path will not be changed after turning it off."}),"\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, // Turn off modifying alias paths\n      style: false, // Turn off modifying the path to the style file\n      asset: false, // Turn off modifying the path to the asset\n      autoExtension: false, // Turn off modifying the suffix to the js file\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:"Custom module resolution options"}),"\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:["The basic usage is the same as ",(0,i.jsx)(n.a,{href:"#alias",children:"alias"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["The issue with ",(0,i.jsx)(n.a,{href:"#alias",children:"alias"})," is that we incorrectly handled Module IDs in a bundleless scenario:"]}),"\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:["When we configure alias: ",(0,i.jsx)(n.code,{children:"{ react: 'react-native' }"}),", the result becomes:"]}),"\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:"A Module ID is incorrectly processed as a relative path, which is not expected."}),"\n",(0,i.jsx)(n.p,{children:"We want to fix this issue, but it may break existing projects."}),"\n",(0,i.jsxs)(n.p,{children:["Therefore, in ",(0,i.jsx)(n.strong,{children:"2.58.0"}),", we provided ",(0,i.jsx)(n.code,{children:"resolve.alias"})," to solve this problem. Additionally, ",(0,i.jsx)(n.code,{children:"resolve.alias"})," removed the default value ",(0,i.jsx)(n.code,{children:'{ "@": "./src"}'})," provided by ",(0,i.jsx)(n.a,{href:"#alias",children:"alias"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["If you need this feature, please use ",(0,i.jsx)(n.code,{children:"resolve.alias"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["In the next major version, ",(0,i.jsx)(n.code,{children:"resolve.alias"})," will replace ",(0,i.jsx)(n.a,{href:"#alias",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:["Note that this configuration should not be mixed with ",(0,i.jsx)(n.a,{href:"#alias",children:"alias"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:["Ensure that this configuration specifies a relative path, such as ",(0,i.jsx)(n.code,{children:'{ "@": "./src" }'})," rather than ",(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:"A list of fields in package.json to try when parsing the package entry point."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"string[]"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": depends on ",(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.strong,{children:"Version"}),": ",(0,i.jsx)(n.code,{children:">=2.36.0"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["For example, we want to load the ",(0,i.jsx)(n.code,{children:"js:source"})," field first:"]}),"\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"})," has a lower priority than the exports field in package.json, and if an entry point is successfully resolved from exports, ",(0,i.jsx)(n.code,{children:"resolve.mainFields"})," will be ignored.\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:"Support for implicit file extensions"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"string[]"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"['.jsx', '.tsx', '.js', '.ts', '.json']"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Version"}),": ",(0,i.jsx)(n.code,{children:">=2.36.0"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Do not use implicit file extensions for css files, currently Module only supports ['.less', '.css', '.sass', '.scss'] suffixes."}),"\n",(0,i.jsxs)(n.p,{children:["Node's parsing algorithm does not consider ",(0,i.jsx)(n.code,{children:".mjs"})," and ",(0,i.jsx)(n.code,{children:"cjs"})," as implicit file extensions, so they are not included here by default, but can be included by changing this configuration:"]}),"\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.jsxs)(n.p,{children:["When building CommonJS/ESM artifacts, inject some polyfill code such as ",(0,i.jsx)(n.code,{children:"__dirname"})," which can only be used in CommonJS.\nAfter enable this option, it will compile ",(0,i.jsx)(n.code,{children:"__dirname"})," as ",(0,i.jsx)(n.code,{children:"path.dirname(fileURLToPath(import.meta.url))"})," when format is esm."]}),"\n",(0,i.jsxs)(n.p,{children:["See details ",(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:"here"}),",\nNote that esm shims will only be injected if ",(0,i.jsx)(n.a,{href:"#platform",children:"platform"})," is node, because the url module is used."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"false"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Version"}),": ",(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:"Module sideEffects"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"RegExg[] | (filePath: string, isExternal: boolean) => boolean | boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"undefined"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Normally, we configure the module's side effects via the sideEffects field in package.json, but in some cases, The package.json of a third-party package is unreliable.Such as when we reference a third-party package style file"}),"\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.jsx)(n.p,{children:"But the package.json of this third-party package does not have the style file configured in the 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:["At the same time you set ",(0,i.jsx)(n.a,{href:"#styleinject",children:"style.inject"})," to ",(0,i.jsx)(n.code,{children:"true"})," and you will see a warning message like this in the console"]}),"\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:["At this point, you can use this configuration option to manually configure the module's ",(0,i.jsx)(n.code,{children:'"sideEffects"'})," to support regular and functional forms."]}),"\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.jsx)(n.p,{children:"After adding this configuration, the sideEffects field in package.json will no longer be read when packaging"})})]}),"\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:["Specify the source directory of the build, default is ",(0,i.jsx)(n.code,{children:"src"}),", which is used to generate the corresponding output directory based on the source directory structure when building ",(0,i.jsx)(n.code,{children:"bundleless"}),".\nSame as ",(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.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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:"Whether to generate sourceMap or not"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean | 'inline' | 'external'"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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.p,{children:["Sets the format of the source code. By default, the source code will be treated as EsModule. When the source code is using CommonJS, you need to set ",(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.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"'commonjs' | 'module'"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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:["Whether to enable code splitting.\nOnly support ",(0,i.jsx)(n.a,{href:"#format-esm",children:"format: 'esm'"})," and ",(0,i.jsx)(n.a,{href:"#format-cjs",children:"format: 'cjs'"}),",see ",(0,i.jsx)(n.a,{href:"https://esbuild.github.io/api/#splitting",target:"_blank",rel:"noopener noreferrer",children:"esbuild.splitting"})," learn more."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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:"Configure style-related configuration"}),"\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-related configuration"}),"\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:["Refer to ",(0,i.jsx)(n.a,{href:"https://less.bootcss.com/usage/#less-options",target:"_blank",rel:"noopener noreferrer",children:"less"})," for detailed configuration"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"object"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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:["Add ",(0,i.jsx)(n.code,{children:"Less"})," code to the beginning of the entry file."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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 {\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:["Configure the implementation library used by ",(0,i.jsx)(n.code,{children:"Less"}),", if not specified, the built-in version used is ",(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.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"string | object"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"undefined"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Specify the implementation library for ",(0,i.jsx)(n.code,{children:"Less"})," when the ",(0,i.jsx)(n.code,{children:"object"})," type is specified."]}),"\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    style: {\n      less: {\n        implementation: require('less'),\n      },\n    },\n  },\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:["For the ",(0,i.jsx)(n.code,{children:"string"})," type, specify the path to the implementation library for ",(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 {\n  buildConfig: {\n    style: {\n      less: {\n        implementation: require.resolve('less'),\n      },\n    },\n  },\n};\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"stylesass",children:["style.sass",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#stylesass",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"sass-related configuration."}),"\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:["Refer to ",(0,i.jsx)(n.a,{href:"https://github.com/sass/node-sass#options",target:"_blank",rel:"noopener noreferrer",children:"node-sass"})," for detailed configuration."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"object"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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:["Add ",(0,i.jsx)(n.code,{children:"Sass"})," code to the beginning of the entry file."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"string | Function"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(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 {\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:["Configure the implementation library used by ",(0,i.jsx)(n.code,{children:"Sass"}),", the built-in version used is ",(0,i.jsx)(n.code,{children:"1.5.4"})," if not specified."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"string | object"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"undefined"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Specify the implementation library for ",(0,i.jsx)(n.code,{children:"Sass"})," when the ",(0,i.jsx)(n.code,{children:"object"})," type is specified."]}),"\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    style: {\n      sass: {\n        implementation: require('sass'),\n      },\n    },\n  },\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:["For the ",(0,i.jsx)(n.code,{children:"string"})," type, specify the path to the ",(0,i.jsx)(n.code,{children:"Sass"})," implementation library"]}),"\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    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:["Used to configure options for PostCSS. The provided values will be merged with the default configuration using ",(0,i.jsx)(n.code,{children:"Object.assign"}),". Note that ",(0,i.jsx)(n.code,{children:"Object.assign"})," performs a shallow copy, so it will completely override the built-in ",(0,i.jsx)(n.code,{children:"plugins"})," array."]}),"\n",(0,i.jsxs)(n.p,{children:["For detailed configuration, please refer to ",(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.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),":"]}),"\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.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),":"]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"const defaultConfig = {\n  plugins: [\n    // The following plugins are enabled by default\n    require('postcss-flexbugs-fixes'),\n    require('postcss-media-minmax'),\n    require('postcss-nesting'),\n    // The following plugins are only enabled when the target is `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.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Example"}),":"]}),"\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:"Configure whether to insert CSS styles into JavaScript code in bundle mode."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"false"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Set ",(0,i.jsx)(n.code,{children:"inject"})," to ",(0,i.jsx)(n.code,{children:"true"})," to enable this feature:"]}),"\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:"Once enabled, you will see the CSS code referenced in the source code included in the bundled JavaScript output."}),"\n",(0,i.jsxs)(n.p,{children:["For example, if you write ",(0,i.jsx)(n.code,{children:"import './index.scss'"})," in the source code, you will see the following code in the output:"]}),"\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:["After enabling ",(0,i.jsx)(n.code,{children:"inject"}),", you need to pay attention to the following points:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"@import"})," in CSS files will not be processed. If your CSS file contains ",(0,i.jsx)(n.code,{children:"@import"}),", you need to manually import the CSS file in the JS file (less and scss files are not required because they have preprocessing)."]}),"\n",(0,i.jsxs)(n.li,{children:["Consider the impact of ",(0,i.jsx)(n.code,{children:"sideEffects"}),". By default, our builder assumes that CSS has side effects. If the ",(0,i.jsx)(n.code,{children:"sideEffects"})," field is set in your project or third-party package's package.json and does not include this CSS file, you will receive a warning:"]}),"\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:["You can resolve this by configuring ",(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:"Enable CSS Modules automatically based on the filename."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean | RegExp"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"true"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"true"})," : Enables CSS Modules for style files ending with ",(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"})," filenames"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"false"})," : Disable CSS Modules."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"RegExp"})," : Enables CSS Modules for all files that match the regular condition."]}),"\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 configuration"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"object"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"{}"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["A common configuration is ",(0,i.jsx)(n.code,{children:"localsConvention"}),", which changes the class name generation rules for 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 {\n  buildConfig: {\n    style: {\n      modules: {\n        localsConvention: 'camelCaseOnly',\n      },\n    },\n  },\n};\n"})}),"\n",(0,i.jsx)(n.p,{children:"For the following styles"}),"\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:["You can use ",(0,i.jsx)(n.code,{children:"styles.boxTitle"})," to access"]}),"\n",(0,i.jsxs)(n.p,{children:["For detailed configuration see ",(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:["Used to modify the configuration of ",(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.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"object | Function"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),":"]}),"\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:"enabling-tailwind-css",children:["Enabling Tailwind CSS",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#enabling-tailwind-css",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["Before using ",(0,i.jsx)(n.code,{children:"style.tailwindcss"}),", you need to enable the Tailwind CSS plugin for Modern.js Module."]}),"\n",(0,i.jsxs)(n.p,{children:["Please refer to the section ",(0,i.jsx)(n.a,{href:"/guide/best-practices/use-tailwindcss.html",children:"Using Tailwind CSS"})," for instructions on how to enable it."]}),"\n",(0,i.jsxs)(n.h3,{id:"type",children:["Type",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#type",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["When the value is of type ",(0,i.jsx)(n.code,{children:"object"}),", it is merged with the default configuration via ",(0,i.jsx)(n.code,{children:"Object.assign"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["When the value is of type ",(0,i.jsx)(n.code,{children:"Function"}),", the object returned by the function is merged with the default configuration via ",(0,i.jsx)(n.code,{children:"Object.assign"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["The rest of the usage is the same as Tailwind CSS: ",(0,i.jsx)(n.a,{href:"https://tailwindcss.com/docs/configuration",target:"_blank",rel:"noopener noreferrer",children:"Quick Portal"}),"."]}),"\n",(0,i.jsxs)(n.h3,{id:"notes",children:["Notes",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#notes",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"Please note that:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["If you are using both the ",(0,i.jsx)(n.code,{children:"tailwind.config.{ts,js}"})," file and ",(0,i.jsx)(n.code,{children:"tools.tailwindcss"})," option, the configuration defined in ",(0,i.jsx)(n.code,{children:"tools.tailwindcss"})," will take precedence and override the content defined in ",(0,i.jsx)(n.code,{children:"tailwind.config.{ts,js}"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:["If you are using the ",(0,i.jsx)(n.code,{children:"designSystem"})," configuration option simultaneously, the ",(0,i.jsx)(n.code,{children:"theme"})," configuration of Tailwind CSS will be overridden by the value of ",(0,i.jsx)(n.code,{children:"designSystem"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["The usage of other configurations follows the same approach as the official usage of Tailwind CSS. Please refer to ",(0,i.jsx)(n.a,{href:"https://tailwindcss.com/docs/configuration",target:"_blank",rel:"noopener noreferrer",children:"tailwindcss - Configuration"})," for more details."]}),"\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"})," is used to set the target environment for the generated JavaScript code. It enables Modern.js Module to transform JavaScript syntax that is not recognized by the target environment into older versions of JavaScript syntax that are compatible with these environments."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),":"]}),"\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.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"'es6'"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["For example, compile the code to ",(0,i.jsx)(n.code,{children:"es5"})," syntax:"]}),"\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.jsxs)(n.p,{children:["Using ",(0,i.jsx)(n.a,{href:"https://swc.rs/",target:"_blank",rel:"noopener noreferrer",children:"SWC"})," provides the same ability and configuration as ",(0,i.jsx)(n.a,{href:"https://github.com/umijs/babel-plugin-import",target:"_blank",rel:"noopener noreferrer",children:(0,i.jsx)(n.code,{children:"babel-plugin-import"})}),".\nWith this configuration, the code will be converted using SWC."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"object[]"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"[]"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["The elements of the array are configuration objects for ",(0,i.jsx)(n.code,{children:"babel-plugin-import"}),", which can be referred to ",(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:(0,i.jsx)(n.strong,{children:"Example:"})}),"\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    transformImport: [\n      // babel-plugin-import`s options config\n      {\n        libraryName: 'foo',\n        style: true,\n      },\n    ],\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Reference the ",(0,i.jsx)(n.a,{href:"/plugins/official-list/plugin-import.html#notes",children:"Import Plugin - Notes"})]}),"\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:["Specifies whether to modularize the import of ",(0,i.jsx)(n.a,{href:"https://www.npmjs.com/package/lodash",target:"_blank",rel:"noopener noreferrer",children:"lodash"})," and remove unused lodash modules to reduce the code size of lodash."]}),"\n",(0,i.jsxs)(n.p,{children:["This optimization is implemented using ",(0,i.jsx)(n.a,{href:"https://www.npmjs.com/package/babel-plugin-lodash",target:"_blank",rel:"noopener noreferrer",children:"babel-plugin-lodash"})," and ",(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"})," under the hood."]}),"\n",(0,i.jsx)(n.p,{children:"With this configuration, the code will be converted using SWC."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"false"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["When you enable this, Modern.js Module will automatically redirects the code references of ",(0,i.jsx)(n.code,{children:"lodash"})," to sub-paths."]}),"\n",(0,i.jsx)(n.p,{children:"For example:"}),"\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:"The transformed code will be:"}),"\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:"Path to the tsconfig file"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"tsconfig.json"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Version"}),": ",(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:"Specify global variables for external import of umd artifacts"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"Record<string, string>"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{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 {\n  buildConfig: {\n    umdGlobals: {\n      react: 'React',\n      'react-dom': 'ReactDOM',\n    },\n  },\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:["At this point, ",(0,i.jsx)(n.code,{children:"react"})," and ",(0,i.jsx)(n.code,{children:"react-dom"})," will be seen as global variables imported externally and will not be packed into the umd product, but will be accessible by way of ",(0,i.jsx)(n.code,{children:"global.React"})," and ",(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:"Specifies the module name of the umd product"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Type"}),": ",(0,i.jsx)(n.code,{children:"string | Function"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"name => name"})]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"export default {\n  buildConfig: {\n    format: 'umd',\n    umdModuleName: 'myLib',\n  },\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:["At this point the umd artifact will go to mount on ",(0,i.jsx)(n.code,{children:"global.myLib"})]}),"\n",(0,i.jsx)(n.p,{children:":::tip"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The module name of the umd artifact must not conflict with the global variable name."}),"\n",(0,i.jsxs)(n.li,{children:["Module names will be converted to camelCase, e.g. ",(0,i.jsx)(n.code,{children:"my-lib"})," will be converted to ",(0,i.jsx)(n.code,{children:"myLib"}),", refer to ",(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:"Also the function form can take one parameter, which is the output path of the current package file"}),"\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    format: 'umd',\n    umdModuleName: path => {\n      if (path.includes('index')) {\n        return 'myLib';\n      } else {\n        return 'myLib2';\n      }\n    },\n  },\n};\n"})})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,r.ah)(),e.components);return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(t,{...e})}):t(e)}let d=l;l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["en%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.tsconfigPath",id:"dtstsconfigpath",depth:2},{text:"dts.respectExternal",id:"dtsrespectexternal",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:"style.sass",id:"stylesass",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:"Enabling Tailwind CSS",id:"enabling-tailwind-css",depth:3},{text:"Type",id:"type",depth:3},{text:"Notes",id:"notes",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/index.6a5d779d.js

@@ -0,0 +1 @@
+(()=>{"use strict";var e={2285:function(e,n,t){t.r(n),t.d(n,{Aside:function(){return r.xN},Badge:function(){return r.Ct},Button:function(){return r.zx},DocFooter:function(){return r.Qn},DocLayout:function(){return r.RY},EditLink:function(){return r.mi},HomeFeature:function(){return r.BZ},HomeFooter:function(){return r.xK},HomeHero:function(){return r.xB},HomeLayout:function(){return r.Os},LastUpdated:function(){return r.O9},Layout:function(){return r.Ar},Link:function(){return r.rU},Nav:function(){return r.JL},NotFoundLayout:function(){return r.qx},Overview:function(){return r.g2},PackageManagerTabs:function(){return r.SU},PrevNextPage:function(){return r.Qe},RenderType:function(){return r.y2},ScrollToTop:function(){return r.pU},Search:function(){return r.ol},SearchPanel:function(){return r.EG},Sidebar:function(){return r.YE},SocialLinks:function(){return r.WG},SourceCode:function(){return r.ZB},Steps:function(){return r.Rg},SwitchAppearance:function(){return r.KO},Tab:function(){return r.OK},Tabs:function(){return r.mQ},Tag:function(){return r.Vp},Toc:function(){return r.of},bindingAsideScroll:function(){return r.UQ},default:function(){return r.ZP},getCustomMDXComponent:function(){return r.TJ},isActive:function(){return r.zh},isMobileDevice:function(){return r.s2},parseInlineMarkdownText:function(){return r.H_},renderHtmlOrText:function(){return r.NG},renderInlineMarkdown:function(){return r.VA},scrollToTarget:function(){return r.eF},setup:function(){return r.cY},useEditLink:function(){return r.CU},useEnableNav:function(){return r.CF},useFullTextSearch:function(){return r.YS},useHiddenNav:function(){return r.Vl},useLocaleSiteData:function(){return r.M4},usePathUtils:function(){return r.eE},usePrevNextPage:function(){return r.WS},useRedirect4FirstVisit:function(){return r.AV},useSidebarData:function(){return r.tx},useThemeState:function(){return r.ls}});var r=t(7817)}},n={};function t(r){var u=n[r];if(void 0!==u)return u.exports;var o=n[r]={exports:{}};return e[r].call(o.exports,o,o.exports,t),o.exports}t.m=e,t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,{a:n}),n},(()=>{var e,n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__};t.t=function(r,u){if(1&u&&(r=this(r)),8&u||"object"==typeof r&&r&&(4&u&&r.__esModule||16&u&&"function"==typeof r.then))return r;var o=Object.create(null);t.r(o);var c={};e=e||[null,n({}),n([]),n(n)];for(var i=2&u&&r;"object"==typeof i&&!~e.indexOf(i);i=n(i))Object.getOwnPropertyNames(i).forEach(function(e){c[e]=function(){return r[e]}});return c.default=function(){return r},t.d(o,c),o}})(),t.d=function(e,n){for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.f={},t.e=function(e){return Promise.all(Object.keys(t.f).reduce(function(n,r){return t.f[r](e,n),n},[]))},t.u=function(e){return"static/js/async/"+e+"."+({1095:"4ca5fdf0",1148:"ff6a84ca",1306:"8bc84d6b",1507:"fed31a58",1527:"4c6e53e2",1657:"d0d95d59",1801:"5d49a2fe",1941:"0b3cceee",213:"db8a0492",2131:"5dfdffa9",2140:"848412d7",2206:"f6b802b2",2300:"cba0106e",2347:"a480682f",2365:"daed0a9c",2561:"2e43400c",2579:"f7c71e6b",2671:"c711355f",2704:"561dadd9",2712:"5ffea5ba",3023:"5bef6325",3039:"3982622e",3097:"b043b3aa",3213:"df408a99",3235:"0c4d2c9b",336:"8387125c",3493:"5133deaa",351:"de7824af",3597:"cf46a69b",36:"eee0e8fe",3628:"726e3f10",3724:"bcc90bb4",3761:"949f5838",4061:"84ac839b",4064:"104b71cd",4206:"133ffe9e",443:"b519ce6b",4501:"c647ab73",453:"7358c1fd",461:"2d6ea16c",4615:"c4e5b749",4655:"bbe27e7b",4812:"ebd3f4cb",4904:"de72a299",5105:"28347c4d",5453:"87dcea50",5455:"9e038fda",5493:"3644c7b8",5495:"50aacc7e",5555:"40dabd12",5558:"073d18d0",5844:"b3a9d57a",588:"6de9811a",5889:"41a786b6",5892:"b0db6657",5995:"209e2925",6046:"963bbf59",6308:"6363792d",6576:"a753babb",6615:"154a2810",6858:"e2452605",6975:"be4ba201",7080:"1c684c7d",7220:"1c4ee8bb",7406:"b2acec42",7521:"ca744786",7535:"f50f0fd1",7584:"c3b673fd",7600:"03d9da89",7663:"86b79735",769:"2bc1c7b7",7715:"1bfe887f",7837:"5667c422",8040:"1cfb21ff",8085:"f9f71860",8098:"beeb77f3",8134:"068074a0",8158:"2834ced1",8214:"2fdfe2fe",8233:"24111213",8451:"5328c0c7",8689:"f8447ca1",8694:"077556c4",8713:"91395601",8750:"0f6872b3",8802:"463e3040",9100:"066e1017",9250:"8fb41a47",9524:"bb257861",9611:"b2543acb",964:"b00f3e9f",9740:"b27e6629"})[e]+".js"},t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},(()=>{var e={},n="@modern-js/module-tools-docs:";t.l=function(r,u,o,c){if(e[r]){e[r].push(u);return}if(void 0!==o){for(var i,f,a=document.getElementsByTagName("script"),d=0;d<a.length;d++){var l=a[d];if(l.getAttribute("src")==r||l.getAttribute("data-webpack")==n+o){i=l;break}}}!i&&(f=!0,(i=document.createElement("script")).charset="utf-8",i.timeout=120,t.nc&&i.setAttribute("nonce",t.nc),i.setAttribute("data-webpack",n+o),i.src=r),e[r]=[u];var s=function(n,t){i.onerror=i.onload=null,clearTimeout(b);var u=e[r];if(delete e[r],i.parentNode&&i.parentNode.removeChild(i),u&&u.forEach(function(e){return e(t)}),n)return n(t)},b=setTimeout(s.bind(null,void 0,{type:"timeout",target:i}),12e4);i.onerror=s.bind(null,i.onerror),i.onload=s.bind(null,i.onload),f&&document.head.appendChild(i)}})(),t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e=[];t.O=function(n,r,u,o){if(r){o=o||0;for(var c=e.length;c>0&&e[c-1][2]>o;c--)e[c]=e[c-1];e[c]=[r,u,o];return}for(var i=1/0,c=0;c<e.length;c++){for(var r=e[c][0],u=e[c][1],o=e[c][2],f=!0,a=0;a<r.length;a++)(!1&o||i>=o)&&Object.keys(t.O).every(function(e){return t.O[e](r[a])})?r.splice(a--,1):(f=!1,o<i&&(i=o));if(f){e.splice(c--,1);var d=u();void 0!==d&&(n=d)}}return n}})(),t.p="/module-tools/",t.rv=function(){return"1.0.4"},(()=>{var e={2980:0};t.f.j=function(n,r){var u=t.o(e,n)?e[n]:void 0;if(0!==u){if(u)r.push(u[2]);else{var o=new Promise(function(t,r){u=e[n]=[t,r]});r.push(u[2]=o);var c=t.p+t.u(n),i=Error();t.l(c,function(r){if(t.o(e,n)&&(0!==(u=e[n])&&(e[n]=void 0),u)){var o=r&&("load"===r.type?"missing":r.type),c=r&&r.target&&r.target.src;i.message="Loading chunk "+n+" failed.\n("+o+": "+c+")",i.name="ChunkLoadError",i.type=o,i.request=c,u[1](i)}},"chunk-"+n,n)}}},t.O.j=function(n){return 0===e[n]};var n=function(n,r){var u=r[0],o=r[1],c=r[2],i,f,a=0;if(u.some(function(n){return 0!==e[n]})){for(i in o)t.o(o,i)&&(t.m[i]=o[i]);if(c)var d=c(t)}for(n&&n(r);a<u.length;a++)f=u[a],t.o(e,f)&&e[f]&&e[f][0](),e[f]=0;return t.O(d)},r=self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[];r.forEach(n.bind(null,0)),r.push=n.bind(null,r.push.bind(r))})(),t.ruid="bundler=rspack@1.0.4";var r=t.O(void 0,["6212","3361","2118","490"],function(){return t("7673")});r=t.O(r)})();