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

package/doc_build/static/search_index.en.f19ea64b.json

@@ -0,0 +1 @@
+[{"id":0,"title":"buildConfig","content":"#\n\nbuildConfig is a configuration option that describes how to compile and generate\nbuild artifacts. It contains all the configurations related to the build\nprocess.\n\n * Type: object | object[]\n\nTIP\n\nBefore start using buildConfig, please read the following documentation to\nunderstand its purpose:\n\n * Modifying Output Artifacts\n * In-Depth Understanding of the Build Process\n\n\nalias#\n\n * Type: Record | Function\n * Default: {'@': 'src',}\n\nTIP\n\nFor TypeScript projects, you only need to configure compilerOptions.paths in\ntsconfig.json, Modern.js Module will automatically recognize the alias in\ntsconfig.json, so there is no need to configure the alias field additionally.\n\n\n\nAfter the above configuration is done, if @common/Foo.tsx is referenced in the\ncode, it will map to the /src/common/Foo.tsx path.\n\nWhen the value of alias is defined as a function, you can accept the pre-defined\nalias object and modify it.\n\n\n\nIt is also possible to return a new object as the final result in the function,\nwhich will override the pre-defined alias object.\n\n\n\n\nasset#\n\nContains configuration related to static assets.\n\n\nasset.name#\n\nStatic resource output file name.\n\n * Type: string | ((assetPath) => name)\n * Default: [name].[hash].[ext]\n\nWhen asset.name is a string, it will automatically replace [name], [ext], and\n[hash], respectively replaced by the file name, extension, and file hash.\n\nAlso you can use asset.name as a function, and the return is output asset name.\nAt this time, this function receives a parameter assetPath, which corresponds to\nthe resource path.\n\n\n\n\nasset.limit#\n\nUsed to set the threshold for static assets to be automatically inlined as\nbase64.\n\nBy default, Modern.js Module will inline assets such as images, fonts and media\nsmaller than 10KB during bundling. They are Base64 encoded and inlined in the\nbundles, eliminating the need for separate HTTP requests.\n\nYou can adjust this threshold by modifying the limit config.\n\n * Type: number\n * Default: 10 * 1024\n\nFor example, set limit to 0 to avoid assets inlining:\n\n\n\n\nasset.path#\n\nStatic resource output path, will be based on outDir\n\n * Type: string\n * Default: assets\n\n\nasset.publicPath#\n\nThe CDN prefix given to unlinked assets when bundling.\n\n * Type: string\n * Default: undefined\n\n\n\nAt this point, all static assets will be prefixed with https://xxx/.\n\n\nasset.svgr#\n\nPackaged to handle svg as a React component, options reference svgr, plus\nsupport for two configuration options include and exclude to match the svg file\nto be handled\n\n * Type: boolean | object\n * Default: false\n\nWhen svgr feature is enabled, you can use svg as a component using the default\nexport.\n\n\n\nWhen enabled, the type of svg used can be modified by initing a new declaration\nfile and adding to the modern-app-env.d.ts:\n\n\n\n\n\n\nasset.svgr.include#\n\nSet the matching svg file\n\n * Type: string | RegExp | (string | RegExp)[]\n * Default: /\\.svg$/\n\n\nasset.svgr.exclude#\n\nSet unmatched svg files\n\n * Type: string | RegExp | (string | RegExp)[]\n * Default: undefined\n\n\nasset.svgr.exportType#\n\nUsed to configure the SVG export type when using SVGR.\n\n * Type: 'named' | 'default'\n * Default: default\n\nwhen it is 'named', use the following syntax:\n\n\n\nThe named export defaults to ReactComponent, and can be customized with the\nasset.svgr.namedExport.\n\n\nautoExtension#\n\nSuffixes for js files and type description files in automation based on format\nand type.\n\n * Type: boolean\n * Default: false\n * Version: >=2.38.0\n\nWhen disabled, js artifacts are suffixed with .js and type description files are\nsuffixed with d.ts.\n\nWhen enabled, node loads .js as esm by default when type is module, so when we\nwant to output cjs artifacts, the js product is suffixed with .cjs and the type\ndescription file is suffixed with d.cts.\n\nOn the other hand, if the type field is missing or the type is commonjs, node\nloads the .js file as cjs by default. So when we want to output esm output, the\njs output is suffixed with .mjs and the type description file is suffixed with\nd.mts.\n\n:::warning When used in bundleless mode, we have an extra step of processing the\nimport/export statement in each file. We will suffix the relative path to the js\nfile, possibly .mjs or .cjs, depending on your package configuration. You can\ndisable this step by redirect.autoExtension.\n\nNotice noUselessIndex will break this behavior, you should disable it. If you\nneed to use this configuration in bundleless, please patch the index, e.g. if\nutils is a folder, you need to rewrite to\n\n\n\n\nautoExternal#\n\nAutomatically externalize project dependencies and peerDependencies and not\npackage them into the final bundle\n\n * Type: boolean | object\n * Default: true\n\nWhen we want to turn off the default handling behavior for third-party\ndependencies, we can do so by:\n\n\n\nThis way the dependencies under \"dependencies\" and \"peerDependencies\" will be\nbundled. If you want to turn off the processing of only one of these\ndependencies, you can use the buildConfig.autoExternal in the form of an object.\n\n\n\n\nautoExternal.dependencies#\n\nWhether or not the dep dependencies of the external project are needed\n\n * Type: boolean\n * Default: true\n\n\nautoExternal.peerDependencies#\n\nWhether to require peerDep dependencies for external projects\n\n * Type: boolean\n * Default: true\n\n\nbanner#\n\nProvides the ability to inject content into the top and bottom of each JS , CSS\nand DTS file.\n\n\n\n * Type: BannerAndFooter\n * Default: {}\n * Version: >=2.36.0\n\nLet's say you want to add copyright information to JS and CSS files.\n\n\n\n\nbuildType#\n\nThe build type, bundle will package your code, bundleless will only do the code\nconversion\n\n * Type: 'bundle' | 'bundleless'\n * Default: 'bundle'\n\n\ncopy#\n\nCopies the specified file or directory into the build output directory\n\n * Type: object[]\n * Default: []\n\n\n\nReference for array settings: copy-webpack-plugin patterns\n\n\ncopy.patterns#\n\n * Type: CopyPattern[]\n * Default: []\n\n\n\n\ncopy.options#\n\n * Type:\n\n\n\n * Default: { concurrency: 100, enableCopySync: false }\n\n * concurrency: Specifies how many copy tasks to execute in parallel.\n\n * enableCopySync: Uses fs.copySync by default, instead of fs.copy.\n\n\ndefine#\n\nDefine global variables that will be injected into the code\n\n * Type: Record\n * Default: {}\n\nSince the define function is implemented by global text replacement, you need to\nensure that the global variable values are strings. A safer approach is to\nconvert the value of each global variable to a string, as follows.\n\nINFO\n\nModern.js automatically performs JSON serialization handling internally, so\nmanual serialization is not required.\n\nIf automatic serialization is not needed, you can define alias using\nesbuildOptions configuration.\n\n\n\nIf the project is a TypeScript project, then you may need to add the following\nto the .d.ts file in the project source directory.\n\n> If the .d.ts file does not exist, then you can create it manually.\n\n\n\nYou can also replace environment variable:\n\n\n\nWith the above configuration, we can put the following code.\n\n\n\nWhen executing VERSION=1.0.0 modern build, the conversion is:\n\n\n\nTIP\n\nTo prevent excessive global replacement substitution, it is recommended that the\nfollowing two principles be followed when using\n\n * Use upper case for global constants\n * Customize the prefix and suffix of global constants to ensure uniqueness\n\n\ndts#\n\nThe dts file generates the relevant configuration, by default it generates.\n\n * Type: false | object\n * Default:\n\n\n\n\ndts.abortOnError#\n\nWhether to allow the build to succeed if a type error occurs.\n\n * Type: boolean\n * Default: true\n\nBy default, type errors will cause the build to fail. When abortOnError is set\nto false, the build will still succeed even if there are type issues in the\ncode:\n\n\n\nWARNING\n\nWhen this configuration is disabled, there is no guarantee that the type files\nwill be generated correctly. In buildType: 'bundle', which is the bundle mode,\ntype files will not be generated.\n\n\ndts.distPath#\n\nThe output path of the dts file, based on outDir\n\n * Type: string\n * Default: ./\n\nFor example, output to the types directory under the outDir:\n\n\n\n\ndts.enableTscBuild#\n\nEnable the tsc '--build' option. When using project reference, you can use the\n'--build' option to achieve cooperation between projects and speed up the build\nspeed.\n\nThis option requires version > 2.43.0,In fact, we experimentally enabled this\noption in the 2.42.0 version, but the many problems it brought forced us to\nenable it dynamically.\n\n\n\n * Type: boolean\n * Default: false\n * Version: >2.43.0\n\n\n\n\ndts.only#\n\nWhether to generate only type files during the build process without generating\nJavaScript output files.\n\n * Type: boolean\n * Default: false\n\n\n\n\ndts.tsconfigPath#\n\ndeprecated,use tsconfig instead.\n\nSpecifies the path to the tsconfig file used to generate the type file.\n\n\n\n\ndts.respectExternal#\n\nWhen set to false, the type of third-party packages will be excluded from the\nbundle, when set to true, it will determine whether third-party types need to be\nbundled based on externals.\n\nWhen bundle d.ts, export is not analyzed, so any third-party package type you\nuse may break your build, which is obviously uncontrollable. So we can avoid it\nwith this configuration.\n\n * Type: boolean\n * Default: true\n\n\n\n\nesbuildOptions#\n\nUsed to modify the esbuild configuration.\n\n * Type: Function\n * Build Type: Only supported for buildType: 'bundle'\n * Default: c => c\n\nFor example, if we need to modify the file extension of the generated files:\n\n\n\nFor example, register an esbuild plugin:\n\n\n\nWhen adding an esbuild plugin, please note that you need to add the plugin at\nthe beginning of the plugins array. This is because the Modern.js Module is also\nintegrated into the entire build process through an esbuild plugin. Therefore,\ncustom plugins need to be registered with higher priority.\n\nTIP\n\nWe have done many extensions based on the original esbuild build. Therefore,\nwhen using this configuration, pay attention to the following:\n\n 1. Prefer to use the configuration that Modern.js Module provides. For example,\n    esbuild does not support target: 'es5', but we support this scenario\n    internally using SWC. Setting target: 'es5' through esbuildOptions will\n    result in an error.\n 2. Currently, we use enhanced-resolve internally to replace esbuild's resolve\n    algorithm, so modifying esbuild resolve-related configurations is invalid.\n    We plan to switch back in the future.\n\n\nexternalHelpers#\n\nBy default, the output JS code may depend on helper functions to support the\ntarget environment or output format, and these helper functions will be inlined\nin the file that requires it.\n\nWith this configuration, the code will be converted using SWC, it will inline\nhelper functions to import them from the external module @swc/helpers.\n\n * Type: boolean\n * Default: false\n\nBelow is a comparison of the output file changes before and after using this\nconfiguration.\n\nBefore enable:\n\n\n\nAfter enabled:\n\n\n\n\nexternals#\n\nConfigure external dependencies that will not be bundled into the final bundle.\n\n * Type:\n\n\n\n * Default: []\n * Build Type: Only supported for buildType: 'bundle'\n * Example:\n\n\n\n\nfooter#\n\nSame as the banner configuration for adding a comment at the end of the output\nfile.\n\n\nformat#\n\nUsed to set the output format of JavaScript files. The options iife and umd only\ntake effect when buildType is bundle.\n\n * Type: 'esm' | 'cjs' | 'iife' | 'umd'\n * Default: cjs\n\n\nformat: esm#\n\nesm stands for \"ECMAScript module\" and requires the runtime environment to\nsupport import and export syntax.\n\n * Example:\n\n\n\n\nformat: cjs#\n\ncjs stands for \"CommonJS\" and requires the runtime environment to support\nexports, require, and module syntax. This format is commonly used in Node.js\nenvironments.\n\n * Example:\n\n\n\n\nformat: iife#\n\niife stands for \"immediately-invoked function expression\" and wraps the code in\na function expression to ensure that any variables in the code do not\naccidentally conflict with variables in the global scope. This format is\ncommonly used in browser environments.\n\n * Example:\n\n\n\n\nformat: umd#\n\numd stands for \"Universal Module Definition\" and is used to run modules in\ndifferent environments such as browsers and Node.js. Modules in UMD format can\nbe used in various environments, either as global variables or loaded as modules\nusing module loaders like RequireJS.\n\n * Example:\n\n\n\n\nhooks#\n\nBuild lifecycle hooks that allow custom logic to be injected at specific stages\nof the build process.\n\n * Types:\n\n\n\n * Default: [].\n\nWe can get the compiler instance in the apply method, modify its properties, and\nexecute custom logic at different stages. For more information on Hooks, see\n[Using Hooks to Intervene in the Build Process](see [Using Hooks to Intervene in\nthe Build Process]). For more information on Hooks, see\nUsing-hooks-to-intervene-in-the-build-process.\n\n\n\n\ninput#\n\nSpecify the entry file for the build, in the form of an array that can specify\nthe directory\n\n * Type:\n\n\n\n * Default: ['src/index.ts'] in bundle mode, ['src'] in bundleless mode\n\nArray usage:\n\nIn bundle mode, the following configurations will be built using src/index.ts\nand src/index2.ts as entry points. The bundle mode does not support configuring\ninput as a directory.\n\n\n\nIn bundleless mode, the following configuration compiles both files in the src/a\ndirectory and src/index.ts file.\n\n\n\nIn bundleless mode, Array usage also supports the usage of ! to filter partial\nfiles:\n\n\n\nThe above configuration will build the files in the src directory, and will also\nfilter files with the spec.ts suffix.This is useful in cases where the test\nfiles are in the same root directory as the source files.\n\nObject usage:\n\nWhen you need to modify the output file name in bundle mode, you can use an\nobject configuration.\n\nThe key of the object is the file name of the output, and the value is the file\npath of the source code.\n\n\n\n\njsx#\n\nSpecify the compilation method for JSX, which by default supports React 17 and\nhigher versions and automatically injects JSX runtime code.\n\n * Type: automatic | transform\n * Default: automatic\n\nIf you need to support React 16, you can set jsx to transform:\n\n\n\nTIP\n\nIf you don't need to convert JSX, you can set jsx to preserve, but don't use swc\nto do the code conversion. For more information about JSX Transform, you can\nrefer to the following links:\n\n * React Blog - Introducing the New JSX Transform.\n * esbuild - JSX.\n\n\nloader#\n\nExperimental\n\nThis 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\n\n\n\nmetafile#\n\nThis option is used for build analysis. When enabled, esbuild will generate\nmetadata about the build in JSON format.\n\n * Type: boolean\n * Default: false\n * Build Type: Only supported for buildType: 'bundle'\n\nTo enable metafile generation:\n\n\n\nAfter executing the build, a metafile-[xxx].json file will be generated in the\noutput directory. You can use tools like esbuild analyze and bundle-buddy for\nvisual analysis.\n\n\nminify#\n\nUse esbuild or terser to compress code, also pass terserOptions\n\n * Type: 'terser' | 'esbuild' | false | object\n * Default: false\n\n\n\n\noutDir#\n\nSpecifies the output directory of the build.\n\n * Type: string\n * Default: ./dist\n\n\n\n\nplatform#\n\nGenerates code for the node environment by default, you can also specify browser\nwhich will generate code for the browser environment. See esbuild.platform learn\nmore.\n\n * Type: 'browser' | 'node'\n * Default: 'node'\n\n\n\n\nredirect#\n\nIn buildType: 'bundleless' build mode, the reference path is redirected to\nensure that it points to the correct product, e.g:\n\n * import '. /index.less' will be rewritten to import '. /index.css'\n * would be rewritten as to `` (depending on the situation)\n * will be rewritten to (if generate utils.mjs, depending on the situation)\n\nIn some scenarios, you may not need these functions, then you can turn it off\nwith this configuration, and its reference path will not be changed after\nturning it off.\n\n\n\n\nresolve#\n\nCustom module resolution options\n\n\nresolve.alias#\n\nThe basic usage is the same as alias.\n\nThe issue with alias is that we incorrectly handled Module IDs in a bundleless\nscenario:\n\n\n\nWhen we configure alias: { react: 'react-native' }, the result becomes:\n\n\n\nA Module ID is incorrectly processed as a relative path, which is not expected.\n\nWe want to fix this issue, but it may break existing projects.\n\nTherefore, in 2.58.0, we provided resolve.alias to solve this problem.\nAdditionally, resolve.alias removed the default value { \"@\": \"./src\"} provided\nby alias.\n\nIf you need this feature, please use resolve.alias.\n\nIn the next major version, resolve.alias will replace alias.\n\nWARNING\n * Note that this configuration should not be mixed with alias.\n * Ensure that this configuration specifies a relative path, such as { \"@\":\n   \"./src\" } rather than { \"@\": \"src\"}.\n\n\nresolve.mainFields#\n\nA list of fields in package.json to try when parsing the package entry point.\n\n * Type: string[]\n * Default: depends on platform\n   * node: ['module', 'main']\n   * browser: ['module', 'browser', 'main']\n * Version: >=2.36.0\n\nFor example, we want to load the js:source field first:\n\n\n\nWARNING\n\nresolve.mainFields has a lower priority than the exports field in package.json,\nand if an entry point is successfully resolved from exports, resolve.mainFields\nwill be ignored.\n\n\nresolve.jsExtentions#\n\nSupport for implicit file extensions\n\n * Type: string[]\n * Default: ['.jsx', '.tsx', '.js', '.ts', '.json']\n * Version: >=2.36.0\n\nDo not use implicit file extensions for css files, currently Module only\nsupports ['.less', '.css', '.sass', '.scss'] suffixes.\n\nNode's parsing algorithm does not consider .mjs and cjs as implicit file\nextensions, so they are not included here by default, but can be included by\nchanging this configuration:\n\n\n\n\nshims#\n\nWhen building CommonJS/ESM artifacts, inject some polyfill code such as\n__dirname which can only be used in CommonJS. After enable this option, it will\ncompile __dirname as path.dirname(fileURLToPath(import.meta.url)) when format is\nesm.\n\nSee details here, Note that esm shims will only be injected if platform is node,\nbecause the url module is used.\n\n * Type: boolean\n * Default: false\n * Version: >=2.38.0\n\n\n\n\nsideEffects#\n\nModule sideEffects\n\n * Type: RegExg[] | (filePath: string, isExternal: boolean) => boolean | boolean\n * Default: undefined\n\nNormally, we configure the module's side effects via the sideEffects field in\npackage.json, but in some cases, The package.json of a third-party package is\nunreliable.Such as when we reference a third-party package style file\n\n\n\nBut the package.json of this third-party package does not have the style file\nconfigured in the sideEffects\n\n\n\nAt the same time you set style.inject to true and you will see a warning message\nlike this in the console\n\n\n\nAt this point, you can use this configuration option to manually configure the\nmodule's \"sideEffects\" to support regular and functional forms.\n\n\n\nTIP\n\nAfter adding this configuration, the sideEffects field in package.json will no\nlonger be read when packaging\n\n\nsourceDir#\n\nSpecify the source directory of the build, default is src, which is used to\ngenerate the corresponding output directory based on the source directory\nstructure when building bundleless. Same as esbuild.outbase.\n\n * Type: string\n * Default: src\n\n\nsourceMap#\n\nWhether to generate sourceMap or not\n\n * Type: boolean | 'inline' | 'external'\n * Default: false\n\n\nsourceType#\n\nSets the format of the source code. By default, the source code will be treated\nas EsModule. When the source code is using CommonJS, you need to set commonjs.\n\n * Type: 'commonjs' | 'module'\n * Default: 'module'\n\n\nsplitting#\n\nWhether to enable code splitting. Only support format: 'esm' and format:\n'cjs',see esbuild.splitting learn more.\n\n * Type: boolean\n * Default: false\n\n\nstyle#\n\nConfigure style-related configuration\n\n\nstyle.less#\n\nless-related configuration\n\n\nstyle.less.lessOptions#\n\nRefer to less for detailed configuration\n\n * Type: object\n * Default: { javascriptEnabled: true }\n\n\nstyle.less.additionalData#\n\nAdd Less code to the beginning of the entry file.\n\n * Type: string\n * Default: undefined\n\n\n\n\nstyle.less.implementation#\n\nConfigure the implementation library used by Less, if not specified, the\nbuilt-in version used is 4.1.3.\n\n * Type: string | object\n * Default: undefined\n\nSpecify the implementation library for Less when the object type is specified.\n\n\n\nFor the string type, specify the path to the implementation library for Less\n\n\n\n\nstyle.sass#\n\nsass-related configuration.\n\n\nstyle.sass.sassOptions#\n\nRefer to node-sass for detailed configuration.\n\n * Type: object\n * Default: {}\n\n\nstyle.sass.additionalData#\n\nAdd Sass code to the beginning of the entry file.\n\n * Type: string | Function\n * Default: undefined\n\n\n\n\nstyle.sass.implementation#\n\nConfigure the implementation library used by Sass, the built-in version used is\n1.5.4 if not specified.\n\n * Type: string | object\n * Default: undefined\n\nSpecify the implementation library for Sass when the object type is specified.\n\n\n\nFor the string type, specify the path to the Sass implementation library\n\n\n\n\nstyle.postcss#\n\nUsed to configure options for PostCSS. The provided values will be merged with\nthe default configuration using Object.assign. Note that Object.assign performs\na shallow copy, so it will completely override the built-in plugins array.\n\nFor detailed configuration, please refer to PostCSS.\n\n * Type:\n\n\n\n * Default:\n\n\n\n * Example:\n\n\n\n\nstyle.inject#\n\nConfigure whether to insert CSS styles into JavaScript code in bundle mode.\n\n * Type: boolean\n * Default: false\n\nSet inject to true to enable this feature:\n\n\n\nOnce enabled, you will see the CSS code referenced in the source code included\nin the bundled JavaScript output.\n\nFor example, if you write import './index.scss' in the source code, you will see\nthe following code in the output:\n\n\n\nTIP\n\nAfter enabling inject, you need to pay attention to the following points:\n\n * @import in CSS files will not be processed. If your CSS file contains\n   @import, you need to manually import the CSS file in the JS file (less and\n   scss files are not required because they have preprocessing).\n * Consider the impact of sideEffects. By default, our builder assumes that CSS\n   has side effects. If the sideEffects field is set in your project or\n   third-party package's package.json and does not include this CSS file, you\n   will receive a warning:\n\n\n\nYou can resolve this by configuring sideEffects.\n\n\nstyle.autoModules#\n\nEnable CSS Modules automatically based on the filename.\n\n * Type: boolean | RegExp\n * Default: true\n\ntrue : Enables CSS Modules for style files ending with .module.css .module.less\n.module.scss .module.sass filenames\n\nfalse : Disable CSS Modules.\n\nRegExp : Enables CSS Modules for all files that match the regular condition.\n\n\nstyle.modules#\n\nCSS Modules configuration\n\n * Type: object\n * Default: {}\n\nA common configuration is localsConvention, which changes the class name\ngeneration rules for css modules\n\n\n\nFor the following styles\n\n\n\nYou can use styles.boxTitle to access\n\nFor detailed configuration see postcss-modules\n\n\nstyle.tailwindcss#\n\nUsed to modify the configuration of Tailwind CSS.\n\n * Type: object | Function\n * Default:\n\n\n\n\nEnabling Tailwind CSS#\n\nBefore using style.tailwindcss, you need to enable the Tailwind CSS plugin for\nModern.js Module.\n\nPlease refer to the section Using Tailwind CSS for instructions on how to enable\nit.\n\n\nType#\n\nWhen the value is of type object, it is merged with the default configuration\nvia Object.assign.\n\nWhen the value is of type Function, the object returned by the function is\nmerged with the default configuration via Object.assign.\n\nThe rest of the usage is the same as Tailwind CSS: Quick Portal.\n\n\nNotes#\n\nPlease note that:\n\n * If you are using both the tailwind.config.{ts,js} file and tools.tailwindcss\n   option, the configuration defined in tools.tailwindcss will take precedence\n   and override the content defined in tailwind.config.{ts,js}.\n * If you are using the designSystem configuration option simultaneously, the\n   theme configuration of Tailwind CSS will be overridden by the value of\n   designSystem.\n\nThe usage of other configurations follows the same approach as the official\nusage of Tailwind CSS. Please refer to tailwindcss - Configuration for more\ndetails.\n\n\ntarget#\n\ntarget is used to set the target environment for the generated JavaScript code.\nIt enables Modern.js Module to transform JavaScript syntax that is not\nrecognized by the target environment into older versions of JavaScript syntax\nthat are compatible with these environments.\n\n * Type:\n\n\n\n * Default: 'es6'\n\nFor example, compile the code to es5 syntax:\n\n\n\n\ntransformImport#\n\nUsing SWC provides the same ability and configuration as babel-plugin-import.\nWith this configuration, the code will be converted using SWC.\n\n * Type: object[]\n * Default: []\n\nThe elements of the array are configuration objects for babel-plugin-import,\nwhich can be referred to options。\n\nExample:\n\n\n\nReference the Import Plugin - Notes\n\n\ntransformLodash#\n\nSpecifies whether to modularize the import of lodash and remove unused lodash\nmodules to reduce the code size of lodash.\n\nThis optimization is implemented using babel-plugin-lodash and swc-plugin-lodash\nunder the hood.\n\nWith this configuration, the code will be converted using SWC.\n\n * Type: boolean\n * Default: false\n\nWhen you enable this, Modern.js Module will automatically redirects the code\nreferences of lodash to sub-paths.\n\nFor example:\n\n\n\nThe transformed code will be:\n\n\n\n\ntsconfig#\n\nPath to the tsconfig file\n\n * Type: string\n * Default: tsconfig.json\n * Version: >=2.36.0\n\n\n\n\numdGlobals#\n\nSpecify global variables for external import of umd artifacts\n\n * Type: Record\n * Default: {}\n\n\n\nAt this point, react and react-dom will be seen as global variables imported\nexternally and will not be packed into the umd product, but will be accessible\nby way of global.React and global.ReactDOM\n\n\numdModuleName#\n\nSpecifies the module name of the umd product\n\n * Type: string | Function\n * Default: name => name\n\n\n\nAt this point the umd artifact will go to mount on global.myLib\n\n:::tip\n\n * The module name of the umd artifact must not conflict with the global\n   variable name.\n * Module names will be converted to camelCase, e.g. my-lib will be converted to\n   myLib, refer to toIdentifier. :::\n\nAlso the function form can take one parameter, which is the output path of the\ncurrent package file\n\n","routePath":"/module-tools/en/api/config/build-config","lang":"en","toc":[{"text":"alias","id":"alias","depth":2,"charIndex":378},{"text":"asset","id":"asset","depth":2,"charIndex":1054},{"text":"asset.name","id":"assetname","depth":2,"charIndex":1113},{"text":"asset.limit","id":"assetlimit","depth":2,"charIndex":1571},{"text":"asset.path","id":"assetpath","depth":2,"charIndex":2045},{"text":"asset.publicPath","id":"assetpublicpath","depth":2,"charIndex":2149},{"text":"asset.svgr","id":"assetsvgr","depth":2,"charIndex":2336},{"text":"asset.svgr.include","id":"assetsvgrinclude","depth":2,"charIndex":2783},{"text":"asset.svgr.exclude","id":"assetsvgrexclude","depth":2,"charIndex":2901},{"text":"asset.svgr.exportType","id":"assetsvgrexporttype","depth":2,"charIndex":3018},{"text":"autoExtension","id":"autoextension","depth":2,"charIndex":3299},{"text":"autoExternal","id":"autoexternal","depth":2,"charIndex":4498},{"text":"autoExternal.dependencies","id":"autoexternaldependencies","depth":2,"charIndex":5006},{"text":"autoExternal.peerDependencies","id":"autoexternalpeerdependencies","depth":2,"charIndex":5142},{"text":"banner","id":"banner","depth":2,"charIndex":5273},{"text":"buildType","id":"buildtype","depth":2,"charIndex":5514},{"text":"copy","id":"copy","depth":2,"charIndex":5674},{"text":"copy.patterns","id":"copypatterns","depth":2,"charIndex":5850},{"text":"copy.options","id":"copyoptions","depth":2,"charIndex":5908},{"text":"define","id":"define","depth":2,"charIndex":6133},{"text":"dts","id":"dts","depth":2,"charIndex":7312},{"text":"dts.abortOnError","id":"dtsabortonerror","depth":2,"charIndex":7435},{"text":"dts.distPath","id":"dtsdistpath","depth":2,"charIndex":7919},{"text":"dts.enableTscBuild","id":"dtsenabletscbuild","depth":2,"charIndex":8081},{"text":"dts.only","id":"dtsonly","depth":2,"charIndex":8508},{"text":"dts.tsconfigPath","id":"dtstsconfigpath","depth":2,"charIndex":8664},{"text":"dts.respectExternal","id":"dtsrespectexternal","depth":2,"charIndex":8793},{"text":"esbuildOptions","id":"esbuildoptions","depth":2,"charIndex":9225},{"text":"externalHelpers","id":"externalhelpers","depth":2,"charIndex":10401},{"text":"externals","id":"externals","depth":2,"charIndex":10923},{"text":"footer","id":"footer","depth":2,"charIndex":11113},{"text":"format","id":"format","depth":2,"charIndex":11209},{"text":"format: esm","id":"format-esm","depth":3,"charIndex":11396},{"text":"format: cjs","id":"format-cjs","depth":3,"charIndex":11536},{"text":"format: iife","id":"format-iife","depth":3,"charIndex":11732},{"text":"format: umd","id":"format-umd","depth":3,"charIndex":12026},{"text":"hooks","id":"hooks","depth":2,"charIndex":12329},{"text":"input","id":"input","depth":2,"charIndex":12816},{"text":"jsx","id":"jsx","depth":2,"charIndex":13845},{"text":"loader","id":"loader","depth":2,"charIndex":14376},{"text":"metafile","id":"metafile","depth":2,"charIndex":14536},{"text":"minify","id":"minify","depth":2,"charIndex":14965},{"text":"outDir","id":"outdir","depth":2,"charIndex":15108},{"text":"platform","id":"platform","depth":2,"charIndex":15202},{"text":"redirect","id":"redirect","depth":2,"charIndex":15433},{"text":"resolve","id":"resolve","depth":2,"charIndex":15949},{"text":"resolve.alias","id":"resolvealias","depth":3,"charIndex":15994},{"text":"resolve.mainFields","id":"resolvemainfields","depth":3,"charIndex":16827},{"text":"resolve.jsExtentions","id":"resolvejsextentions","depth":3,"charIndex":17320},{"text":"shims","id":"shims","depth":2,"charIndex":17785},{"text":"sideEffects","id":"sideeffects","depth":2,"charIndex":18206},{"text":"sourceDir","id":"sourcedir","depth":2,"charIndex":19055},{"text":"sourceMap","id":"sourcemap","depth":2,"charIndex":19313},{"text":"sourceType","id":"sourcetype","depth":2,"charIndex":19424},{"text":"splitting","id":"splitting","depth":2,"charIndex":19651},{"text":"style","id":"style","depth":2,"charIndex":19814},{"text":"style.less","id":"styleless","depth":2,"charIndex":19862},{"text":"style.less.lessOptions","id":"stylelesslessoptions","depth":2,"charIndex":19904},{"text":"style.less.additionalData","id":"stylelessadditionaldata","depth":2,"charIndex":20029},{"text":"style.less.implementation","id":"stylelessimplementation","depth":2,"charIndex":20150},{"text":"style.sass","id":"stylesass","depth":2,"charIndex":20495},{"text":"style.sass.sassOptions","id":"stylesasssassoptions","depth":2,"charIndex":20538},{"text":"style.sass.additionalData","id":"stylesassadditionaldata","depth":2,"charIndex":20644},{"text":"style.sass.implementation","id":"stylesassimplementation","depth":2,"charIndex":20776},{"text":"style.postcss","id":"stylepostcss","depth":2,"charIndex":21116},{"text":"style.inject","id":"styleinject","depth":2,"charIndex":21464},{"text":"style.autoModules","id":"styleautomodules","depth":2,"charIndex":22477},{"text":"style.modules","id":"stylemodules","depth":2,"charIndex":22824},{"text":"style.tailwindcss","id":"styletailwindcss","depth":2,"charIndex":23124},{"text":"Enabling Tailwind CSS","id":"enabling-tailwind-css","depth":3,"charIndex":23238},{"text":"Type","id":"type","depth":3,"charIndex":23447},{"text":"Notes","id":"notes","depth":3,"charIndex":23752},{"text":"target","id":"target","depth":2,"charIndex":24335},{"text":"transformImport","id":"transformimport","depth":2,"charIndex":24699},{"text":"transformLodash","id":"transformlodash","depth":2,"charIndex":25055},{"text":"tsconfig","id":"tsconfig","depth":2,"charIndex":25556},{"text":"umdGlobals","id":"umdglobals","depth":2,"charIndex":25661},{"text":"umdModuleName","id":"umdmodulename","depth":2,"charIndex":25972}],"domain":"","frontmatter":{"sidebar_position":1},"version":""},{"id":1,"title":"buildPreset","content":"#\n\nA build preset string or preset function. Provides out-of-the-box build\nconfiguration\n\n * Type: string | Function\n\n\nnpm-library#\n\nLibrary generic schema used under class NPM package manager, contains esm and\ncjs bundle artifacts, and includes a type file.\n\nINFO\n\nAbout the class NPM Package Manager\n\n * npm\n * yarn\n * pnpm\n\n\n\nThe build configuration corresponding to the preset string.\n\n\n\n\nnpm-library-with-umd#\n\nUsed under class NPM package manager, and Library supports a similar pattern to\nunpkg. Additional umd artifacts are provided on top of the pre-defined\nnpm-library.\n\n\n\nThe build configuration corresponding to the preset string.\n\n\n\n\nnpm-component#\n\nA generic pattern for components (libraries) used under the class NPM package\nmanager. Contains both esm and cjs Bundleless artifacts (for easy Tree shaking\noptimization), as well as including a copy of the type file.\n\nFor style files included in the source code, the artifacts provide the compiled\nfiles of the style and the source file of the style.\n\n\n\nThe pre-defined strings correspond to the build configuration.\n\n\n\n\nnpm-component-with-umd#\n\nComponent (library) used under class NPM package manager, with support for class\nunpkg schema. Additional umd artifacts are provided on top of the pre-defined\nnpm-component.\n\n\n\n\n\n\nnpm-library-{es5...esnext}#\n\nWhen you want to use a buildPreset preset that supports other ECMAScript\nversions, you can directly add the supported versions to the 'npm-library',\n'npm-library-with-umd', 'npm-component', 'npm-component-with-umd' presets.\n\nFor example, if you want the 'npm-library' preset to support 'es2017', you can\nconfigure it as follows.\n\n\n\n\nstring / function#\n\nThe buildPreset not only supports basic string forms, but also function forms,\nwhich can obtain the default values we provide through the preset or extend\nPreset parameter and then modify them.\n\nHere are two examples using preset and extend Preset:\n\n\n\nIn the extend Preset, lodash.merge is used for configuration merge.\n\n","routePath":"/module-tools/en/api/config/build-preset","lang":"en","toc":[{"text":"`npm-library`","id":"npm-library","depth":3,"charIndex":-1},{"text":"`npm-library-with-umd`","id":"npm-library-with-umd","depth":3,"charIndex":-1},{"text":"`npm-component`","id":"npm-component","depth":3,"charIndex":-1},{"text":"`npm-component-with-umd`","id":"npm-component-with-umd","depth":3,"charIndex":-1},{"text":"`npm-library-{es5...esnext}`","id":"npm-library-es5esnext","depth":3,"charIndex":-1},{"text":"string / function","id":"string--function","depth":2,"charIndex":1651}],"domain":"","frontmatter":{"sidebar_position":2},"version":""},{"id":2,"title":"dev","content":"#\n\nThis section describes all configuration of Modern.js Module related to\ndebugging tools.\n\n\nstorybook#\n\nWARNING\n\nDeprecated: This configuration is deprecated and only applicable to Storybook\nV6. Please see 使用Storybook to get more info.\n\n\nstorybook.webpack#\n\n * Type: object | Function | undefined\n * Default: undefined\n\n\n\nYou can modify the webpack configuration of the Storybook Preview-iframe via\ndev.storybook.webpack. The usage can be found in the tools.webpack configuration\nof Modern.js.\n\n\n\nConfigure Manager App#\n\nFor the webpack configuration of the Storybook Manager app section, you can\nconfigure it by adding the ./config/storybook/main.js file to configure it.\n\n\n\n\nstorybook.webpackChain#\n\n * Type: Function | undefined\n * Default: undefined\n\n\n\nYou can modify the webpack configuration of the Storybook Preview-iframe via\ndev.storybook.webpackChain. You can refer to Modern.js's tools.webpackChain\nconfiguration for how to use it.","routePath":"/module-tools/en/api/config/dev","lang":"en","toc":[{"text":"storybook","id":"storybook","depth":2,"charIndex":93},{"text":"storybook.webpack","id":"storybookwebpack","depth":3,"charIndex":239},{"text":"Configure Manager App","id":"configure-manager-app","depth":4,"charIndex":498},{"text":"storybook.webpackChain","id":"storybookwebpackchain","depth":3,"charIndex":678}],"domain":"","frontmatter":{"sidebar_position":3},"version":""},{"id":3,"title":"plugins","content":"#\n\nThis chapter describes the configuration of the registered Modern.js Module\nplugin.\n\n * Type: ModuleToolsPlugin[]\n * Default: undefined\n\n\nPlugin Execution Order#\n\nBy default, custom plugins are executed in the order specified in the plugins\narray. The execution of built-in plugins provided by Modern.js Module happens\nbefore the execution of custom plugins.\n\nWhen plugins use fields that control the execution order, such as pre and post,\nthe execution order is adjusted based on the declared fields. For more\ninformation, please refer to the Relationship Between Plugins guide.\n\n\nDeveloping Plugins#\n\nTo learn how to write plugins, please refer to the Plugin Writing Guide.\n\n\nExample#\n\n\nUsing Plugins from npm#\n\nTo use plugins from npm, you need to install them using a package manager and\nimport them in your configuration file.\n\n\n\nUsing Local Plugins#\n\nTo use plugins from a local code repository, you can directly import them using\na relative path.\n\n\n\n\nPlugin Configuration#\n\nIf a plugin provides custom configuration options, you can pass the\nconfiguration through the plugin function's parameters.\n\n","routePath":"/module-tools/en/api/config/plugins","lang":"en","toc":[{"text":"Plugin Execution Order","id":"plugin-execution-order","depth":2,"charIndex":140},{"text":"Developing Plugins","id":"developing-plugins","depth":2,"charIndex":584},{"text":"Example","id":"example","depth":2,"charIndex":680},{"text":"Using Plugins from npm","id":"using-plugins-from-npm","depth":3,"charIndex":691},{"text":"Using Local Plugins","id":"using-local-plugins","depth":4,"charIndex":837},{"text":"Plugin Configuration","id":"plugin-configuration","depth":3,"charIndex":960}],"domain":"","frontmatter":{"sidebar_position":4},"version":""},{"id":4,"title":"Overview","content":"#","routePath":"/module-tools/en/api/","lang":"en","toc":[],"domain":"","frontmatter":{"overview":true,"sidebar_label":"Overview","sidebar_position":1},"version":""},{"id":5,"title":"Plugin Hooks","content":"#\n\nThis chapter describes the lifecycle hooks supported by module-tools.\n\nCurrently there are following main types of lifecycle hooks.\n\n * Config hooks: change user config.\n * Build hooks: triggered only when the build command is executed to build the\n   source code product.\n * buildPlatform hook: triggered only when the build --platform command is\n   executed to generate other build artifacts.\n * dev hooks: hooks that are triggered when running the dev command.\n\nHook Model is explained in detail here.\n\n\nConfig hooks#\n\n\nresolveModuleUserConfig#\n\nchang user config.\n\ntype: AsyncWaterfall\n\n\n\n\nbuild hooks#\n\nThe following Hooks are triggered in order when the build command is executed.\n\n * beforeBuild\n * beforeBuildTask\n * afterBuildTask\n * afterBuild\n\n\nbeforeBuild#\n\nTriggered before the execution of the overall build process.\n\ntype: ParallelWorkflow\n\n\n\nParameters value types.\n\n\n\n> BuildConfig type reference API configuration\n\n\nbeforeBuildTask#\n\nBased on the build configuration, Modern.js Module will split the overall build\ninto multiple sub-build tasks. The Hook will be triggered before each build\nsubtask.\n\ntype: AsyncWaterfall\n\n\n\nParameters and return value types.\n\nBaseBuildConfig type reference API configuration\n\n\nafterBuildTask#\n\nTriggered after the end of each build subtask.\n\ntype: ParallelWorkflow\n\n\n\nParameters and return value types.\n\n\n\n\nafterBuild#\n\nTriggered after the end of the overall build process.\n\ntype: ParallelWorkflow\n\n\n\nParameters and return value types.\n\n\n\n\nbuildPlatform hooks#\n\nmodule-tools also provides the build --platform command to perform specific\nbuild tasks.\n\nFor example, after installing the Module Doc plugin, you can run build\n--platform or build --platform doc to perform Doc build tasks.\n\nHooks are triggered in the following order after executing build --platform.\n\n * registerBuildPlatform\n * beforeBuildPlatform\n * buildPlatform\n * afterBuildPlatform\n\n\nregisterBuildPlatform#\n\nGets information about the tasks that need to be run when executing the build\n--platform command.\n\n\n\nTypes of parameters entered and returned.\n\n\n\n\nbeforeBuildPlatform#\n\nTriggers all registered build tasks when the build --platform command is\nexecuted. beforeBuildPlatform will be triggered before the execution of the\noverall build task.\n\n\n\nTypes of parameters entered and returned.\n\n\n\n\nbuildPlatform#\n\nWhen the build --platform command is executed, all registered build tasks will\nbe triggered. buildPlatform will be triggered before each build task is\nexecuted.\n\n\n\nTypes of parameters entered and returned.\n\n\n\n\nafterBuildPlatform#\n\nWhen the build --platform command is executed, all registered build tasks will\nbe triggered. afterBuildPlatform will be triggered after the overall platform\nbuild task is finished.\n\n\n\nTypes of parameters entered and returned.\n\n\n\n\nDev Hooks#\n\nThe following Hooks are triggered in order when the dev command is executed.\n\n * registerDev: triggered when getting dev function information.\n * beforeDev: Triggered before starting the dev process as a whole.\n * beforeDevMenu: triggered before the dev list/menu appears.\n * afterDevMenu: triggered after dev list/menu option is selected.\n * beforeDevTask: Triggered before executing the dev task.\n * afterDev: Triggered at the end of the overall dev process.\n\n\nregisterDev#\n\nRegister dev tool related data. Mainly contains.\n\n * the name of the dev tool\n * The name of the item displayed in the menu list and the corresponding value.\n * The definition of the dev subcommand.\n * Whether to execute the source code build before running the dev task\n * The function to execute the dev task.\n\n\n\nTypes of parameters entered and returned.\n\n\n\n\nbeforeDev#\n\nTriggered before the dev task is executed after all dev tool metadata has been\ncollected.\n\n\n\nTypes of parameters entered and returned.\n\n\n\n\n(before|after)DevMenu#\n\nbeforeDevMenu is triggered before the dev list/menu appears. Receives inquirer\nquestion as argument. Default value is.\n\n\n\nafterDevMenu Triggered after selecting dev list/menu options.\n\n\n\nTypes of parameters entered and returned.\n\n\n\n\nbeforeDevTask#\n\nTriggered before the dev task is executed.\n\n\n\nTypes of parameters entered and returned.\n\n\n\n\nafterDev#\n\nTriggered when the dev task process is interrupted.\n\n","routePath":"/module-tools/en/api/plugin-api/plugin-hooks","lang":"en","toc":[{"text":"Config hooks","id":"config-hooks","depth":2,"charIndex":509},{"text":"`resolveModuleUserConfig`","id":"resolvemoduleuserconfig","depth":3,"charIndex":-1},{"text":"build hooks","id":"build-hooks","depth":2,"charIndex":596},{"text":"`beforeBuild`","id":"beforebuild","depth":3,"charIndex":-1},{"text":"`beforeBuildTask`","id":"beforebuildtask","depth":3,"charIndex":-1},{"text":"`afterBuildTask`","id":"afterbuildtask","depth":3,"charIndex":-1},{"text":"`afterBuild`","id":"afterbuild","depth":3,"charIndex":-1},{"text":"buildPlatform hooks","id":"buildplatform-hooks","depth":2,"charIndex":1494},{"text":"`registerBuildPlatform`","id":"registerbuildplatform","depth":3,"charIndex":-1},{"text":"`beforeBuildPlatform`","id":"beforebuildplatform","depth":3,"charIndex":-1},{"text":"`buildPlatform`","id":"buildplatform","depth":3,"charIndex":-1},{"text":"`afterBuildPlatform`","id":"afterbuildplatform","depth":3,"charIndex":-1},{"text":"Dev Hooks","id":"dev-hooks","depth":2,"charIndex":2796},{"text":"`registerDev`","id":"registerdev","depth":3,"charIndex":-1},{"text":"`beforeDev`","id":"beforedev","depth":3,"charIndex":-1},{"text":"`(before|after)DevMenu`","id":"beforeafterdevmenu","depth":3,"charIndex":-1},{"text":"`beforeDevTask`","id":"beforedevtask","depth":3,"charIndex":-1},{"text":"`afterDev`","id":"afterdev","depth":3,"charIndex":-1}],"domain":"","frontmatter":{},"version":""},{"id":6,"title":"","content":"","routePath":"/module-tools/en/components/faq-build-exception","lang":"en","toc":[],"domain":"","frontmatter":{},"version":""},{"id":7,"title":"","content":"","routePath":"/module-tools/en/components/faq-build-other","lang":"en","toc":[],"domain":"","frontmatter":{},"version":""},{"id":8,"title":"","content":"","routePath":"/module-tools/en/components/faq-build-product","lang":"en","toc":[],"domain":"","frontmatter":{},"version":""},{"id":9,"title":"","content":"","routePath":"/module-tools/en/components/faq-storybook","lang":"en","toc":[],"domain":"","frontmatter":{},"version":""},{"id":10,"title":"","content":"","routePath":"/module-tools/en/components/publish-emo","lang":"en","toc":[],"domain":"","frontmatter":{},"version":""},{"id":11,"title":"","content":"When adding an esbuild plugin, please note that you need to add the plugin at\nthe beginning of the plugins array. This is because the Modern.js Module is also\nintegrated into the entire build process through an esbuild plugin. Therefore,\ncustom plugins need to be registered with higher priority.","routePath":"/module-tools/en/components/register-esbuild-plugin","lang":"en","toc":[],"domain":"","frontmatter":{},"version":""},{"id":12,"title":"","content":"","routePath":"/module-tools/en/components/release-module-doc","lang":"en","toc":[],"domain":"","frontmatter":{},"version":""},{"id":13,"title":"Handle static assets","content":"#\n\nModern.js Module will handle static assets used in the code. If configuration is\nrequired, then the buildConfig.asset API can be used.\n\n\nDefault behavior#\n\nBy default, Modern.js Module handles the following static assets:\n\n * '.svg'、'.png'、'.jpg'、'.jpeg'、'.gif'、'.webp'\n * '.ttf'、'.otf'、'.woff'、'.woff2'、'.eot'\n * '.mp3'、'.mp4'、'.webm'、'.ogg'、'.wav'、'.flac'、'.aac'、'.mov'\n\nFor the handling of static files, Modern.js Module currently supports the\nfollowing functions.\n\n * Set the static asset path to . /assets.\n * Files less than 10kb will be inlined into the code.\n\n\nExample#\n\nLet us look at the following example:\n\n * Project source code:\n\n\n\n * If the size of bg.png is less than 10 kb, then the output directory structure\n   and file content are.\n\n\n\n\n\n * If the size of bg.png is larger than 10 kb, then the output directory\n   structure and file content are.\n\n\n\n\n\nWhen wanting to modify the default behavior, the following API can be used:\n\n * asset.path: modify the output path of the static assets.\n * asset.limit: modify the threshold value for inline assets.","routePath":"/module-tools/en/guide/advance/asset","lang":"en","toc":[{"text":"Default behavior","id":"default-behavior","depth":2,"charIndex":139},{"text":"Example","id":"example","depth":2,"charIndex":571}],"domain":"","frontmatter":{"sidebar_position":6},"version":""},{"id":14,"title":"Build umd artifacts","content":"#\n\nThe full name of umd is Universal Module Definition, and JS files in this format\ncan run in multiple runtime environments: the\n\n * Browser environment: module loading based on AMD specification\n * Node.js environment: module loading based on CommonJS\n * Other cases: mount the module on a global object.\n\nWe can therefore specify the build artifacts of the project as an umd artifact\nin the following way:\n\n\n\n\nThird-party dependency handling for umd artifacts#\n\nIn the \"How to handle third-party dependencies\" chapter, we know that we can\ncontrol whether or not the project packages third-party dependencies via the\nautoExternals and externals APIs. So when building umd artifacts, we can also\nuse it like this:\n\n\nExample#\n\n * If the project depends on react:\n\n\n\n * modern.config.ts:\n\n\n\n * When a react dependency is used in the source code:\n\n\n\n * The react code is not bundled into the artifact at this point:\n\n\n\nWe know from the above example that when using the autoExternal and externals\nAPIs.\n\n * In a Node.js environment, you can get the react dependency with\n   require('react').\n * In a browser environment, you can get the react dependency via global.react.\n\n\nGlobal variable names of third-party dependencies#\n\nHowever, in the browser environment, when getting third-party dependencies,\nglobal variable names are not necessarily identical to the dependency names, so\nyou have to use the buildConfig.umdGlobals API.\n\nAgain using the previous example, when the react dependency exists in the\nbrowser environment as a windows.React or global.React global variable, then:\n\n * modern.config.ts config file:\n\n\n\nWhen a react dependency is used in the source code:\n\n\n\nAt this point we will see the output code like this:\n\n\n\nThe project can then run in the browser and use the React variables that exist\non the global object.\n\n\nChanging the name of a global variable in a project#\n\nWhen we package the following code into an umd artifact and run it in the\nbrowser, we can use the module via window.index.\n\n\n\n** By default, the name of the source file is used as the name of the module's\nglobal variable in the browser. **For the above example, the artifact would read\nas follows:\n\n\n\nIf you need to modify it, you need to use the buildConfig.umdModuleName API.\n\nWhen this API is used:\n\n\n\nThe build artifact at this point are:\n\n","routePath":"/module-tools/en/guide/advance/build-umd","lang":"en","toc":[{"text":"Third-party dependency handling for umd artifacts","id":"third-party-dependency-handling-for-umd-artifacts","depth":2,"charIndex":412},{"text":"Example","id":"example","depth":3,"charIndex":716},{"text":"Global variable names of third-party dependencies","id":"global-variable-names-of-third-party-dependencies","depth":3,"charIndex":1171},{"text":"Changing the name of a global variable in a project","id":"changing-the-name-of-a-global-variable-in-a-project","depth":2,"charIndex":1831}],"domain":"","frontmatter":{"sidebar_position":5},"version":""},{"id":15,"title":"Use the Copy Tools","content":"#\n\nModern.js Module provides the Copy utility for copying already existing\nindividual files or entire directories into the output directory. Next we learn\nhow to use it.\n\n\nUnderstanding the Copy API#\n\nWe can use the Copy tool via the buildConfig.copy API, which contains the\nfollowing two main configurations.\n\n * patterns\n * options\n\n\nAPI Description#\n\ncopy.patterns is used to find files to be copied and configure the output path.\n\nThe patterns.from parameter is used to specify the file or directory to be\ncopied. It accepts either a Glob pattern string or a specific path. A Glob\npattern string refers to the fast-glob pattern syntax. Therefore, we can use it\nin two ways as follows:\n\n\n\nThe patterns.context parameter is generally used in conjunction with\npatterns.from. By default, its value is the same as buildConfig.sourceDir.\nTherefore, we can specify the file src/data.json to be copied in the following\nway:\n\n> By default, buildConfig.sourceDir is set to src.\n\n\n\nWhen the specified file is not in the source code directory, you can modify the\ncontext configuration. For example, to specify the file temp/index.html in the\nproject directory to be copied:\n\n\n\nThe patterns.to parameter is used to specify the output path for the copied\nfiles. By default, its value corresponds to buildConfig.outDir. Therefore, we\ncan copy src/index.html to the dist directory as follows:\n\n\n\nWhen we configure patterns.to:\n\n * If it is a relative path, the path will be calculated relative to\n   buildConfig.outDir to determine the absolute path for copying the files.\n * If it is an absolute path, the value will be used directly.\n\nFinally, patterns.globOptions is used to configure the globby object for finding\nfiles to copy. Its configuration can be referenced from:\n\n * globby.options\n\n\nExamples of Different Scenarios#\n\n\nCopying Files#\n\n\n\n\nCopying Files to a Directory#\n\n\n\n\nCopying from Directory to Directory#\n\n\n\n\nCopying from Directory to File#\n\n\n\n\nUsing Glob#\n\n","routePath":"/module-tools/en/guide/advance/copy","lang":"en","toc":[{"text":"Understanding the Copy API","id":"understanding-the-copy-api","depth":2,"charIndex":171},{"text":"API Description","id":"api-description","depth":2,"charIndex":335},{"text":"Examples of Different Scenarios","id":"examples-of-different-scenarios","depth":2,"charIndex":1783},{"text":"Copying Files","id":"copying-files","depth":3,"charIndex":1818},{"text":"Copying Files to a Directory","id":"copying-files-to-a-directory","depth":3,"charIndex":1837},{"text":"Copying from Directory to Directory","id":"copying-from-directory-to-directory","depth":3,"charIndex":1871},{"text":"Copying from Directory to File","id":"copying-from-directory-to-file","depth":3,"charIndex":1912},{"text":"Using Glob","id":"using-glob","depth":3,"charIndex":1948}],"domain":"","frontmatter":{"sidebar_position":3},"version":""},{"id":16,"title":"Handle third-party dependencies","content":"#\n\nGenerally, third-party dependencies required by a project can be installed via\nthe install command in the package manager. After the third-party dependencies\nare successfully installed, they will generally appear under dependencies and\ndevDependencies in the project package.json.\n\n\n\nDependencies under \"dependencies\" are generally related to project code and\nbuilds, and if these third-party dependencies are declared under\n\"devDependencies\", then there will be missing dependencies in production\nenvironments.\n\nIn addition to \"dependencies\", \"peerDependencies\" can also declare dependencies\nthat are needed in the production environment, but it puts more emphasis on the\nexistence of these dependencies declared by \"peerDependencies\" in the project's\nruntime environment, similar to the plugin mechanism.\n\n\nDefault handling of third-party dependencies#\n\nBy default, third-party dependencies under \"dependencies\" and \"peerDependencies\"\nare not bundled by Modern.js Module.\n\nThis is because when the npm package is installed, its \"dependencies\" will also\nbe installed. By not packaging \"dependencies\", you can reduce the size of the\npackage product.\n\nIf you need to package some dependencies, it is recommended to move them from\n\"dependencies\" to \"devDependencies\", which is equivalent to prebundle the\ndependencies and reduces the size of the dependency installation.\n\n\nExample#\n\nIf the project has a dependency on react.\n\n\n\nWhen a react dependency is used in the source code:\n\n\n\nThe react code is not bundled into the artifact:\n\n\n\nIf you want to modify the default processing, you can use the following API.\n\n * buildConfig.autoExternal\n\n\nExclude specified third-party dependencies#\n\nWe mentioned above the use of the buildConfig.autoExternal API, and\nbuildConfig.externals can control which third-party dependencies to handle the\nproject's dependencies in a more granular way.\n\nFor example, when we need to leave only certain dependencies unpacked, we can\nconfigure it as follows.\n\n> In this case, it is likely that some dependencies are not suitable for\n> packaging. If this is the case, then you can handle it as follows.\n\n","routePath":"/module-tools/en/guide/advance/external-dependency","lang":"en","toc":[{"text":"Default handling of third-party dependencies","id":"default-handling-of-third-party-dependencies","depth":2,"charIndex":811},{"text":"Example","id":"example","depth":3,"charIndex":1373},{"text":"Exclude specified third-party dependencies","id":"exclude-specified-third-party-dependencies","depth":2,"charIndex":1643}],"domain":"","frontmatter":{"sidebar_position":4},"version":""},{"id":17,"title":"In-depth understanding of build","content":"#\n\nIn the \"Basic Usage\" section, we already knew that you can modify the output\nfiles of a project through the buildConfig configuration. buildConfig not only\ndescribes some of the features of the product, but also provides some\nfunctionality for building the product.\n\nTIP\n\nIf you are not familiar with buildConfig, please read modify-output-product.\n\nIn this chapter we'll dive into the use of certain build configurations and\nunderstand what happens when the modern build command is executed.\n\n\nbundle / bundleless#\n\nSo first let's understand bundle and bundleless.\n\nA bundle is a package of build artifacts, which may be a single file or multiple\nfiles based on a certain code splitting strategy.\n\nbundleless, on the other hand, means that each source file is compiled and built\nseparately, but not bundled together. Each output file can be found with its\ncorresponding source code file. The process of bundleless build can also be\nunderstood as the process of code conversion of source files only.\n\nThey have their own benefits.\n\n * bundle can reduce the size of build artifacts and also pre-package\n   dependencies to reduce the size of installed dependencies. Packaging\n   libraries in advance can speed up application project builds.\n * bundleless maintains the original file structure and is more conducive to\n   debugging and tree shaking.\n\nWARNING\n\nbundleless is a single-file compilation mode, so for referencing and exporting\ntypes, you need to add the type keyword. For example, ``. Please refer to the\nesbuild documentation for more information.\n\nIn buildConfig you can specify whether the current build task is bundle or\nbundleless by using buildConfig.buildType.\n\n\ninput / sourceDir#\n\nbuildConfig.input is used to specify the path to a file or directory from which\nto read the source code, the default value of which varies between bundle and\nbundleless builds:\n\n * When buildType: 'bundle', input defaults to src/index.(j|t)sx?.\n * When buildType: 'bundleless', input defaults to ['src'].\n\nFrom the default value, we know that building in bundle mode usually specifies\none or more files as the entry point for the build, while building in bundleless\nmode specifies a directory and uses all the files in that directory as the entry\npoint.\n\nsourceDir is used to specify the source directory, which is only related to the\nfollowing two elements:\n\n * Type file generation\n * outbase for specifying the build process\n\nSo we can get its best practices:\n\n * Only specify input during the bundle build.\n * In general, bundleless only needs to specify sourceDir (where input will be\n   aligned with sourceDir). If we want to use the input in bundleless, we only\n   need to specify sourceDir.\n\nIf you want to convert only some of the files in bundleless, e.g. only the files\nin the src/runtime directory, you need to configure input:\n\n\n\n\nuse swc#\n\nIn some scenarios, esbuild is not enough to meet our needs, and we will use swc\nto do the code conversion.\n\nStarting from version 2.36.0, the Modern.js Module will use swc by default when\nit comes to the following functionality, but that doesn't mean we don't use\nesbuild any more, the rest of the functionality will still use esbuild.\n\n * transformImport\n * transformLodash\n * externalHelpers\n * format: umd\n * target: es5\n * emitDecoratorMetadata: true\n\nIn fact, we've been using swc for full code conversion since version 2.16.0.\nHowever, swc also has some limitations, so we added sourceType to turn off swc\nwhen the source is formatted as 'commonjs', which isn't really user-intuitive,\nand the cjs mode of the swc formatted outputs don't have annotate each export\nname, which can cause problems in node. So we deprecated this behaviour and went\nback to the original design - using swc as a supplement only in situations where\nit was needed.\n\n\nUsing Hooks to Intervene in the Build Process#\n\nThe Modern.js Module provides a Hook mechanism that allows us to inject custom\nlogic at different stages of the build process. The Modern.js Module Hook is\nimplemented using tapable, which extends esbuild's plugin mechanism, and is\nrecommended to be used directly if esbuild plugins already meet your needs.\nHere's how to use it:\n\n\nHook type#\n\nAsyncSeriesBailHook#\n\nSerial hooks that stop the execution of other tapped functions if a tapped\nfunction returns a non-undefined result.\n\nAsyncSeriesWaterFallHooks#\n\nSerial hooks whose results are passed to the next tapped function.\n\n\nHook Order#\n\nThe execution order of hooks follows the registration order. You can control\nwhether a hook is registered before or after the built-in hooks using\napplyAfterBuiltIn.\n\n\nHook API#\n\nload#\n\n * AsyncSeriesBailHook\n * Triggered at esbuild onLoad callbacks to fetch module content based on the\n   module path\n * Input parameters\n\n\n\n * Return parameters\n\n\n\n * Example\n\n\n\ntransform#\n\n * AsyncSeriesWaterFallHooks\n * Triggered at esbuild onLoad callbacks. Transforms the contents of the module\n   fetched during the load phase\n * Input parameters (return parameters)\n\n\n\n * Example\n\n\n\nrenderChunk#\n\n * AsyncSeriesWaterFallHooks\n * Triggered at esbuild onEnd callbacks. This is similar to the transform hook,\n   but works on the artifacts generated by esbuild.\n * Input parameters (return parameters)\n\n\n\n * Examples\n\n\n\n\ndts#\n\nThe buildConfig.dts configuration is mainly used for type file generation.\n\n\nTurn off type generation#\n\nType generation is turned on by default, if you need to turn it off, you can\nconfigure it as follows:\n\n\n\nTIP\n\nThe build speed is generally improved by closing the type file.\n\n\nBuild type files#\n\nWith buildType: 'bundleless', type files are generated using the project's tsc\ncommand to complete production.\n\nThe Modern.js Module also supports bundling of type files, although care needs\nto be taken when using this feature.\n\n * Bundle type files does not enable type checking.\n * Some third-party dependencies have incorrect syntax that can cause the\n   bundling process to fail. So in this case, you need to exclude such\n   third-party packages manually with buildConfig.externals or close\n   dts.respectExternal to external all third-party packages types.\n * It is not possible to handle the case where the type file of a third-party\n   dependency points to a .ts file. For example, the package.json of a\n   third-party dependency contains something like this: {\"types\": \".\n   /src/index.ts\"}.\n\nFor the above problems, our recommended approach is to first use tsc to generate\nd.ts files, then package the index.d.ts as the entry and close\ndts.respectExternal. In the future evolution, we will gradually move towards\nthis handling approach.\n\n\nAlias Conversion#\n\nDuring the bundleless build process, if an alias appears in the source code,\ne.g.\n\n\n\nThe type files generated with tsc will also contain these aliases. However,\nModern.js Module will convert the aliases in the type file generated by tsc.\n\n\nSome examples of the use of dts#\n\nGeneral usage:\n\n\n\nFor the use of dts.only:\n\n\n\n\nBuild process#\n\nWhen the modern build command is executed, the\n\n * Clear the output directory according to buildConfig.outDir.\n * Compile js/ts source code to generate the JS build artifacts for\n   bundle/bundleless.\n * Generate bundle/bundleless type files using tsc.\n * Handle Copy tasks.\n\n\nBuild errors#\n\nWhen a build error occurs, based on the information learned above, it is easy to\nunderstand what error appears in the terminal.\n\nErrors reported for js or ts builds:\n\n\n\nErrors reported for the type file generation process:\n\n\n\nFor js/ts build errors, we can tell from the error message.\n\n * By 'bundle failed:' to determine if the error is reported for a bundle build\n   or a bundleless build\n * What is the format of the build process\n * What is the target of the build process\n * The specific error message\n\n\nDebug mode#\n\nFrom 2.36.0, For troubleshooting purposes, the Modern.js Module provides a debug\nmode, which you can enable by adding the DEBUG=module environment variable when\nexecuting a build.\n\n\n\nIn debug mode, you'll see more detailed build logs output in Shell, which are\nmainly process logs:\n\n\n\nIn addition, Module provides the ability to debug internal workflows. You can\nenable more detailed debugging logging by setting the DEBUG=module:* environment\nvariable.\n\nCurrently, only DEBUG=module:resolve is supported, which allows you to see a\ndetailed log of module resolution within the Module.\n\n","routePath":"/module-tools/en/guide/advance/in-depth-about-build","lang":"en","toc":[{"text":"`bundle` / `bundleless`","id":"bundle--bundleless","depth":2,"charIndex":-1},{"text":"`input` / `sourceDir`","id":"input--sourcedir","depth":2,"charIndex":-1},{"text":"use swc","id":"use-swc","depth":2,"charIndex":2845},{"text":"Using Hooks to Intervene in the Build Process","id":"using-hooks-to-intervene-in-the-build-process","depth":2,"charIndex":3803},{"text":"Hook type","id":"hook-type","depth":3,"charIndex":4183},{"text":"AsyncSeriesBailHook","id":"asyncseriesbailhook","depth":4,"charIndex":4195},{"text":"AsyncSeriesWaterFallHooks","id":"asyncserieswaterfallhooks","depth":4,"charIndex":4334},{"text":"Hook Order","id":"hook-order","depth":3,"charIndex":4431},{"text":"Hook API","id":"hook-api","depth":3,"charIndex":4612},{"text":"load","id":"load","depth":4,"charIndex":4623},{"text":"transform","id":"transform","depth":4,"charIndex":4807},{"text":"renderChunk","id":"renderchunk","depth":4,"charIndex":5018},{"text":"dts","id":"dts","depth":2,"charIndex":5252},{"text":"Turn off type generation","id":"turn-off-type-generation","depth":3,"charIndex":5335},{"text":"Build type files","id":"build-type-files","depth":3,"charIndex":5538},{"text":"Alias Conversion","id":"alias-conversion","depth":3,"charIndex":6605},{"text":"Some examples of the use of `dts`","id":"some-examples-of-the-use-of-dts","depth":3,"charIndex":-1},{"text":"Build process","id":"build-process","depth":2,"charIndex":6945},{"text":"Build errors","id":"build-errors","depth":2,"charIndex":7238},{"text":"Debug mode","id":"debug-mode","depth":2,"charIndex":7763}],"domain":"","frontmatter":{"sidebar_position":1},"version":""},{"id":18,"title":"In-depth understanding of the dev command","content":"#\n\nThe dev command provided by the Modern.js Module is mainly used for debugging\nthe code.\n\n\nThe overall flow of the command run#\n\n 1. When the dev command is executed, Modern.js Module starts looking for\n    debugging tools or tasks that can be executed. A debugging tool or task is a\n    Modern.js Module debugging tool plugin like module doc.\n 2. When a debugging tool is found, it is executed immediately.\n 3. When multiple debugging tools are found, the debugging tools list menu is\n    displayed. A debug tool can be started by selecting the name option\n    corresponding to it.\n 4. When no debug tool is found, the user is informed that no debug tool is\n    available.\n\nIn addition to the dev command, you can also start a debugging tool or task\ndirectly by using the dev [debug tool name] option.\n\n\nExtending the dev command#\n\nIf you need to extend the dev command, or rather provide your own Modern.js\nModule debugging tool plugin, then you will need to know the following first.\n\n * Development of plugins\n * Debugging Tools Plugin API\n\nIn general, the code to implement a debugging tool that does nothing and the\nassociated configuration is as follows.\n\n\n\nIf this debugging tool plugin is required, it needs to be added to the\nconfiguration file.\n\n\n\nAt this point we can execute it when we execute the dev or dev do-nothing\ncommand. After execution, it will first execute the source build task in\nlistening mode and print the log messages immediately afterwards.\n\nFor currently officially supported debugging tools and third-party supported\ndebugging tools, you can view them in plugins list.","routePath":"/module-tools/en/guide/advance/in-depth-about-dev-command","lang":"en","toc":[{"text":"The overall flow of the command run","id":"the-overall-flow-of-the-command-run","depth":2,"charIndex":92},{"text":"Extending the dev command","id":"extending-the-dev-command","depth":2,"charIndex":806}],"domain":"","frontmatter":{"sidebar_position":2},"version":""},{"id":19,"title":"Before you start","content":"#\n\n\nEnvironment preparation#\n\nIn order to use the Modern.js Module, you first need NodeJS engine, we recommend\nthe latest LTS version, and make sure the Node version is >=16.0.0. because\nnon-stable NodeJS releases frequently have bugs. You might consider installing\nvia nvm-windows and nvm (Mac / Linux), so you can easily switch to different\nNodeJS versions that might be required for different projects that you work on.\n\n\nGetting Started with npm#\n\nOnce NodeJS is installed, not only can you access the node executable from the\ncommand line, but you can also execute the npm command.\n\nNpm is the standard package manager for NodeJS. It started out as a tool for\ndownloading and managing NodeJS package dependencies, but it has since evolved\ninto a tool for front-end JavaScript.\n\nIf you already know something about usage of npm and npm packages, then you can\ndirectly see npm package manager section.\n\n\nnpm package type project#\n\nSo what is an npm package type project? When we execute the npm init command in\nan empty project directory, it creates a JSON file with the file name\npackage.json under the current directory. During the creation process, we will\nneed to fill in information including but not limited to the name, version\nnumber, description, etc. of the npm package, which will be found in the\nresulting package.json file as follows\n\n\n\nAt this point the project containing the initialized package.json file is an npm\npackage type project, and you can execute the npm publish command to publish the\nproject to the npm Registry.\n\nThe npm Registry is a npm package store where developers can not only publish\ntheir own npm packages to the npm Registry, but also use npm packages published\nby other developers through the npm Registry.\n\nA quality npm package will be used by more people because it not only saves a\nlot of code implementation work, but is also less likely to cause problems with\nthe project.\n\n\nUsing third-party npm packages#\n\nWhen adding a third-party npm package to an initial project, we can call this\nprocess \"installing dependencies for the project\" or \"adding dependencies to the\nproject\". Before adding dependencies, we need to know one thing in particular --\nthe types of packages npm depends on.\n\n * \"dependencies\": a type of package that your application will need in a\n   production environment.\n * \"devDependencies\": another type of package that is only needed for local\n   development and testing.\n   \n   > packages can be understood as third-party npm packages.\n\nYou can install the packages you need in a production environment by running npm\ninstall npm-package-name or npm add npm-package-name, or you can manually write\nthe packages you need to install and the corresponding semantic version in\n\"dependencies\" in the package.json file, and run the npm install command to.\n\n\n\nSimilarly, you can install only packages needed for local development and\ntesting by running npm install npm-package-name --save-dev or npm add\nnpm-package-name --save-dev, or you can manually write the packages to be\ninstalled and the corresponding semantic version in \"devDependencies\" in the\npackage.json file, and run the npm install command as follows\n\n\n\nWhen installing or using third-party npm packages be sure to determine what they\nare for and whether they should be placed in \"dependencies\" or \"devDependencies\"\nby distinguishing between their types.\n\nTIP\n\nIn general, packages that need to be used in source code are dependencies\ndependencies. Unless you are exporting dependent code locally via packaging, in\nwhich case it can be treated as a devDependencies dependency.\n\n\nOther npm bits and pieces to know#\n\n\nProgram entry for npm packages#\n\nThere is a \"main\" attribute in package.json that corresponds to a module ID or,\nmore intuitively, a NodeJS file path, which is the main entry point for your\napplication.\n\nFor example, if your package is named foo and the user installs it, and then\nexecutes the require(\"foo\") code, then the file corresponding to the \"main\"\nfield of the npm package foo will be exported.\n\nIt is recommended to set the \"main\" field in your npm package. If \"main\" is not\nset, the default entry will be the index.js file in the root of the package.\n\nIn addition to the \"main\" attribute, the \"module\" attribute is usually set. It\nis similar to the \"main\" attribute in that it is mainly used in webpack\nscenarios. webpack reads the npm package entry (file) in most cases in the order\n\"module\" -> \"main \".\n\n> To learn more about how webpack does this, check out this link.\n\n\nscripts#\n\nThe \"scripts\" attribute of the package.json file supports a number of built-in\nscripts and npm-preset lifecycle events, as well as arbitrary scripts.\n\nThese can be executed by running npm run-script or simply npm run .\n\nName matching pre and post commands will also be run (e.g. premyscript,\nmyscript, postmyscript ).\n\n\n\nWhen npm run myscripts is executed, the script corresponding to premyscripts\nwill be executed before it, and the script corresponding to postmyscripts will\nbe executed after it.\n\nScript commands from dependencies can be run with npm explore -- npm run .\n\nThere are also special lifecycle scripts that occur only under certain\ncircumstances. Here are a few that are usually necessary to know.\n\nnpm install#\n\nWhen you run npm install -g , the following scripts will run.\n\n * preinstall\n * install\n * postinstall\n * prepublish\n * preprepare\n * prepare\n * postprepare\n\nIf your package root has a binding.gyp file and you don't define an install or\npreinstall script, then npm will build with node-gyp rebuild as the default\ninstall command, using node-gyp.\n\nnpm publish#\n\nWhen publishing a project, executing this command will trigger the following\nscript.\n\n * prepublishOnly\n * prepack\n * prepare\n * postpack\n * publish\n * postpublish\n\nWhen running in -dry-run mode, the script corresponding to prepare will not be\nexecuted.\n\n\npeerDependencies#\n\nIn some cases, your npm project has a compatibility relationship with its host\ntool or library (e.g. a webpack plugin project and webpack), and your npm\nproject does not want to use the host as a necessary dependency, which usually\nmeans that your project is probably a plugin for that host tool or library. Your\nnpm project will have certain requirements for the version of the host package,\nas only the APIs required by the npm project will be exposed under a specific\nversion.\n\nFor more explanation of peerDependencies, you can learn about the different ways\nnpm, pnpm, and Yarn handle it at the following links.\n\n * npm's explanation of peerDependencies\n * pnpm vs npm vs Yarn\n\n\nnpm package manager#\n\nIn addition to the standard package manager like npm, the mainstream ones are\npnpm and Yarn, both of which are good alternatives to npm cli.\n\nIt is recommended to use pnpm to manage project dependencies, which can be\ninstalled as follows.\n\n\n\n\nModern.js Module configuration file#\n\nThe Modern.js Module configuration file - modern.config.(j|t)s - is provided in\nthe project directory of the module project created with @modern-js/create.\nHowever, the modern.config configuration file is not required to exist.\n\nBy default, the contents of the generated configuration file are as follows.\n\n\n\nWe recommend using the defineConfig function, but it is not mandatory to use it.\nSo you can also return an object directly in the config file: the\n\n","routePath":"/module-tools/en/guide/basic/before-getting-started","lang":"en","toc":[{"text":"Environment preparation","id":"environment-preparation","depth":2,"charIndex":3},{"text":"Getting Started with npm","id":"getting-started-with-npm","depth":2,"charIndex":424},{"text":"npm package type project","id":"npm-package-type-project","depth":2,"charIndex":906},{"text":"Using third-party npm packages","id":"using-third-party-npm-packages","depth":2,"charIndex":1922},{"text":"Other npm bits and pieces to know","id":"other-npm-bits-and-pieces-to-know","depth":2,"charIndex":3606},{"text":"Program entry for npm packages","id":"program-entry-for-npm-packages","depth":3,"charIndex":3643},{"text":"`scripts`","id":"scripts","depth":3,"charIndex":-1},{"text":"`npm install`","id":"npm-install","depth":4,"charIndex":-1},{"text":"`npm publish`","id":"npm-publish","depth":4,"charIndex":-1},{"text":"peerDependencies","id":"peerdependencies","depth":3,"charIndex":5883},{"text":"npm package manager","id":"npm-package-manager","depth":2,"charIndex":6585},{"text":"Modern.js Module configuration file","id":"modernjs-module-configuration-file","depth":2,"charIndex":6850}],"domain":"","frontmatter":{"sidebar_position":1},"version":""},{"id":20,"title":"CLI Commands","content":"#\n\nCLI Commands available for Modern.js Module projects are as follows:\n\n\nmodern build#\n\n\n\nModern.js Module supports the platform build mode, which can be used to execute\nbuild tasks of other tools. Currently, the official support includes Rspress.\nFor example, you can start the doc build task to generate doc products by\nexecuting the modern build --platform commands.\n\n\nmodern new#\n\n\n\nThe modern new command is used to start the microgenerator functionality, which\nenables features for the project that are not provided by default.\n\nThe following features can currently be enabled.\n\n * Storybook V7\n * Tailwind CSS support\n * Modern.js Runtime API\n\nYou can learn more about these features in the Using the micro generator\nsection.\n\n\nmodern dev#\n\n\n\nThe Modern.js Module provides the ability to use debugging tools, which can be\nstarted with the modern dev command. Note, however, that no debugging-related\nplugins are provided by default, so executing modern dev will prompt: \"No dev\ntools found available \".\n\nThe officially supported debugging tool is Rspress, so you can run modern dev or\nmodern dev doc to execute it after you run modern new to enable it.\n\n\nmodern change#\n\n\n\nThe modern change command is used to generate the required Markdown file for\nchangesets.\n\n\nmodern pre#\n\n\n\nYou can use the modern pre command to pre-release a version before the official\nrelease.\n\n\nmodern bump#\n\n\n\nModify the version number in package.json according to the Markdown file of the\nchangelog generated by changesets, and generate the CHANGELOG.md file.\n\n\nmodern release#\n\n\n\nThe -modern release command releases the module to the npm Registry.\n\n * The -tag argument specifies the specific dist tags to be used for the\n   release.\n\n\nmodern gen-release-note#\n\n\n\nAutomatically generate Release Note based on the changeset information of the\ncurrent repository.\n\nTIP\n\nneeds to be executed before the bump command.\n\n\nmodern upgrade#\n\n\n\nThe modern upgrade command is used to upgrade the project Modern.js related\ndependencies to the latest version.\n\nExecuting the command npx modern upgrade in the project root directory will\nupdate the Modern.js dependencies in package.json of the currently executing\nproject to the latest version by default.","routePath":"/module-tools/en/guide/basic/command-preview","lang":"en","toc":[{"text":"`modern build`","id":"modern-build","depth":2,"charIndex":-1},{"text":"`modern new`","id":"modern-new","depth":2,"charIndex":-1},{"text":"`modern dev`","id":"modern-dev","depth":2,"charIndex":-1},{"text":"`modern change`","id":"modern-change","depth":2,"charIndex":-1},{"text":"`modern pre`","id":"modern-pre","depth":2,"charIndex":-1},{"text":"`modern bump`","id":"modern-bump","depth":2,"charIndex":-1},{"text":"`modern release`","id":"modern-release","depth":2,"charIndex":-1},{"text":"`modern gen-release-note`","id":"modern-gen-release-note","depth":2,"charIndex":-1},{"text":"`modern upgrade`","id":"modern-upgrade","depth":2,"charIndex":-1}],"domain":"","frontmatter":{"sidebar_position":2},"version":""},{"id":21,"title":"Modify the output","content":"#\n\n\nDefault output artifacts#\n\nWhen you use the modern build command in an initialized project, Modern.js\nModule will generate corresponding build artifacts based on the current\nconfiguration.\n\nThe default configuration is as follows:\n\n\n\nThe default output files has the following characteristics.\n\n * will generate CommonJS and ESM.\n * The code syntax is supported up to ES6 , and more advanced syntax will be\n   converted.\n * All code is bundled into one file, i.e. bundle processing is performed.\n * The output root directory is the dist directory under the project, and the\n   type file output directory is dist/types.\n\nYou may have the following questions when you see this.\n\n 1. what is buildPreset?\n 2. what determines these characteristics of the product?\n\nThen the next step is to first explain buildPreset.\n\n\nbuildPreset#\n\nThe buildPreset represents a prepared set or sets of build-related\nconfigurations that can be used to eliminate the trouble and complexity of\nconfiguration by using the default values corresponding to the build Preset,\nresulting in the expected product.\n\nModern.js Module mainly comes with two built-in build presets, including:\n\n * npm-component: Used to build component libraries.\n * npm-library: Used to package projects of other library types, such as tool\n   libraries.\n\nIt also provides some variations, such as npm-library-with-umd and\nnpm-library-es5, which, as their names suggest, correspond to library presets\nwith umd output and support for es5 syntax, respectively. For more detailed\nconfiguration, you can refer to its API.\n\nIn addition, we can also fully customize the build configuration:\n\n\nbuildConfig#\n\nbuildConfig is a configuration option that describes how to compile and generate\nbuild artifacts. What was mentioned at the beginning about \"features of build\nartifacts\" are actually properties supported by buildConfig. The currently\nsupported properties cover the needs of most module type projects when building\nartifacts. buildConfig not only contains some properties that artifacts have,\nbut also contains some features needed to build artifacts. The following is a\nbrief list from a classification point of view.\n\nThe basic attributes of a build artifacts include:\n\n * Whether the artifact is bundled or not: the corresponding API is\n   buildConfig.buildType.\n * Product support for syntax: the corresponding API is buildConfig.target.\n * Output format: the corresponding API is buildConfig.format.\n * How the output type file is handled: the corresponding API is\n   buildConfig.dts.\n * How the sourceMap of the artifact is handled: the corresponding API is\n   buildConfig.sourceMap.\n * The input (or source file) corresponding to the output: the corresponding API\n   is buildConfig.input.\n * The directory of the output of the artifact: the corresponding API is\n   buildConfig.outDir.\n * Build source directory: the corresponding API is buildConfig.sourceDir.\n\nCommon functions required for build artifacts include:\n\n * Alias: The corresponding API is buildConfig.alias.\n * Static resource handling: the corresponding API is buildConfig.asset.\n * Third-party dependency handling: The corresponding APIs are\n   * buildConfig.autoExternal.\n   * buildConfig.externals.\n * Copy: The corresponding API is buildConfig.copy.\n * Global variable substitution: the corresponding API is buildConfig.define.\n * Specify JSX compilation method, the corresponding API is\n   [buildConfig.jsx](/api/config/ build-config#jsx).\n\nSome advanced properties or less frequently used functions:\n\n * Product code compression: The corresponding API is buildConfig.minify.\n * Code splitting: buildConfig.splitting\n * Specify whether the build artifacts is for the NodeJS environment or the\n   browser environment: the corresponding API is buildConfig.platform.\n * umd product-related.\n   * Specifies the global variables imported externally to the umd product: the\n     corresponding API is buildConfig.umdGlobals.\n   * Specify the module name of the umd product: the corresponding API is\n     buildConfig.umdModuleName.\n\nIn addition to the above categories, frequently asked questions and best\npractices about these APIs can be found at the following links\n\n * About bundle and bundleless?\n * About input and sourceDir\n * About d.ts.\n * How to use define\n * How to handle third-party dependencies?\n * How to use copy?\n * How to use umd\n * How to use asset\n\n\nCombining Configuration and Presets#\n\nOnce we understand buildPreset and buildConfig, we can use them together.\n\nIn a real project, we can use buildPreset to quickly get a set of default build\nconfigurations. If you need to customise it, you can use buildConfig to override\nand extend it.\n\nThe extension logic is as follows.\n\n * When buildConfig is an array, new configuration items are added to the\n   original preset.\n\n\n\nThis will generate an additional IIFE-formatted product that supports up to\nES2020 syntax on top of the original preset, in the dist/global directory under\nthe project.\n\n * When buildConfig is an object, the configuration items in the object are\n   overwritten in the preset.\n\n\n\nThis will cause a sourceMap file to be generated for each build task.","routePath":"/module-tools/en/guide/basic/modify-output-product","lang":"en","toc":[{"text":"Default output artifacts","id":"default-output-artifacts","depth":2,"charIndex":3},{"text":"buildPreset","id":"buildpreset","depth":2,"charIndex":818},{"text":"buildConfig","id":"buildconfig","depth":2,"charIndex":1639},{"text":"Combining Configuration and Presets","id":"combining-configuration-and-presets","depth":2,"charIndex":4390}],"domain":"","frontmatter":{"sidebar_position":3},"version":""},{"id":22,"title":"Versioning and Publishing","content":"#\n\nAn npm-type module project release process consists of two phases.\n\n * The first phase is during development, where the developer needs to provide a\n   change file to record changes that need to be released.\n * The second phase is during release, collect all the change files to update\n   the version, update the release log, and release new packages to the npm\n   Registry.\n\nModern.js Module provides a set of version management and release solutions,\nwhich are suitable for single-package scenarios. For npm packages in monorepo,\nyou need to follow the strategies provided by various monorepo solutions.\n\n\nTracking changes#\n\nChanges need to be logged when they happen to the project. Changes that occur in\na project are typically.\n\n * New features\n * Fixes to issues\n * Configuration file changes\n * ...\n\nOnce these changes have been made, the current changes need to be documented\nwith the following command.\n\n * modern change\n\nExecuting the modern change command asks the developer several questions and\ngenerates a change log based on the developer's answers. The changelog file\ncontains the type of change and its description, and is committed to the git\nrepository.\n\n\n\nWhen executed successfully, the resulting Markdown file containing the change\nlog is saved in the project's .changeset directory. The contents will look like\nthe following.\n\n\n\n\nVersion update#\n\nWhen the project version needs to be updated, execute the following command.\n\n * modern bump\n\nExecuting modern bump will modify the version number in package.json based on\nthe contents of the Markdown file in the .changeset/ directory where the changes\nwere recorded, and generate the CHANGELOG.md file. These Markdown files are also\ndeleted when the version update is complete, so they are \"consumed \".\n\n\n\n\nPublish#\n\nTo publish a project, you can execute the following command.\n\n * modern publish\n\nThe modern release command publishes the project to the npm Registry.\n\nThe release is the latest version, which is also the official version. If you\nwant to change the dist-tag, you can specify it with the modern release --tag\ncommand. For example.\n\n\n\nHowever, if you want to change the version number of the current project to a\npre-release as well, you need to use the modern pre command.\n\n> dist-tag can be understood as: tagging the current release. Generally\n> speaking, the dist-tag for the default release is latest, so you can consider\n> latest as the dist-tag for the official release.\n\n\nPre-releases#\n\nWhen a pre-release is needed before the official release, the following command\nis executed.\n\n * modern pre\n\nFirst modern pre enter to enter pre-release mode, can be the same as the tag\nspecified with the modern release --tag command when releasing the project.\n\n\n\nThen you can update the specific version number with the modern bump command,\nwhich doesn't actually \"consume\" the Markdown file that records the changes:\n\n\n\nThen you can see that the updated version number in package.json will look like\nthis: 0.1.2-next.0.\n\nFinally, if you don't need to do a pre-release anymore, be sure to run the\nmodern pre exit command to exit the pre-release state and to release the\nofficial version when you run the modern bump command again.","routePath":"/module-tools/en/guide/basic/publish-your-project","lang":"en","toc":[{"text":"Tracking changes","id":"tracking-changes","depth":2,"charIndex":610},{"text":"Version update","id":"version-update","depth":2,"charIndex":1355},{"text":"Publish","id":"publish","depth":2,"charIndex":1780},{"text":"Pre-releases","id":"pre-releases","depth":2,"charIndex":2468}],"domain":"","frontmatter":{"sidebar_position":7},"version":""},{"id":23,"title":"Using the Microgenerator","content":"#\n\nModern.js Module provides the Microgenerator tool, which allows for the current\nproject to.\n\n * add new directories and files\n * Modify the contents of the package.json file\n * Execute commands\n\nThus with these capabilities, Microgenerator can enable additional feature\nfunctionality for the project.\n\nThe microgenerator can be started via modern new. The current Microgenerator\nfeatures supported by the Modern.js Module are:\n\n\nDevelop Module Doc#\n\nWhen we want to write documentation for out module project, we can enable the\nmodule doc feature. will create docs directory and related files in the project\ndirectory, and add \"@modern-js/plugin-rspress\" dependency in package.json. Use\nmodern dev and modern build --platform to debug and build your doc site.\n\nTIP\n\nAfter successfully enabling it, you will be prompted to manually add a code\nsimilar to the one below to the configuration.\n\n\n\n\nStorybook#\n\nThe Storybook feature can be enabled when we want to debug a component or a\ncommon module. When this feature is enabled, the stories directory and\n.storybook directory are created in the project directory, and a new\n\"@modern-js/storybook\" dependency is added to package.json. Use storybook dev\nand storybook build to debug and build.\n\n\nTailwind CSS Support#\n\nTailwind CSS is a CSS framework and design system based on Utility Class, which\ncan quickly add common styles to components, and support flexible extension of\ntheme styles.\n\nIf you want to use Tailwind CSS for a project, you can refer to \"Using Tailwind\nCSS\".\n\n\nModern.js Runtime API#\n\nModern.js provides Runtime API capabilities that can only be used in the\nModern.js application project environment. If you need to develop a component\nfor use in a Modern.js application environment, then you can turn on this\nfeature and the microgenerator will add the \"@modern-js/runtime\" dependency.\n\nAlso, the Storybook debugging tool will determine if the project needs to use\nthe Runtime API by checking the project's dependencies and providing the same\nRuntime API runtime environment as the Modern.js application project.\n\nTIP\n\nAfter successfully enabling it, you will be prompted to manually add a code\nsimilar to the one below to the configuration.\n\n","routePath":"/module-tools/en/guide/basic/use-micro-generator","lang":"en","toc":[{"text":"Develop Module Doc","id":"develop-module-doc","depth":2,"charIndex":431},{"text":"Storybook","id":"storybook","depth":2,"charIndex":895},{"text":"Tailwind CSS Support","id":"tailwind-css-support","depth":2,"charIndex":1243},{"text":"Modern.js Runtime API","id":"modernjs-runtime-api","depth":2,"charIndex":1528}],"domain":"","frontmatter":{"sidebar_position":4},"version":""},{"id":24,"title":"Developing Module documentation","content":"#\n\nThis chapter describes how to quickly build a static documentation site for a\nmodule project.\n\n\nBefore we start#\n\n\nWhy we need to build a documentation site for a module#\n\n 1. a documentation site can help us to better organize the structure of the\n    documentation.\n 2. the documentation site has better presentation, such as the ability to\n    execute functions in the page, render components.\n 3. to make better use of AI search capabilities.\n\n\nPreliminary preparation#\n\n 1. Enable the documentation feature via micro-generator.\n 2. Read Introduction to Rspress.\n\nAfter finishing the preparation work, we will build a documentation site for the\nmodule project based on Rspress.\n\n\nBasic site structure#\n\nThe overall layout of the site consists of three parts: the navigation bar, the\nsidebar and the body part, which also includes the TOC (Table of contents found\nat the beginning of a book or document).\n\nThe Rspress uses File System Routing, on which the module documentation is\nbased, to automate the generation of the sidebar. For example, if you have the\nfollowing file structure:\n\n\n\nThen the routing path for foo/bar.md will be /foo/bar, the routing path for\nfoo.md will be /foo, and the routing path for index.md will be /.\n\nThe specific mapping rules are as follows:\n\nFILE-PATH       ROUTING-PATH\nindex.md        /\n/foo.md         /foo\n/foo/index.md   /foo/\n/foo/bar.md     /foo/bar\n\nThe sidebars corresponding in turn to the above file paths and routing paths are\nshown below:\n\n\nConfigure sidebar#\n\nAs shown in the figure above, the module documentation has automatically\ngenerated sidebars for file system routing, where the text of each column of the\nsidebar is determined by the file's first level title or directory name. If you\nneed to customize the sidebar, please use _meta.json or configure sidebar\ndirectly.\n\nINFO\n\nIf your document directory structure complies with internationalization, for\nexample:\n\n\n\nYou need to follow internationalization guide and configure lang 和 locales,\notherwise, the automatically generated sidebar of the module will not handle the\nzh and en directories.\n\n\nWriting Documentation#\n\nNext, we can focus on writing the content of the document. In addition to the\nbasic Markdown syntax, you may also need to understand the following advanced\ntopics:\n\n * Using MDX\n * Using Assets\n\n\nComponent preview#\n\nModule documentation provides preview capabilities for component libraries. The\ncontents in code blocks written in jsx and tsx will be parsed as React\ncomponents.\n\n\nExample#\n\nHere is a complete example using the component preview feature:\n\nAssuming our project name is demo and we export a Button component.\n\n 1. Add a new docs/Button.mdx file:\n\n\n\n 2. In the tsconfig.json, configure aliases and point the package name to the\n    current project directory, make the way document developers and users use\n    components consistent:\n\n\n\n 3. In the .gitignore, add doc_build/:\n\n\n\nCongratulations, you have finished writing a component document, execute pnpm\nrun dev to see the result, remember to build the component library first to make\nsure the component product exists.\n\n\nMobile Preview#\n\nAlso, we support mobile preview mode, i.e. rendering mobile components using\niframe, and set iframe position by iframePosition, support swipe preview and new\npage opening.\n\n\n\nTIP\n\nIf you only want to change the way a particular jsx and tsx block is previewed,\nyou can use a different modifier to identify it:\n\n\n\n\nUsing external demos#\n\nIf our demo is very complex, then it is recommended to write the demo separately\nand then use the code tag in the mdx:\n\n\n\nThis also supports setting the preview method for each individual code block,\nfor example:\n\n\n\n\nUsing built-in components#\n\nThe plugin implements some built-in components internally so that you can\ndevelop module documentation more easily.\n\n\nAPI#\n\nDisplay the API content of the module.\n\nParse file#\n\nBefore we can use the API component, we first need to specify the files to\nparse:\n\n\n\nContent generation#\n\nNext, we'll see what kind of markdown content is generated based on the parsed\nfile.\n\nContent can be generated with two different tools, react-docgen-typescript or\ndocumentation:\n\n * react-docgen-typescript is targeted at component library scenarios and will\n   only parse props to generate tables.\n\n\n\nThe above is a standard writeup where ButtonProps will be extracted into the\ntable and Button will be the title of the table. If you use the default export,\nthe filename will be used as the form title.\n\nNotice that export features declared elsewhere are not available.\n\n\n\nThe generated content is as follows:\n\n\n\nWARNING\n\nIf React types are used in Props, you need to add the types in tsconfig.json,\notherwise the types will not be resolved under the React namespace.\n\n\n\nThe best way is that you import the type directly:\n\n\n\n * documentation is used in tool library scenarios to parse JSDoc annotations.\n\n\n\nThe above is a greet function with a JSDoc annotation. The generated content is\nas follows:\n\n\n\nUsing the component#\n\nNext, you can use our built-in API components in your documentation by passing\nthe key value into the moduleName property。\n\n\n\n\nOverview#\n\nDisplays a list of modules that can be placed on the front page to display all\nmodules.\n\nThe Overview component has only one list property, which receives an array of\nobjects, and the following properties of the objects\n\nPROPERTY   DESCRIPTION              TYPE              DEFAULT\nicon       icon                     React.ReactNode   \ntext       text(required)           string            \nlink       link(required)           string            \narrow      whether to show arrows   boolean           false\n\n\nPlugin options#\n\n\napiParseTool#\n\nAPI parse tool.\n\n * Type:'react-docgen-typescript' | 'documentation'\n * Default: 'react-docgen-typescript'\n\n\ndoc#\n\nConfig.\n\n\nentries#\n\nModule names and relative paths for automatically generated documents.\n\n * Type:Entries | ToolEntries\n * Default: {}\n\n\n\nIt also supports the use of different parsing tools for different files:\n\n\n\n\niframePosition#\n\n * 类型：'follow' | 'fixed'\n * 默认值: 'follow'\n\nWhen the value is follow, each code block will have an iframe showing its\nrendered view. When fixed, the iframe will be fixed to the right side of the\npage, showing the view of all the code blocks on the current page.\n\n\nparseToolOptions#\n\nAPI parse tool options.\n\n * Type:ParseToolOptions\n * Default: {}\n\n\n\n\npreviewMode#\n\n * Type:'iframe' | 'internal'\n * Default: 'internal'\n\nIn case of internal, the component will be rendered directly in the page,\notherwise it will be loaded through an iframe.\n\n\ndeprecated: languages#\n\nWARNING\n\nStarting from version 2.44.0, please refer to the Internationalization section\nto implement multiple languages.\n\n\ndeprecated: useModuleSidebar#\n\nWARNING\n\nStarting from version 2.44.0, a sniffing mechanism has been implemented\ninternally, so please directly use _meta.json or directly configure sidebar to\nimplement a custom sidebar.\n\n\nScripts#\n\n * modern dev: Start dev server for doc site.\n * modern build --platform: Build doc site in production, by default output\n   directories is doc_build.\n\n\nAdvanced guide#\n\nThe above has covered the basics of developing module documentation, but this is\nnot enough for developing a complete documentation station. Check out the\nRspress for an in-depth look at our documentation framework. You can modify the\ndocumentation framework configuration via the doc configuration.\n\n","routePath":"/module-tools/en/guide/basic/use-module-doc","lang":"en","toc":[{"text":"Before we start","id":"before-we-start","depth":2,"charIndex":98},{"text":"Why we need to build a documentation site for a module","id":"why-we-need-to-build-a-documentation-site-for-a-module","depth":3,"charIndex":117},{"text":"Preliminary preparation","id":"preliminary-preparation","depth":3,"charIndex":451},{"text":"Basic site structure","id":"basic-site-structure","depth":2,"charIndex":686},{"text":"Configure sidebar","id":"configure-sidebar","depth":3,"charIndex":1493},{"text":"Writing Documentation","id":"writing-documentation","depth":2,"charIndex":2109},{"text":"Component preview","id":"component-preview","depth":2,"charIndex":2329},{"text":"Example","id":"example","depth":3,"charIndex":2514},{"text":"Mobile Preview","id":"mobile-preview","depth":3,"charIndex":3121},{"text":"Using external demos","id":"using-external-demos","depth":3,"charIndex":3451},{"text":"Using built-in components","id":"using-built-in-components","depth":2,"charIndex":3691},{"text":"API","id":"api","depth":3,"charIndex":3837},{"text":"Parse file","id":"parse-file","depth":4,"charIndex":3883},{"text":"Content generation","id":"content-generation","depth":4,"charIndex":3981},{"text":"Using the component","id":"using-the-component","depth":4,"charIndex":5005},{"text":"Overview","id":"overview","depth":3,"charIndex":5154},{"text":"Plugin options","id":"plugin-options","depth":2,"charIndex":5675},{"text":"apiParseTool","id":"apiparsetool","depth":3,"charIndex":5693},{"text":"doc","id":"doc","depth":3,"charIndex":5817},{"text":"entries","id":"entries","depth":3,"charIndex":5833},{"text":"iframePosition","id":"iframeposition","depth":3,"charIndex":6040},{"text":"parseToolOptions","id":"parsetooloptions","depth":3,"charIndex":6320},{"text":"previewMode","id":"previewmode","depth":3,"charIndex":6408},{"text":"deprecated: languages","id":"deprecated-languages","depth":3,"charIndex":6599},{"text":"deprecated: useModuleSidebar","id":"deprecated-usemodulesidebar","depth":3,"charIndex":6746},{"text":"Scripts","id":"scripts","depth":2,"charIndex":6967},{"text":"Advanced guide","id":"advanced-guide","depth":2,"charIndex":7130}],"domain":"","frontmatter":{"sidebar_position":5},"version":""},{"id":25,"title":"Using Storybook","content":"#\n\nStorybook is a tool dedicated to component debugging, providing around component\ndevelopment.\n\n * Develop UIs that are more durable\n * Test UIs with less effort and no flakes\n * Document UI for your team to reuse\n * Share how the UI actually works\n * Automate UI workflows\n\nBefore when using Storybook, there are various problems related to\nconfigurations, Babel, Webpack, less or sass. Modern.js integrates with\nStorybook, which greatly simplifies configuration for us as we develop our\nStorybook project.\n\n\nV7 (Recommended)#\n\n\nEnable Storybook#\n\nYou can directly enable the Storybook feature by using the following command:\n\n\n\nThis command will create a template for Storybook, including:\n\n * Creating a configuration folder .storybook and a default configuration file\n   .storybook/main.ts.\n * Creating example story components.\n * Updating package.json to add dependencies @storybook/addon-essentials and\n   @modern-js/storybook, as well as creating Storybook-related scripts.\n\n\nEnable Debug output#\n\nIn fact, Modern.js Module is implemented based on esbuild, while Storybook uses\nWebpack as the default build tool, and their configurations are not fully\ncompatible. Therefore, we recommend building the components first, and then\nimporting the component output in stories.\n\nThe way to import component outputs is very simple. Suppose your module exports\na Button component, then you can use it in stories like this:\n\n\n\nIf you want to update the components, you can start the build in watch mode\nbefore starting Storybook:\n\n\n\nINFO\n\nIn the development process, you may encounter situations where you cannot get\ntype definitions in real time. Because only when the code is saved, the type\nfile under the output directory will be updated. At this time:\n\nFor pnpm projects, you can modify the package.json as follows:\n\n\n\n> For the use of publishConfig in pnpm, you can read the following link.\n\nFor npm and Yarn projects, the types value of package.json can only be modified\nmanually during the development stage and release stage.\n\n\nEnable Rspack build#\n\nRspack is known for its fast build speed. To use Rspack as a build tool in\nModern.js, you only need to configure it as follows:\n\n\n\nNote that in the above configuration, the reactDocgen configuration has been\nchanged because Rspack currently does not support\n@storybook/react-docgen-typescript-plugin.\n\n\nConfigurations#\n\nThere are some separate configurations in .storybook/main.js.\n\nbundler#\n\n * Type: 'webpack' | 'rspack'\n * Default: webpack\n\nSpecify the underlying bundler to use either Webpack or Rspack.\n\nExample:\n\n\n\nbuilderConfig#\n\n * Type: BuilderConfig\n * Default: undefined\n\nThe Storybook build capability of Modern.js is provided by Rsbuild, and the\nRsbuild configuration can be modified through builderConfig.\n\n\n\n\nCommand#\n\n@modern-js/storybook proxies some storybook cli commands\n\nstorybook dev#\n\nStart Storybook,detail\n\nstorybook build#\n\nBuild Storybook for production,detail\n\n\nMigrate from V6 to V7#\n\nOur support methods for the two versions are different, so if you are migrating\nfrom V6 to V7, we hope you will also use V7 in the same way, while making the\nfollowing adjustments:\n\n * Configuration file: Migrate any custom configurations (if any) in the\n   original root/config/storybook/main.(j|t)s to the new\n   root/.storybook/main.(j|t)s.\n * Dependencies: Upgrade @storybook/addon-* series dependencies (if any) to\n   version 7 and delete @modern-js/plugin-storybook dependencies.\n * Commands: Delete the original edenx dev storybook and edenx build --platform\n   commands. If you are used to the original pnpm run dev usage, you can replace\n   it with storybook dev -p 6006 and storybook build.\n * modern.config.(j|t)s : Remove the registration of @modern-js/plugin-storybook\n   plugin.\n\n\nV6 (legacy)#\n\nStarting from 2.40.0 version, @modern-js/plugin-storybook will stop iterating.\nIt is recommended to use the V7 version. If your @modern-js/module-tools version\nis lower than 2.40.0, you can use Storybook V6 in the following ways:\n\n\nStart Storybook#\n\nYou can directly use the following command to enable the Storybook feature.\n\n\n\nThis command will create commonly used templates for Storybook, including\n\n * Create stories component examples\n * Update package.json, add a dependency on @modern-js/plugin-storybook, and add\n   related scripts such as pnpm dev storybook.\n\n\nConfigure Storybook#\n\nThe Storybook official configures the project through a folder named .storybook,\nwhich contains various configuration files. In Modern.js Module, you can add\nStorybook configuration files in the project's config/storybook directory.\n\nFor how to use various Storybook configuration files, you can check the\nfollowing link:\n\n * Configure Storybook\n\nHowever, there are some restrictions when using it in module projects:\n\n * Cannot change the location where Story files are stored, that is, the stories\n   configuration cannot be modified in the main.js file.\n * Cannot modify the configuration related to Webpack and Babel, that is, the\n   webpackFinal and babel configurations cannot be modified in the main.js file.\n\n\nBuild Storybook Output#\n\nIn addition to debugging the component or ordinary modules with Storybook, you\ncan also use the following command to execute the Storybook build task.\n\n\n\nAfter the build is complete, you can see the build output files in the\ndist/storybook-static directory.","routePath":"/module-tools/en/guide/basic/using-storybook","lang":"en","toc":[{"text":"V7 (Recommended)","id":"v7-recommended","depth":2,"charIndex":511},{"text":"Enable Storybook","id":"enable-storybook","depth":3,"charIndex":531},{"text":"Enable Debug output","id":"enable-debug-output","depth":3,"charIndex":985},{"text":"Enable Rspack build","id":"enable-rspack-build","depth":3,"charIndex":2036},{"text":"Configurations","id":"configurations","depth":3,"charIndex":2361},{"text":"bundler","id":"bundler","depth":4,"charIndex":2441},{"text":"builderConfig","id":"builderconfig","depth":4,"charIndex":2579},{"text":"Command","id":"command","depth":3,"charIndex":2782},{"text":"storybook dev","id":"storybook-dev","depth":4,"charIndex":2850},{"text":"storybook build","id":"storybook-build","depth":4,"charIndex":2890},{"text":"Migrate from V6 to V7","id":"migrate-from-v6-to-v7","depth":2,"charIndex":2948},{"text":"V6 (legacy)","id":"v6-legacy","depth":2,"charIndex":3767},{"text":"Start Storybook","id":"start-storybook","depth":3,"charIndex":4013},{"text":"Configure Storybook","id":"configure-storybook","depth":3,"charIndex":4352},{"text":"Build Storybook Output","id":"build-storybook-output","depth":3,"charIndex":5092}],"domain":"","frontmatter":{"sidebar_position":5},"version":""},{"id":26,"title":"Developing Components","content":"#\n\nThis chapter will describe how to develop component projects using the Modern.js\nModule.\n\n\nInitialize the project#\n\n 1. It is recommended to use the @modern-js/create command to initialize an npm\n    project.\n\n\n\n 2. The initialized directory structure:\n\n\n\n 3. Finally, modify the file suffix and content of ./src/index.ts as follows,\n    and the initialization of the component project is completed.\n\n\n\n\nDebugging code with Storybook#\n\nPlease refer to \"Using Storybook\" to debug code using Storybook.\n\n\nDeveloping Styles#\n\nNext we can add styles to the component.\n\nThe following capabilities are currently supported for developing styles.\n\n * CSS/PostCSS\n * Less\n * Scss/Sass\n * Tailwind CSS\n * CSS Modules\n\n\nCSS/PostCSS#\n\nModern.js Module supports PostCSS and has the following built-in PostCSS\nplugins.\n\n * flexbugs-fixes\n * custom-properties\n * initial\n * page-break\n * font-variant\n * media-minmax\n * nesting\n\nSo we can create .css files in our projects and use the syntax support and\ncapabilities provided by these plugins directly in our css files.\n\n * Source Code:\n\n\n\n * CSS artifact:\n\n\n\n\nLess#\n\nModern.js Module supports development styles using Less.\n\n> The current built-in Less version is v4.1.3\n\n * Source Code:\n\n\n\n * Less artifact:\n\n\n\n\nSass/Scss#\n\nModern.js Module supports developing styles using Scss/Sass.\n\n> The current built-in Sass version is v1.54.4\n\n * Source code:\n\n\n\n * Less artifact:\n\n\n\n\nTailwind CSS#\n\nPlease refer to \"Using Tailwind CSS\" for detailed usage.\n\n\nCSS Modules#\n\nModern.js Module supports the development of styles using CSS Modules. By\ndefault, the following files are recognized as CSS Module files.\n\n * .module.css\n * .module.less\n * .module.scss\n * .module.sass\n\nIf you need to configure CSS Modules, you can check out the API at\n\n * style.autoModules\n * style.modules\n\nThe following is a code example.\n\n\n\n\n\n\nConfiguring build artifacts#\n\nBased on most scenarios of component project usage, it is recommended to use the\nnpm-component build preset. This preset yields a output directory structure of\n\n\n\n * . /dist/es: Contains bundleless artifacts in ES modules format that support\n   the es6 syntax.\n * . /dist/lib: Contains bundleless artifacts in CommonJS format with support\n   for es6 syntax.\n * . /dist/types: Contains the types file.\n\nThe buildPreset can be configured manually if there is a requirement to use\nsyntax support, and supports modifying the supported syntax by adding a suffix\nto npm-component.\n\n\n\nIf you have special needs for the build artifacts directory structure, you can\nuse the buildConfig API, which can be used by the following documentation.\n\n * modify-output-product\n * in-depth-about-build\n\n\nReleasing components#\n\nIt is recommended to use the version release feature provided by Modern.js\nModule. You can refer to the \"Version Management and Release\" section for more\ninformation.","routePath":"/module-tools/en/guide/best-practices/components","lang":"en","toc":[{"text":"Initialize the project","id":"initialize-the-project","depth":2,"charIndex":93},{"text":"Debugging code with Storybook","id":"debugging-code-with-storybook","depth":2,"charIndex":406},{"text":"Developing Styles","id":"developing-styles","depth":2,"charIndex":505},{"text":"CSS/PostCSS","id":"csspostcss","depth":3,"charIndex":711},{"text":"Less","id":"less","depth":3,"charIndex":1098},{"text":"Sass/Scss","id":"sassscss","depth":3,"charIndex":1251},{"text":"Tailwind CSS","id":"tailwind-css","depth":3,"charIndex":1414},{"text":"CSS Modules","id":"css-modules","depth":3,"charIndex":1488},{"text":"Configuring build artifacts","id":"configuring-build-artifacts","depth":2,"charIndex":1852},{"text":"Releasing components","id":"releasing-components","depth":2,"charIndex":2666}],"domain":"","frontmatter":{"sidebar_position":1},"version":""},{"id":27,"title":"Using Tailwind CSS","content":"#\n\nTailwind CSS is a CSS framework and design system based on Utility Class, which\ncan quickly add common styles to components, and support flexible extension of\ntheme styles.\n\nModern.js Module supports developing component styles using Tailwind CSS.\n\n\nEnabling Tailwind CSS#\n\nTo use Tailwind CSS in Modern.js Module, you can follow the steps below:\n\n 1. Run pnpm run new in the root directory of your project and make the\n    following selections:\n\n\n\nAfter successful initialization, you will see that the package.json has added\ndependencies for tailwindcss and @modern-js/plugin-tailwindcss.\n\n 2. Register the Tailwind plugin in modern.config.ts:\n\n\n\n 3. Create a index.css file and add the following code:\n\n\n\nINFO\n\nDepending on your needs, you can selectively import the CSS styles provided by\nTailwind CSS. Please refer to the @tailwind documentation for detailed usage of\nthe @tailwind directive.\n\n 4. Import the index.css file, for example, add the following code in the root\n    component src/index.jsx:\n\n\n\n 5. Now you can use the Utility Classes provided by Tailwind CSS in your\n    components:\n\n\n\n\nConfiguring Tailwind CSS#\n\nIn Modern.js Module, you have two ways to configure Tailwind CSS:\n\n 1. Using the tailwind.config.{ts,js} file, which follows the official usage of\n    Tailwind CSS. Please refer to \"Tailwind CSS - Configuration\" for more\n    details.\n\n\n\nTIP\n\nPlease upgrade Modern.js to version >= 2.33.0 to support automatic reading of\ntailwind.config.{ts,js} files.\n\n 2. Using the style.tailwindcss configuration option. This is the old way of\n    configuring Tailwind CSS, and we recommend using the tailwind.config.{ts,js}\n    file for configuration.\n\n\n\nIf you are using both the tailwind.config.{ts,js} file and style.tailwindcss\noption, the configuration defined in style.tailwindcss will take precedence and\noverride the content defined in tailwind.config.{ts,js}.\n\n\nTailwind CSS Autocomplete#\n\nTailwind CSS provides an official extension called Tailwind CSS IntelliSense for\nautocompletion of Tailwind CSS class names, CSS functions, and directives in VS\nCode.\n\nYou can follow the steps below to enable the autocomplete feature:\n\n 1. Install the Tailwind CSS IntelliSense extension in VS Code.\n 2. If the root directory of your project does not have a\n    tailwind.config.{ts,js} file, you need to create one and write the Tailwind\n    CSS configuration for your current project. Otherwise, the IDE plugin will\n    not work correctly.\n\n\nBuild Modes#\n\nWhen using Tailwind CSS, please note that there are significant differences\nbetween the bundle and bundleless modes in terms of the build artifacts.\n\nTIP\n\nFor definitions of bundle and bundleless, please refer to the \"In-depth\nunderstanding of build\".\n\n\nBundle Mode#\n\nIn Bundle mode, a separate CSS file is generated, and the JS output does not\nautomatically reference the CSS output file.\n\n * Source code:\n\n\n\n * Output code:\n\n\n\n\n\nIf you need to inject styles into the JS artifact, you can enable the\nstyle.inject option.\n\nIf you haven't enabled style.inject, you can also let users manually import the\nCSS file:\n\n\n\n\nBundleless Mode#\n\nIn bundleless mode, the CSS file is automatically imported in the artifact code\nwithout the need for additional processing.\n\n * Output code:\n\n\n\n\nClass Name Prefix#\n\nYou can add a class name prefix using the prefix option provided by Tailwind\nCSS. This helps avoid potential class name conflicts, such as when different\nversions of Tailwind CSS are used in different parts of an application or\nmodule.\n\nFor example, you can add the foo- prefix using the prefix option in\ntailwind.config.js:\n\n\n\n * Source Code:\n\n\n\n * Output Code:\n\n\n\n\nUsage Guide#\n\nHere are some usage examples of Tailwind CSS.\n\n\nHTML Class Names#\n\nTailwind CSS supports adding styles to HTML tags through class names. When using\nHTML class names, please note that the corresponding CSS styles of Tailwind CSS\nmust be imported in advance.\n\n\n\nGenerated styles (after bundling):\n\n\n\n\n@apply#\n\nTailwind CSS provides the @apply directive, which allows us to inline the styles\nprovided by Tailwind CSS into our own styles.\n\n@apply can be used in CSS, Less, and Sass.\n\n\n\nHowever, there are some considerations when using it with Less and Sass:\n\nSass#\n\nWhen using Tailwind with Sass and there is an !important after @apply,\ninterpolation should be used to ensure Sass compiles correctly.\n\n * Won't work as expected:\n\n\n\n * Will work as expected:\n\n\n\nLess#\n\nWhen using Tailwind with Less, you cannot nest Tailwind's @screen directive.\n\n * Won't work as expected:\n\n\n\n * Instead, use regular media queries and the theme() function to reference your\n   screen sizes or simply avoid nesting your @screen directive.\n\n\n\n\n\n\nAbout designSystem config#\n\ndesignSystem is a deprecated configuration option in Modern.js Module.\n\nStarting from Modern.js Module version 2.33.0, you can use the theme\nconfiguration option of Tailwind CSS as a replacement for designSystem. It is no\nlonger necessary to split the theme configuration and set it on designSystem.\n\n * Previous usage:\n\n\n\n * Current usage:\n\n","routePath":"/module-tools/en/guide/best-practices/use-tailwindcss","lang":"en","toc":[{"text":"Enabling Tailwind CSS","id":"enabling-tailwind-css","depth":2,"charIndex":252},{"text":"Configuring Tailwind CSS","id":"configuring-tailwind-css","depth":2,"charIndex":1105},{"text":"Tailwind CSS Autocomplete","id":"tailwind-css-autocomplete","depth":3,"charIndex":1889},{"text":"Build Modes","id":"build-modes","depth":2,"charIndex":2460},{"text":"Bundle Mode","id":"bundle-mode","depth":3,"charIndex":2728},{"text":"Bundleless Mode","id":"bundleless-mode","depth":3,"charIndex":3091},{"text":"Class Name Prefix","id":"class-name-prefix","depth":2,"charIndex":3254},{"text":"Usage Guide","id":"usage-guide","depth":2,"charIndex":3641},{"text":"HTML Class Names","id":"html-class-names","depth":3,"charIndex":3703},{"text":"`@apply`","id":"apply","depth":3,"charIndex":-1},{"text":"Sass","id":"sass","depth":4,"charIndex":4211},{"text":"Less","id":"less","depth":4,"charIndex":4413},{"text":"About `designSystem` config","id":"about-designsystem-config","depth":2,"charIndex":-1}],"domain":"","frontmatter":{"sidebar_position":2},"version":""},{"id":28,"title":"General Questions","content":"#\n\n\nWhat is the relationship between Modern.js Module and Rsbuild?#\n\nModern.js Module uses esbuild to build toolkits and component libraries, and\nRsbuild focuses on solving web application building scenarios.\n\n\nCan Modern.js Module use webpack plugins or loaders?#\n\nModern.js Module is based on esbuild for building and cannot use tools from the\nwebpack-related ecosystem. You can find more community plugins for esbuild here\n\nIf the UMD product produced by Modern.js Module does not meet your requirements,\nyou can use Rsbuild and add UMD Plugin to build UMD products.","routePath":"/module-tools/en/guide/faq/basic","lang":"en","toc":[{"text":"What is the relationship between Modern.js Module and Rsbuild?","id":"what-is-the-relationship-between-modernjs-module-and-rsbuild","depth":2,"charIndex":3},{"text":"Can Modern.js Module use webpack plugins or loaders?","id":"can-modernjs-module-use-webpack-plugins-or-loaders","depth":2,"charIndex":210}],"domain":"","frontmatter":{},"version":""},{"id":29,"title":"Build FAQ","content":"#\n\nHere only some common problems and bad cases are recorded.\n\nIf the build products do not meet expectations, especially when buildPreset is\nconfigured, please first understand what configuration items buildPreset\nrepresents, and then check each configuration item based on all configuration\nitems.\n\n\nProduct FAQ#\n\n\nInitialization of Class Fields#\n\nTypeSript provides the useDefineForClassFields configuration to control the\nconversion handling for public class fields.\n\nIf we have a piece of code:\n\n\n\nWhen useDefineForClassFields is false, then the compiled code will look like:\n\n\n\nWhen useDefineForClassFields is true, then the compiled code will look like:\n\n\n\nAlso the default value of this configuration will change depending on the target\nconfiguration of tsconfig.json: When target is ES2022 or higher, then\nuseDefineForClassFields is configured to true by default, otherwise it defaults\nto false.\n\nFor more information on this configuration of TypeScript, you can refer to the\nfollowing link:\n\n * The useDefineForClassFields Flag and The declare Property Modifier\n\nThe Modern.js Module will currently process according to the following logic:\n\n 1. The first decision to enable this feature inside Modern.js Module is based\n    on the useDefineForClassFields configuration in tsconfig.json of the current\n    project. Currently, only the contents of the tsconfig.json file under the\n    current project path will be read, and the final tsconfig configuration\n    based on the extends configuration is not supported at this time.\n 2. If the useDefineForClassFields configuration of tsconfig.json is not\n    detected, the default value is determined based on the target configuration\n    of tsconfig.json. If target is greater than ES2022 (including EsNext), then\n    useDefineForClassFields defaults to true, otherwise it is false.\n 3. If the target of tsconfig.json is not detected, it is processed according to\n    the value of useDefineForClassFields as true.\n\n\nbabel-plugin-lodash treats the introduced lodash as undefined#\n\nThis problem occurs when using something like the following:\n\n\n\nCurrent related issues on the babel-plugin-lodash Github:\n\n * #235\n\nThe solution to this problem is to remove babel-plugin-lodash, since the plugin\nis not needed for on-demand referencing at this point and using it would have\nside effects.\n\nA similar situation occurs with babel-plugin-import. If there is code like the\nfollowing:\n\n\n\nIn this case babel-plugin-import may also cause Comps to become undefined. So\nyou need to remove the corresponding babel-plugin-import as well.\n\n\nCannot find module 'http'#\n\nIf the output reports an error like Cannot find module 'http' at browser\nruntime, it means that your output has bundled node modules. This may occur if\nsome of your dependencies support both browser and node, such as axios, in which\ncase you only need to set the platform to browser. If some third-party packages\ndon't support the browser, you may need to manually inject node polyfill.\n\n\nExceptions FAQ#\n\n\nDynamic require of \"react\" is not supported#\n\nProblem Description#\n\nWhen the product format in the product configuration of the build is ES modules.\n\n\n\nIf you import a cjs product from a third-party npm package, the resulting\nproduct may not work properly under webpack.\n\n\n\nSolution#\n\n 1. First you need to find which third-party package is causing the problem. For\n    example, if the error message points to the react package, then look for a\n    third-party package that has code like require('react') in it. For example\n    react-draggable, which only contains cjs artifacts, then the problem is\n    localized to the react-draggable package.\n 2. Then we need to exclude this package with the following configuration, i.e.\n    not package problematic third-party packages.\n\n\n\nReference Links#\n\n * When using esbuild with external react I get Dynamic require of \"react\" is\n   not supported\n\n\nDuring compilation, an error was reported in the less file of a component\nlibrary:'Operation on an invalid type'#\n\nThis is probably because the component library depends on Less version v3, while\nModern.js Module defaults to v4. v3 and v4 have a Break Change in the math\nconfiguration, check this link for details.\n\nTherefore, if a component library like this is used in the source code:\n\nbuildPreset is used in the build configuration, make the following changes:\n\n\n\nOr, if a custom buildConfig is used, modify it as follows:\n\n\n\nIf you are using a component like this in Storybook, you will need to modify the\ndebugging configuration of Storybook:\n\n\n\n\nBundleless DTS failed#\n\nIn the bundleless scenario, it's tsc that generates the type declaration file\ndirectly. You can find the problem file by printing the error message in the\nterminal. For source code files, it is recommended to fix the type problem,\nwhich can better enable reuse of your package. However. if you encounter a type\nchecking problem with a thrid-party package:\n\n 1. enable skipLibCheck to skip the d.ts check of the thrid-party package.\n 2. If the package exports ts files directly, skipLibCheck will not work because\n    it can only skip the d.ts check, so you can only turn off dts.abortOnError\n    to ignore these errors.\n\n\nBundle DTS failed#\n\nThe Modern.js Module directly uses rollup-plugin-dts to package your type\ndescription files. It may not be able to handle the type files of some\nthird-party dependencies\n\nIf you encounter an error message titled \"Bundle DTS failed\" during the build\nprocess of the Modern.js Module, you can observe that the error message is from\na third-party dependency. Try setting dts.respectExternal to false to turn off\nthe behavior of packaging type files of third-party dependencies.\n\n\nError reported for defineConfig function type: If there is no reference to \"...\"\nthen the inferred type of \"default\" cannot be named#\n\nCheck if the include configuration exists in the project's tsconfig.json file,\nand if not, try adding the following:\n\n\n\n\nOther FAQ#\n\n\nHow to skip the pre-processing of less/scss files with bundleless#\n\nBundleless is a single-file compilation method. You just need to remove your\nless/scss files from the entry and copy them to the output. Note that we will\nalso rewrite the moduleId of js referencing less/scss, turn it off through the\nredirect plugin.\n\nBelow is an example of skipping less file processing. You will find that all\nless files in src are copied to dist and the relative path is preserved.\n\n\n\n\nAdd additional compilation feature#\n\nThe Modern.js Module is based on the esbuild implementation, so if you have\nspecial needs or want to add additional compilation capabilities, you can do so\nby implementing the esbuild plugin.\n\nThe Modern.js Module provides esbuildOptions configuration to allow modification\nof Modern.js's internal esbuild configuration, so that custom esbuild plugins\ncan be added via this configuration:\n\n\n\nWhen adding an esbuild plugin, please note that you need to add the plugin at\nthe beginning of the plugins array. This is because the Modern.js Module is also\nintegrated into the entire build process through an esbuild plugin. Therefore,\ncustom plugins need to be registered with higher priority.\n\n\nSupport for generating TypeScript declaration files for CSS Modules#\n\n * First Solution: typed-css-modules\n * Second Solution: postcss-modules-dts\n\n","routePath":"/module-tools/en/guide/faq/build","lang":"en","toc":[{"text":"Product FAQ","id":"product-faq","depth":2,"charIndex":301},{"text":"Initialization of Class Fields","id":"initialization-of-class-fields","depth":3,"charIndex":316},{"text":"babel-plugin-lodash treats the introduced lodash as `undefined`","id":"babel-plugin-lodash-treats-the-introduced-lodash-as-undefined","depth":3,"charIndex":-1},{"text":"Cannot find module 'http'","id":"cannot-find-module-http","depth":3,"charIndex":2578},{"text":"Exceptions FAQ","id":"exceptions-faq","depth":2,"charIndex":2995},{"text":"Dynamic require of \"react\" is not supported","id":"dynamic-require-of-react-is-not-supported","depth":3,"charIndex":3013},{"text":"Problem Description","id":"problem-description","depth":4,"charIndex":3059},{"text":"Solution","id":"solution","depth":4,"charIndex":3287},{"text":"Reference Links","id":"reference-links","depth":4,"charIndex":3792},{"text":"During compilation, an error was reported in the less file of a component library:`'Operation on an invalid type'`","id":"during-compilation-an-error-was-reported-in-the-less-file-of-a-component-libraryoperation-on-an-invalid-type","depth":3,"charIndex":-1},{"text":"Bundleless DTS failed","id":"bundleless-dts-failed","depth":3,"charIndex":4560},{"text":"Bundle DTS failed","id":"bundle-dts-failed","depth":3,"charIndex":5206},{"text":"Error reported for `defineConfig` function type: `If there is no reference to \"...\" then the inferred type of \"default\" cannot be named`","id":"error-reported-for-defineconfig-function-type-if-there-is-no-reference-to--then-the-inferred-type-of-default-cannot-be-named","depth":3,"charIndex":-1},{"text":"Other FAQ","id":"other-faq","depth":2,"charIndex":5958},{"text":"How to skip the pre-processing of less/scss files with bundleless","id":"how-to-skip-the-pre-processing-of-lessscss-files-with-bundleless","depth":3,"charIndex":5971},{"text":"Add additional compilation feature","id":"add-additional-compilation-feature","depth":3,"charIndex":6445},{"text":"Support for generating TypeScript declaration files for CSS Modules","id":"support-for-generating-typescript-declaration-files-for-css-modules","depth":3,"charIndex":7173}],"domain":"","frontmatter":{},"version":""},{"id":30,"title":"FAQ","content":"#\n\nHere is a list of all frequently asked questions about Modern.js Module.\n\n * General FAQ\n * Build FAQ\n * Storybook FAQ","routePath":"/module-tools/en/guide/faq/","lang":"en","toc":[],"domain":"","frontmatter":{},"version":""},{"id":31,"title":"Storybook FAQ","content":"#\n\n\nStorybook v7 Support#\n\nStorybook v7 is now fully supported and has become our recommended version.\n\n\nUsing Storybook Addon or other configurations does not work#\n\nModern.js Module is currently using Storybook version v6, if you are using Addon\nversion v7 you may not be able to get the addon to work.\n\nIn addition to the Addon, other configurations may also have differences. For\nexample, if you modify the preview.js configuration file, Storybook v6 is\nwritten differently than v7:\n\n * v6：Document\n * v7：Document\n\n\nCannot find module 'react-dom/package.json'#\n\nWhen debug Storybook, the following problem occurs:\n\n\n\nYou can install the react-dom dependency in the project.\n\n\n\n\nUnable to locate the specific error message#\n\nSolutions:\n\n 1. Find @storybook/core-server/dist/cjs/dev-server.js\n 2. Find this code: var _await$Promise$all = await Promise.all([preview,\n    manager,.\n 3. Modify it：\n\n\n\n\nCan`t find any stories is your Storybook#\n\n\n\nWhen you get a problem like this, you can first open the browser console and\nthere should be some error messages. You can use the error messages to deduce if\nthere is a problem in the code you are writing that is causing Storybook to not\nwork properly.\n\n\nStorybook Adds Proxy Functionality#\n\nStorybook does not provide a solution for this, but there is one in the\nStorybook Issue. In the Modern.js Module, you can:\n\n 1. Add the .storybook/middleware.js file and initialize the following:\n\n\n\n 2. add http-proxy-middleware dependency\n 3. Add proxy routing-related configuration\n\n\n\nLink：https://github.com/storybookjs/storybook/issues/11551\n\n\nTailwind CSS doesn't work in Storybook#\n\nThe Storybook build capability of the Modern.js Module is provided by Rsbuild.\nSince the underlying implementation of Rsbuild is not integrated with Modern.js\nModule, the Modern.js Module plugins do not work in Storybook (Rsbuild).\n\nSolution: Register the tailwindcss PostCSS plugin in storybook.\n\nReference link: Rsbuild - tailwindcss.","routePath":"/module-tools/en/guide/faq/storybook","lang":"en","toc":[{"text":"Storybook v7 Support","id":"storybook-v7-support","depth":2,"charIndex":3},{"text":"Using Storybook Addon or other configurations does not work","id":"using-storybook-addon-or-other-configurations-does-not-work","depth":2,"charIndex":104},{"text":"Cannot find module 'react-dom/package.json'","id":"cannot-find-module-react-dompackagejson","depth":2,"charIndex":519},{"text":"Unable to locate the specific error message","id":"unable-to-locate-the-specific-error-message","depth":2,"charIndex":681},{"text":"Can`t find any stories is your Storybook","id":"cant-find-any-stories-is-your-storybook","depth":2,"charIndex":900},{"text":"Storybook Adds Proxy Functionality","id":"storybook-adds-proxy-functionality","depth":2,"charIndex":1200},{"text":"Tailwind CSS doesn't work in Storybook","id":"tailwind-css-doesnt-work-in-storybook","depth":2,"charIndex":1585}],"domain":"","frontmatter":{},"version":""},{"id":32,"title":"Quick Start","content":"#\n\n\n3 minute demo#\n\nWant to experience Modern.js Module in action? The only prerequisite you need is\nNode.js LTS and make sure your Node version is >= 16.0.0.We recommend using the\nLTS version of Node.js 18.\n\n\nCreate new project#\n\nIf you want to create a complete Modern.js Module, you can execute the following\ncommand:\n\n\n\nINFO\n\nExecute npx @modern-js/create -h for more command line arguments\n\nNext, in the issue interaction, follow the options below.\n\n\n\n> The project name is the value of the \"name\" field in package.json.\n\nThen the process of initializing the project will start. After the project\ndirectory and files are generated and the dependencies are installed, a complete\nmodule project is created.\n\nWe can start the project build directly with the pnpm build command, and start\nthe build in watching mode with the pnpm build --watch command.\n\n\nAdd to an existing project#\n\nFrom your shell, install the following dependencies in your project.\n\n * @modern-js/module-tools\n * \"typescript\" (omitted if not a TypeScript project)\n\n> If it's a TypeScript project, add the \"typescript\" dependency.\n\n> For projects that use pnpm or the Yarn package manager, just replace npm. pnpm\n> is recommended.\n\nNext, create the modern.config.(t|j)s file in the root of the project.\n\n\n\nFinally, add the command \"build\": \"modern build\" to the project's package.json\nfile.\n\n\n\nIf your project has a src/index.(js|jsx) file or both src/index.(ts|tsx) and\ntsconfig.json files, then congratulations you can run the npm run build command\ndirectly to build your project with Modern.js Module.\n\n\nCore npm Package#\n\n@modern-js/module-tools is the core npm package of Modern.js Module, providing\nthe following capabilities:\n\n * It offers commonly used CLI commands such as modern dev, modern build, and\n   more.\n * It integrates Modern.js Core, providing capabilities for configuration\n   parsing, plugin loading, and more.\n * It integrates esbuild and SWC, providing build capabilities.\n * It integrates some commonly used plugins, such as plugin-lint,\n   plugin-changeset, and others.\n\n@modern-js/module-tools is implemented based on the plugin system of Modern.js.\nEssentially, it is a plugin. Therefore, you need to register moduleTools in the\nplugins field of the configuration file:\n\n\n\n\nView official example#\n\nIf you want to see the complete project using the Modern.js Module, you can\nexecute the following command.\n\n\n\n\nLet's get started#\n\nChoose your tutorial scenario...\n\n * I'm a beginner and need to learn basic usage of Modern.js Module.\n * I have learned the basic usage of Modern.js Module and can learn advanced\n   usage of Modern.js Module.\n * I need to expand my project capabilities and need to learn how to develop\n   plugins for Modern.js Module.","routePath":"/module-tools/en/guide/intro/getting-started","lang":"en","toc":[{"text":"3 minute demo","id":"3-minute-demo","depth":2,"charIndex":3},{"text":"Create new project","id":"create-new-project","depth":3,"charIndex":209},{"text":"Add to an existing project","id":"add-to-an-existing-project","depth":3,"charIndex":855},{"text":"Core npm Package","id":"core-npm-package","depth":3,"charIndex":1577},{"text":"View official example","id":"view-official-example","depth":3,"charIndex":2272},{"text":"Let's get started","id":"lets-get-started","depth":2,"charIndex":2407}],"domain":"","frontmatter":{"sidebar_position":3},"version":""},{"id":33,"title":"Welcome to Modern.js Module","content":"#\n\nModern.js Module is a modules engineering solution for Modern.js, as well as a\ncore dependency. It allows developers to build, debug, and publish module type\nproject more easily. A module type project can mostly be thought of as an npm\npackage type project, which may be a component, component library or tool\nlibrary project.\n\nIf you are planning to develop a project of the npm package type, then you came\nto the right place! Modern.js provides a professional Modern.js Module. It gives\nyou:\n\n * Simple project initialization: simply execute the npx @modern-js/create\n   project-dir command, followed by a few interactive questions, to create a\n   complete module type project. The created project also supports the choice of\n   two package managers, pnpm and Yarn.\n * Comprehensive build capabilities and faster builds: Modern.js Module provides\n   high-performance build capabilities based on esbuild and SWC, and provides\n   rich configurations for different build scenarios.\n * Storybook debugging tools: Modern.js Module provides Storybook debugging\n   tools for debugging module projects. After installing the Storybook plugin\n   for Modern.js Module, you can start it with the storybook dev command. You\n   can use Storybook not only for debugging components, but also for other types\n   of modules.\n * Versioning based on Changesets: When you need to record changes to a project,\n   you can use the modern change command to generate a Markdown file containing\n   the changes; when you need to upgrade a project, you can use the modern bump\n   command to analyze and upgrade the version through the Markdown file; when\n   you need to release a project, you can use the modern release command to\n   release the project; Modern.js Module implements these commands based on\n   Changesets.\n * Extensible plugin mechanism: Want to integrate additional debugging tools for\n   your project? Or maybe you want to do some extra processing during the build\n   process, Modern.js Module provides a plugin mechanism and plugin hooks that\n   cover both the dev command and the build command process. You can use them to\n   extend the capabilities of your project.\n * Lots more! Modern.js Module will continue to optimize its build and debug\n   features in the future. If there are important issues to be solved in module\n   project building, or if a mainstream module project debugging tool or pattern\n   emerges, then they will probably be supported by Modern.js Module.","routePath":"/module-tools/en/guide/intro/welcome","lang":"en","toc":[],"domain":"","frontmatter":{"sidebar_position":1},"version":""},{"id":34,"title":"Why you need Modern.js Module","content":"#\n\nYou've probably all experienced it: when developing a component library or tool\nlibrary from scratch, we have to consider not only how to write the code logic\nof the project itself, but also how to build, debug, test, format the code, and\nother things that have nothing to do with the code logic.\n\nFor example, when we consider which builder is used to build the code for a\nmodule project, we might previously consider webpack or Rollup, but now we might\nalso consider esbuild or SWC.\n\nRegardless of which builder is chosen, this is going to be a costly learning\ncurve for developers who are not skilled in the use of these build tools. Even\nif you want to use them quickly, it will take a lot of time and effort.\n\nIn addition to the build, things like providing debugging tools for projects,\nsupporting testing capabilities, adding code format validation, etc. can take a\nlong time and effort for a novice to understand or master them and actually\nserve the current project.\n\nTo ensure the quality of the code and the integrity of the project, we often\nneed to do these things that are not related to the logical implementation of\nthe code. However, these things are likely to affect the overall project\ndevelopment progress, reduce the developer's development experience, and make\nthe developer feel that the development threshold of the module project is very\nhigh.\n\nIf you have to go through all this work every time you develop a module type\nproject, you will spend most of your development time in the beginning on these\nthings that are not related to code implementation. If we could provide a module\nengineering solution that would help developers to solve the project engineering\nissues and allow them to focus more on code implementation, it would greatly\nimprove the module type project development experience.\n\n\n\nModern.js, in order to make developing module type projects easier, provides a\nmodule engineering solution in order to solve the above mentioned problems and\nprovides the main features using Modern.js Module. Modern.js Module can be\nunderstood as a tool dedicated to the development of module type projects.","routePath":"/module-tools/en/guide/intro/why-module-engineering-solution","lang":"en","toc":[],"domain":"","frontmatter":{"sidebar_position":2},"version":""},{"id":36,"title":"Quick Start","content":"#\n\nModern.js Module not only provides a rich set of features, but also supports\nextending the capabilities of the current project by way of plugins.\n\nWe can quickly see how to write a Modern.js Module plugin by using the following\nexample.\n\n 1. First we create . /plugins/example.ts file under the initialized project.\n\n\n\n 2. Next add the code for the plugin to the example.ts file.\n\n\n\n 3. Then we register the plugin we just wrote via the plugins API.\n\n\n\n 4. Finally, run modern build and you will see:\n\n\n\nWith the above example, we learned the following things.\n\n * The recommended plugin directory structure\n * The initialization code of the plugin\n * Plugin registration\n\nIn addition to the above, we also need to understand.\n\n * plugin objects, type definitions and recommended configuration options\n * setup functions, api object parameters, lifecycle hooks","routePath":"/module-tools/en/plugins/guide/getting-started","lang":"en","toc":[],"domain":"","frontmatter":{"sidebar_position":1},"version":""},{"id":37,"title":"Plugin Object","content":"#\n\nThe Modern.js Module plugin is an object, and the object contains the following\nproperties.\n\n * name: The name of the plugin, a unique identifier.\n * setup: plugin initialization function, which will be executed only once.\n   setup function can return a Hooks object, and Modern.js Module will execute\n   the function corresponding to the Hook defined on the Hooks object at a\n   specific time.\n\nFor example, in the following plugin code example, the beforeBuild function is\ntriggered before the project starts the build task and the build start log is\nprinted.\n\n\n\n\n\n\nPlugin type definitions#\n\nWhen using TypeScript, you can introduce the built-in CliPlugin and ModuleTools\ntypes to provide the correct type derivation for plugins: ``\n\n\n\n\nPlugin configuration options#\n\nIt is recommended to write the plugin as a function, so that the plugin can\nreceive configuration options via function entry.\n\n","routePath":"/module-tools/en/plugins/guide/plugin-object","lang":"en","toc":[{"text":"Plugin type definitions","id":"plugin-type-definitions","depth":2,"charIndex":570},{"text":"Plugin configuration options","id":"plugin-configuration-options","depth":2,"charIndex":741}],"domain":"","frontmatter":{"sidebar_position":2},"version":""},{"id":38,"title":"Setup function","content":"#\n\nIn the \"Plugin object\" section we know that the plugin object contains a setup\nfunction that not only contains an api object parameter, but also returns a\nHooks object.\n\n\nPlugin API objects#\n\nThe setup function of the plugin will provide an api object parameter, and you\ncan call some of the methods provided on this object to get information about\nthe configuration, project context, etc.\n\n\n\n\napi.useAppContext#\n\nUsed to get project context information.\n\n\n\nINFO\n\nThrough the actual type file, we can see that there are some additional fields.\nHowever, for Modern.js Module, the fields mentioned above are the only ones that\nare meaningful. The same applies to other methods of the api object.\n\n\napi.useResolvedConfigContext#\n\nUsed to get the final configuration after parsing.\n\nINFO\n\nIf you need to get the build-related final configuration, you need to use the\nbeforeBuild Hook.\n\n\n\n\napi.useHookRunners#\n\nUsed to get the executors of Hooks and trigger the execution of a specific Hook.\n\n\n\n\nAsynchronous setup#\n\nThe setup of a CLI plugin can be an asynchronous function that performs\nasynchronous logic during the initialization process.\n\n\n\nNote that the setup function of the next plugin is not executed until the async\nsetup function of the current plugin has finished. Therefore, you should avoid\nperforming time-consuming asynchronous operations in the setup function to avoid\nslowing down the startup performance of the CLI.\n\n\nLife cycle hooks#\n\nWe know that the setup function returns a Hooks object, which can also be\nunderstood as an object with Modern.js Module lifecycle hooks.\n\nCurrently there are two main types of hooks.\n\n * build hooks: triggered only when the build command is executed to build the\n   source code product.\n * buildPlatform hook: triggered only when the build --platform command is\n   executed to generate other build artifacts.\n * debug hooks: hooks that are triggered when running the dev command.\n\nSee the API documentation for a full list of lifecycle hooks.","routePath":"/module-tools/en/plugins/guide/setup-function","lang":"en","toc":[{"text":"Plugin API objects","id":"plugin-api-objects","depth":2,"charIndex":173},{"text":"`api.useAppContext`","id":"apiuseappcontext","depth":3,"charIndex":-1},{"text":"`api.useResolvedConfigContext`","id":"apiuseresolvedconfigcontext","depth":3,"charIndex":-1},{"text":"`api.useHookRunners`","id":"apiusehookrunners","depth":3,"charIndex":-1},{"text":"Asynchronous setup","id":"asynchronous-setup","depth":2,"charIndex":993},{"text":"Life cycle hooks","id":"life-cycle-hooks","depth":2,"charIndex":1434}],"domain":"","frontmatter":{"sidebar_position":3},"version":""},{"id":39,"title":"Overview","content":"#\n\n\nOfficial Plugins#\n\n * @modern-js/plugin-module-import：Use SWC to provide the same ability as\n   babel-plugin-import.\n * @modern-js/plugin-module-banner：Add custom content, such as copyright\n   information, to the top and bottom of each JS and CSS file.\n * @modern-js/plugin-module-node-polyfill： Inject Polyfills of Node core modules\n   in the browser side.\n * @modern-js/plugin-module-polyfill：Inject polyfill for unsupported features\n   used in your code.\n * @modern-js/plugin-module-babel：Use Babel to transform your code.\n * @modern-js/plugin-module-vue：Support for Vue component.","routePath":"/module-tools/en/plugins/official-list/overview","lang":"en","toc":[{"text":"Official Plugins","id":"official-plugins","depth":2,"charIndex":3}],"domain":"","frontmatter":{},"version":""},{"id":40,"title":"Babel Plugin","content":"#\n\nTIP\n\nNormally, we don't need to use Babel to transform our code, this plugin is only\nused as a downgrade.\n\n\nQuick start#\n\n\nInstall#\n\n\nRegister#\n\nYou can install the plugin with the following command:\n\n\n\nYou can also configure the registration via hooks, for example, if you need to\nbundle two files A and B at the same time and only need to use babel when bundle\nA:\n\n\n\n\nConfig#\n\nSee babel options.\n\nHere is an example with @babel/preset-env configured\n\n","routePath":"/module-tools/en/plugins/official-list/plugin-babel","lang":"en","toc":[{"text":"Quick start","id":"quick-start","depth":2,"charIndex":110},{"text":"Install","id":"install","depth":3,"charIndex":125},{"text":"Register","id":"register","depth":3,"charIndex":136},{"text":"Config","id":"config","depth":2,"charIndex":372}],"domain":"","frontmatter":{},"version":""},{"id":41,"title":"Banner Plugin","content":"#\n\nProvide the ability to inject content at the top and bottom of each JS and CSS\nfile.\n\n\nQuick Start#\n\n\nInstall#\n\n\nRegister#\n\nYou can install the plugin with the following command:\n\n\n\nTIP\n\nNote: CSS comments do not support the //comment syntax. Refer to \"CSS Comments\"\n\n\nExample#\n\n\nAdd copyright information at the top of a JS file#\n\n\n\n\nConfiguration#\n\n * Type\n\n\n\n\nbanner#\n\nAdd content at the top.\n\n * banner.js: Add content at the top of a JS file.\n * banner.css: Add content at the top of a CSS file.\n\n\nfooter#\n\nAdd content at the bottom.\n\n * footer.js: Add content at the bottom of a JS file.\n * footer.css: Add content at the bottom of a CSS file.","routePath":"/module-tools/en/plugins/official-list/plugin-banner","lang":"en","toc":[{"text":"Quick Start","id":"quick-start","depth":2,"charIndex":89},{"text":"Install","id":"install","depth":3,"charIndex":104},{"text":"Register","id":"register","depth":3,"charIndex":115},{"text":"Example","id":"example","depth":2,"charIndex":271},{"text":"Add copyright information at the top of a JS file","id":"add-copyright-information-at-the-top-of-a-js-file","depth":3,"charIndex":282},{"text":"Configuration","id":"configuration","depth":2,"charIndex":337},{"text":"banner","id":"banner","depth":3,"charIndex":365},{"text":"footer","id":"footer","depth":3,"charIndex":505}],"domain":"","frontmatter":{},"version":""},{"id":42,"title":"Import Plugin","content":"#\n\nUsing SWC provides the same ability and configuration as babel-plugin-import.\n\nTIP\n\nSince @modern-js/module-tools version >= 2.16.0, this plugin functionality is\nbuilt into Modern.js Module and is provided by transformImport.\n\n\nQuick Start#\n\n\nInstall#\n\n\nRegister#\n\nIn Modern.js Module, you can register plugins in the following way:\n\n\n\nThis way we can use the ability of automatic import in Modern.js Module.\n\n\nConfigurations#\n\n * Type:\n\n\n\n\npluginImport#\n\n * Type: object[]\n\nThe elements of the array are configuration objects for babel-plugin-import,\nwhich can be referred to options。\n\nExample:\n\n\n\n\nNotes#\n\nSWC (Speedy Web Compiler) is written in Rust, and this plugin is based on SWC\nand ported from babel-plugin-import. The configuration options remain\nconsistent.\n\nSome configurations can be passed in as functions, such as customName,\ncustomStyleName, etc., but in Modern.js Module, we do not recommend using\nfunctions in these configuration items. Because we will call SWC in the esbuild\nplugin, and then when Rust calls these configuration functions through Node-API,\na deadlock will occur.\n\nSimple function logic can actually be replaced by template language. Below is an\nexample of using a template with customName:\n\n\n\nAdd the following configuration on the right-hand side:\n\n\n\nThe {{ member }} in it will be replaced with the corresponding import member.\nAfter transformation:\n\n\n\nTemplate customName: 'foo/es/{{ member }}' is the same as customName: (member)\n=> `foo/es/${member}` , but template value has no performance overhead of\nNode-API.\n\nThe template used here is handlebars. There are some useful builtin tools, Take\nthe above import statement as an example:\n\n\n\nTransformed to:\n\n\n\nIn addition to kebabCase, there are cameraCase, snakeCase, upperCase and\nlowerCase can be used as well.","routePath":"/module-tools/en/plugins/official-list/plugin-import","lang":"en","toc":[{"text":"Quick Start","id":"quick-start","depth":2,"charIndex":230},{"text":"Install","id":"install","depth":3,"charIndex":245},{"text":"Register","id":"register","depth":3,"charIndex":256},{"text":"Configurations","id":"configurations","depth":2,"charIndex":413},{"text":"pluginImport","id":"pluginimport","depth":3,"charIndex":443},{"text":"Notes","id":"notes","depth":2,"charIndex":602}],"domain":"","frontmatter":{},"version":""},{"id":43,"title":"Node Polyfill Plugin","content":"#\n\nAbout Node Polyfill\n\nNormally, we don't need to use Node libs on the browser side. However, it is\npossible to use some Node libs when the code will run on both the Node side and\nthe browser side, and Node Polyfill provides browser versions of polyfills for\nthese Node libs.\n\nBy using the Node Polyfill plugin, Node core libs polyfills are automatically\ninjected into the browser-side, allowing you to use these modules on the browser\nside with confidence.\n\n\nQuick Start#\n\n\nInstall#\n\n\nRegister#\n\nIn Modern.js Module, you can register plugins in the following way:\n\n\n\n\nConfigurations#\n\n * Type:\n\n\n\n\nexclude#\n\nExclude the Node Polyfill to be injected.\n\n\n\n\noverrides#\n\nOverride the built-in Node Polyfill.\n\n\n\n\nNode Polyfills#\n\n\nGlobals#\n\n * Buffer\n * process\n * console\n\nWhen the above global variables are used directly in code, the corresponding\npolyfill will be injected.\n\n\n\n\nModules#\n\n * assert\n * buffer\n * console\n * constants\n * crypto\n * domain\n * events\n * http\n * https\n * os\n * path\n * punycode\n * process\n * querystring\n * stream\n * _stream_duplex\n * _stream_passthrough\n * _stream_readable\n * _stream_transform\n * _stream_writable\n * string_decoder\n * sys\n * timers\n * tty\n * url\n * util\n * vm\n * zlib\n\nWhen the above module is referenced in code via import / require syntax, the\ncorresponding polyfill will be injected.\n\n\n\n\nFallbacks#\n\n * child_process\n * cluster\n * dgram\n * dns\n * fs\n * module\n * net\n * readline\n * repl\n * tls\n\nCurrently there is no polyfill for the above modules on the browser side, so\nwhen you import the above modules, it will automatically fallback to an empty\nobject.\n\n","routePath":"/module-tools/en/plugins/official-list/plugin-node-polyfill","lang":"en","toc":[{"text":"Quick Start","id":"quick-start","depth":2,"charIndex":460},{"text":"Install","id":"install","depth":3,"charIndex":475},{"text":"Register","id":"register","depth":3,"charIndex":486},{"text":"Configurations","id":"configurations","depth":2,"charIndex":569},{"text":"exclude","id":"exclude","depth":3,"charIndex":599},{"text":"overrides","id":"overrides","depth":3,"charIndex":655},{"text":"Node Polyfills","id":"node-polyfills","depth":2,"charIndex":708},{"text":"Globals","id":"globals","depth":3,"charIndex":726},{"text":"Modules","id":"modules","depth":3,"charIndex":877},{"text":"Fallbacks","id":"fallbacks","depth":3,"charIndex":1336}],"domain":"","frontmatter":{},"version":""},{"id":44,"title":"Polyfill Plugin","content":"#\n\nTIP\n\nNormally, we don't need to inject polyfill for npm packages, this step should be\ndone on the web application framework side, but in some scenarios we need to\ninject polyfill in order to make our library run directly in low version\nbrowsers.\n\nNote that this plugin does not transform your code syntax, it only injects\npolyfill for unsupported functions used in your code, importing them as normal\nfunctions instead of polluting the global. You need to install the core-js-pure\ndependency.\n\n\nQuick start#\n\n\nInstall#\n\n\nRegister#\n\nIn Modern.js Module, you can register plugins in the following way:\n\n\n\nYou can also configure registration via hooks, for example, if you have multiple\nbuild configurations at the same time and only need to inject the polyfill when\nbundle:\n\n\n\n\nConfig#\n\n * Type\n\n\n\n\ntargets#\n\nSee Babel target.\n\nThis is a example.\n\n","routePath":"/module-tools/en/plugins/official-list/plugin-polyfill","lang":"en","toc":[{"text":"Quick start","id":"quick-start","depth":2,"charIndex":497},{"text":"Install","id":"install","depth":3,"charIndex":512},{"text":"Register","id":"register","depth":3,"charIndex":523},{"text":"Config","id":"config","depth":2,"charIndex":778},{"text":"targets","id":"targets","depth":3,"charIndex":799}],"domain":"","frontmatter":{},"version":""},{"id":45,"title":"Vue Plugin","content":"#\n\nThe Vue plugin provides support for building Vue 3 components. The plugin\ninternally integrates esbuild-plugin-vue3 and @vue/babel-plugin-jsx。\n\nWARNING\n\nNotice that we have some limitation:\n\n 1. The current implementation of this plugin integrates directly with the\n    community plugin and therefore does not support writing jsx/tsx in sfc.\n 2. If you want to generate d.ts for the components, please use the official\n    recommendation vue-tsc.\n 3. Only support bundle, we recommend to set input to ['src/**/*.vue'] or\n    ['src/index.ts'].\n\n\nQuick start#\n\n\nInstall#\n\n\nRegister#\n\nIn Modern.js Module, you can register plugins in the following way:\n\n\n\n\nOptions#\n\n\nvueJsxPluginOptions#\n\n * Type:\n\n\n\n * Default: {}\n\nOptions passed to @vue/babel-plugin-jsx, please refer to the\n@vue/babel-plugin-jsx documentation for detailed usage.","routePath":"/module-tools/en/plugins/official-list/plugin-vue","lang":"en","toc":[{"text":"Quick start","id":"quick-start","depth":2,"charIndex":547},{"text":"Install","id":"install","depth":3,"charIndex":562},{"text":"Register","id":"register","depth":3,"charIndex":573},{"text":"Options","id":"options","depth":2,"charIndex":656},{"text":"vueJsxPluginOptions","id":"vuejsxpluginoptions","depth":3,"charIndex":667}],"domain":"","frontmatter":{},"version":""}]