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

package/doc_build/static/js/async/5493.3644c7b8.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["5493"],{1446:function(e,n,i){i.r(n),i.d(n,{default:function(){return c}});var d=i(8093),l=i(5878);function s(e){let n=Object.assign({h1:"h1",a:"a",h2:"h2",p:"p",code:"code",pre:"pre",strong:"strong",ul:"ul",li:"li",ol:"ol",em:"em"},(0,l.ah)(),e.components);return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(n.h1,{id:"修改输出产物",children:["修改输出产物",(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#修改输出产物",children:"#"})]}),"\n",(0,d.jsxs)(n.h2,{id:"默认输出产物",children:["默认输出产物",(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#默认输出产物",children:"#"})]}),"\n",(0,d.jsxs)(n.p,{children:["当你在初始化的项目里使用 ",(0,d.jsx)(n.code,{children:"modern build"})," 命令的时候，Modern.js Module 会根据当前配置内容，生成相应的构建产物。"]}),"\n",(0,d.jsx)(n.p,{children:"模板创建的默认配置内容如下："}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\n\nexport default defineConfig({\n  // 注册 Modern.js Module 的 CLI 工具\n  plugins: [moduleTools()],\n  // 指定构建预设配置\n  buildPreset: 'npm-library',\n});\n"})}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"默认生成产物具有以下特点"}),"："]}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["会生成 ",(0,d.jsx)(n.a,{href:"https://nodejs.org/api/modules.html#modules-commonjs-modules",target:"_blank",rel:"noopener noreferrer",children:"CommonJS"})," 和 ",(0,d.jsx)(n.a,{href:"https://nodejs.org/api/esm.html#modules-ecmascript-modules",target:"_blank",rel:"noopener noreferrer",children:"ESM"})," 两份产物。"]}),"\n",(0,d.jsxs)(n.li,{children:["代码语法支持到 ",(0,d.jsx)(n.code,{children:"ES6"})," ,更高级的语法将会被转换。"]}),"\n",(0,d.jsxs)(n.li,{children:["所有的代码经过打包变成了一个文件，即进行了 ",(0,d.jsx)(n.strong,{children:"bundle"})," 处理。"]}),"\n",(0,d.jsxs)(n.li,{children:["产物输出根目录为项目下的 ",(0,d.jsx)(n.code,{children:"dist"})," 目录，类型文件输出的目录为 ",(0,d.jsx)(n.code,{children:"dist/types"}),"。"]}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:"看到这里你可能会有以下疑问："}),"\n",(0,d.jsxs)(n.ol,{children:["\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.code,{children:"buildPreset"})," 是什么？"]}),"\n",(0,d.jsx)(n.li,{children:"产物的这些特点是由什么决定的？"}),"\n"]}),"\n",(0,d.jsxs)(n.p,{children:["接下来，我们首先来了解一下 ",(0,d.jsx)(n.code,{children:"buildPreset"}),"。"]}),"\n",(0,d.jsxs)(n.h2,{id:"构建预设",children:["构建预设",(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#构建预设",children:"#"})]}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"buildPreset"})," 代表着提前准备好的一组或者多组构建相关的配置，只需要使用 ",(0,d.jsx)(n.code,{children:"buildPreset"})," 对应的预设值，就可以省去麻烦且复杂的配置工作，得到符合预期的产物。"]}),"\n",(0,d.jsx)(n.p,{children:"Modern.js Module 主要内置了两套构建预设，包括:"}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.code,{children:"npm-component"}),": 用于构建组件库。"]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.code,{children:"npm-library"}),": 用于打包其他库类型的项目，如工具库。"]}),"\n"]}),"\n",(0,d.jsxs)(n.p,{children:["同时，还提供一些变体，例如 ",(0,d.jsx)(n.code,{children:"npm-library-with-umd"})," 和 ",(0,d.jsx)(n.code,{children:"npm-library-es5"}),"，顾名思义，分别对应带有 umd 产物和支持到 es5 语法的库预设。\n详细配置可以查看其 ",(0,d.jsx)(n.a,{href:"/api/config/build-preset",children:"API"})," 。"]}),"\n",(0,d.jsx)(n.p,{children:"除此之外，我们也可以完全自定义构建配置:"}),"\n",(0,d.jsxs)(n.h2,{id:"构建配置",children:["构建配置",(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#构建配置",children:"#"})]}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsxs)(n.strong,{children:[(0,d.jsx)(n.code,{children:"buildConfig"})," 是一个用来描述如何编译、生成构建产物的配置项"]}),"。在最开始提到的关于“",(0,d.jsx)(n.em,{children:"构建产物的特点"}),"”，其实都是 ",(0,d.jsx)(n.code,{children:"buildConfig"})," 所支持的属性。目前所支持的属性覆盖了大部分模块类型项目在构建产物时的需求，",(0,d.jsx)(n.code,{children:"buildConfig"})," 不仅包含一些产物所具备的属性，也包含了构建产物所需要的一些特性功能。接下来从分类的角度简单罗列一下："]}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.strong,{children:"构建产物的基本属性包括："})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["产物是否被打包：对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#buildtype",children:(0,d.jsx)(n.code,{children:"buildConfig.buildType"})}),"。"]}),"\n",(0,d.jsxs)(n.li,{children:["产物对于语法的支持：对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#target",children:(0,d.jsx)(n.code,{children:"buildConfig.target"})}),"。"]}),"\n",(0,d.jsxs)(n.li,{children:["产物格式：对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#format",children:(0,d.jsx)(n.code,{children:"buildConfig.format"})}),"。"]}),"\n",(0,d.jsxs)(n.li,{children:["产物类型文件如何处理，对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#dts",children:(0,d.jsx)(n.code,{children:"buildConfig.dts"})}),"。"]}),"\n",(0,d.jsxs)(n.li,{children:["产物的 sourceMap 如何处理：对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#sourcemap",children:(0,d.jsx)(n.code,{children:"buildConfig.sourceMap"})}),"。"]}),"\n",(0,d.jsxs)(n.li,{children:["产物对应的输入（或者是源文件）：对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#input",children:(0,d.jsx)(n.code,{children:"buildConfig.input"})}),"。"]}),"\n",(0,d.jsxs)(n.li,{children:["产物输出的目录：对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#outdir",children:(0,d.jsx)(n.code,{children:"buildConfig.outDir"})}),"。"]}),"\n",(0,d.jsxs)(n.li,{children:["构建的源码目录：对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#sourcedir",children:(0,d.jsx)(n.code,{children:"buildConfig.sourceDir"})}),"。"]}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.strong,{children:"构建产物所需的常用功能包括："})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["别名：对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#alias",children:(0,d.jsx)(n.code,{children:"buildConfig.alias"})}),"。"]}),"\n",(0,d.jsxs)(n.li,{children:["静态资源处理：对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#asset",children:(0,d.jsx)(n.code,{children:"buildConfig.asset"})}),"。"]}),"\n",(0,d.jsxs)(n.li,{children:["第三方依赖处理：对应的 API 有：","\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.a,{href:"/api/config/build-config#autoexternal",children:(0,d.jsx)(n.code,{children:"buildConfig.autoExternal"})}),"。"]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.a,{href:"/api/config/build-config#externals",children:(0,d.jsx)(n.code,{children:"buildConfig.externals"})}),"。"]}),"\n"]}),"\n"]}),"\n",(0,d.jsxs)(n.li,{children:["拷贝：对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#copy",children:(0,d.jsx)(n.code,{children:"buildConfig.copy"})}),"。"]}),"\n",(0,d.jsxs)(n.li,{children:["全局变量替换：对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#define",children:(0,d.jsx)(n.code,{children:"buildConfig.define"})}),"。"]}),"\n",(0,d.jsxs)(n.li,{children:["指定 ",(0,d.jsx)(n.a,{href:"https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html",target:"_blank",rel:"noopener noreferrer",children:"JSX"})," 编译方式，对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#jsx",children:(0,d.jsx)(n.code,{children:"buildConfig.jsx"})}),"。"]}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.strong,{children:"一些高级属性或者使用频率不高的功能："})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["产物代码压缩：对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#minify",children:(0,d.jsx)(n.code,{children:"buildConfig.minify"})}),"。"]}),"\n",(0,d.jsxs)(n.li,{children:["代码分割：",(0,d.jsx)(n.a,{href:"/api/config/build-config#splitting",children:(0,d.jsx)(n.code,{children:"buildConfig.spitting"})})]}),"\n",(0,d.jsxs)(n.li,{children:["指定构建产物用于 NodeJS 环境还是浏览器环境：对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#platform",children:(0,d.jsx)(n.code,{children:"buildConfig.platform"})}),"。"]}),"\n",(0,d.jsxs)(n.li,{children:["umd 产物相关：","\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["指定 umd 产物外部导入的全局变量：对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#umdglobals",children:(0,d.jsx)(n.code,{children:"buildConfig.umdGlobals"})}),"。"]}),"\n",(0,d.jsxs)(n.li,{children:["指定 umd 产物的模块名：对应的 API 是 ",(0,d.jsx)(n.a,{href:"/api/config/build-config#umdmodulename",children:(0,d.jsx)(n.code,{children:"buildConfig.umdModuleName"})}),"。"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:"除了以上分类以外，关于这些 API 的常见问题和最佳实践可以通过下面的链接来了解："}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:(0,d.jsxs)(n.a,{href:"/guide/advance/in-depth-about-build#bundle--bundleless",children:["关于 ",(0,d.jsx)(n.code,{children:"bundle"})," 和 ",(0,d.jsx)(n.code,{children:"bundleless"})]})}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsxs)(n.a,{href:"/guide/advance/in-depth-about-build#input--sourcedir",children:["关于 ",(0,d.jsx)(n.code,{children:"input"})," 和 ",(0,d.jsx)(n.code,{children:"sourceDir"})]}),"。"]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.a,{href:"/guide/advance/in-depth-about-build#dts",children:"关于类型描述文件"}),"。"]}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.a,{href:"/guide/advance/in-depth-about-build#define",children:"如何使用 define"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.a,{href:"/guide/advance/external-dependency",children:"如何处理第三方依赖"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.a,{href:"/guide/advance/copy",children:"如何使用拷贝"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.a,{href:"/guide/advance/build-umd",children:"如何构建 umd 产物"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.a,{href:"/guide/advance/asset",children:"如何使用静态资源"})}),"\n"]}),"\n",(0,d.jsxs)(n.h2,{id:"结合配置与预设",children:["结合配置与预设",(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#结合配置与预设",children:"#"})]}),"\n",(0,d.jsxs)(n.p,{children:["了解 ",(0,d.jsx)(n.code,{children:"buildPreset"})," 和 ",(0,d.jsx)(n.code,{children:"buildConfig"})," 之后，我们可以将二者进行结合使用。"]}),"\n",(0,d.jsxs)(n.p,{children:["在实际项目中,我们可以先使用 ",(0,d.jsx)(n.code,{children:"buildPreset"})," 来快速获取一套默认构建配置。如果需要自定义,可以使用 ",(0,d.jsx)(n.code,{children:"buildConfig"})," 进行覆盖和扩展。"]}),"\n",(0,d.jsx)(n.p,{children:"扩展的逻辑如下:"}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["当 ",(0,d.jsx)(n.code,{children:"buildConfig"})," 是数组时，会在原来的预设基础上添加新的配置项。"]}),"\n"]}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\n\nexport default defineConfig({\n  plugins: [moduleTools()],\n  buildPreset: 'npm-library',\n  buildConfig: [\n    {\n      format: 'iife',\n      target: 'es2020',\n      outDir: './dist/global'\n    }\n  ]\n});\n"})}),"\n",(0,d.jsxs)(n.p,{children:["这会在原本预设的基础上，额外生成一份 IIFE 格式、支持到 ES2020 语法的产物，输出目录为项目下的 ",(0,d.jsx)(n.code,{children:"dist/global"})," 目录。"]}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["当 ",(0,d.jsx)(n.code,{children:"buildConfig"})," 是对象时,会将对象中的配置项覆盖到预设中。"]}),"\n"]}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\nexport default defineConfig({\n  plugins: [moduleTools()],\n  buildPreset: 'npm-library',\n  buildConfig: {\n    sourceMap: true,\n  }\n});\n"})}),"\n",(0,d.jsx)(n.p,{children:"这会使得每一项构建任务都会生成 sourceMap 文件。"})]})}function r(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,l.ah)(),e.components);return n?(0,d.jsx)(n,{...e,children:(0,d.jsx)(s,{...e})}):s(e)}let c=r;r.__RSPRESS_PAGE_META={},r.__RSPRESS_PAGE_META["zh%2Fguide%2Fbasic%2Fmodify-output-product.md"]={toc:[{text:"默认输出产物",id:"默认输出产物",depth:2},{text:"构建预设",id:"构建预设",depth:2},{text:"构建配置",id:"构建配置",depth:2},{text:"结合配置与预设",id:"结合配置与预设",depth:2}],title:"修改输出产物",frontmatter:{sidebar_position:3}}}}]);

package/doc_build/static/js/async/5495.50aacc7e.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["5495"],{7022:function(n,e,r){r.r(e),r.d(e,{default:function(){return s}});var i=r(8093),o=r(5878);function d(n){let e=Object.assign({h1:"h1",a:"a",p:"p",h2:"h2",code:"code",ul:"ul",li:"li",pre:"pre",blockquote:"blockquote",h3:"h3"},(0,o.ah)(),n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(e.h1,{id:"使用-copy-工具",children:["使用 Copy 工具",(0,i.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#使用-copy-工具",children:"#"})]}),"\n",(0,i.jsx)(e.p,{children:"Modern.js Module 提供了 Copy 工具用于将已经存在的单个文件或整个目录复制到产物目录中。接下来我们学习如何使用它。"}),"\n",(0,i.jsxs)(e.h2,{id:"了解-copy-api",children:["了解 Copy API",(0,i.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#了解-copy-api",children:"#"})]}),"\n",(0,i.jsxs)(e.p,{children:["我们可以通过 ",(0,i.jsx)(e.a,{href:"/api/config/build-config#copy",children:(0,i.jsx)(e.code,{children:"buildConfig.copy"})})," API 来使用 Copy 工具，它包含以下两个主要配置："]}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"/api/config/build-config#copypatterns",children:(0,i.jsx)(e.code,{children:"patterns"})})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"/api/config/build-config#copyoptions",children:(0,i.jsx)(e.code,{children:"options"})})}),"\n"]}),"\n",(0,i.jsxs)(e.h2,{id:"api-详解",children:["API 详解",(0,i.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#api-详解",children:"#"})]}),"\n",(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.code,{children:"copy.patterns"})," 用于寻找复制的文件以及配置输出的路径。"]}),"\n",(0,i.jsxs)(e.p,{children:["其中 ",(0,i.jsx)(e.code,{children:"patterns.from"})," 用于指定要复制的文件或者目录。它接收 Glob 形式字符串或具体路径。Glob 形式字符串是指 ",(0,i.jsx)(e.a,{href:"https://github.com/mrmlnc/fast-glob#pattern-syntax",target:"_blank",rel:"noopener noreferrer",children:"fast-glob pattern-syntax"}),"。因此我们可以按照如下两种方式使用它："]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",children:"export default defineConfig({\n  buildConfig: {\n    copy: {\n      patterns: [\n        { from: './index.html', to: '' },\n        { from: './*.html', to: '' },\n      ],\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.code,{children:"patterns.context"})," 一般和 ",(0,i.jsx)(e.code,{children:"patterns.from"})," 配合使用，默认情况下它的值与 ",(0,i.jsx)(e.a,{href:"/api/config/build-config#sourcedir",children:(0,i.jsx)(e.code,{children:"buildConfig.sourceDir"})})," 相同，因此我们可以按照如下方式指定 ",(0,i.jsx)(e.code,{children:"src/data.json"})," 文件为要复制的文件："]}),"\n",(0,i.jsxs)(e.blockquote,{children:["\n",(0,i.jsxs)(e.p,{children:["默认情况下，",(0,i.jsx)(e.code,{children:"buildConfig.sourceDir"})," 为 ",(0,i.jsx)(e.code,{children:"src"})]}),"\n"]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",children:"export default defineConfig({\n  buildConfig: {\n    copy: {\n      patterns: [\n        { from: './data.json' to: ''},\n      ],\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(e.p,{children:["当指定的文件不在源码目录的时候，可以修改 ",(0,i.jsx)(e.code,{children:"context"})," 配置。例如指定项目目录下的 ",(0,i.jsx)(e.code,{children:"temp/index.html"})," 为要复制的文件："]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",children:"import path from 'path';\n\nexport default defineConfig({\n  buildConfig: {\n    copy: {\n      patterns: [\n        {\n          from: './index.html',\n          context: path.join(__dirname, './temp')\n          to: '',\n        }\n      ],\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.code,{children:"patterns.to"})," 用于指定复制文件的输出路径，默认情况下它的值为 ",(0,i.jsx)(e.a,{href:"/api/config/build-config#outdir",children:(0,i.jsx)(e.code,{children:"buildConfig.outDir"})}),"对应的值。因此我们按照如下方式将 ",(0,i.jsx)(e.code,{children:"src/index.html"})," 复制到 ",(0,i.jsx)(e.code,{children:"dist"})," 目录下："]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",children:"export default defineConfig({\n  buildConfig: {\n    copy: {\n      patterns: [{ from: './index.html' }],\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(e.p,{children:["当我们配置了 ",(0,i.jsx)(e.code,{children:"patterns.to"})," 的时候："]}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsxs)(e.li,{children:["如果是相对路径，则该路径会相对于 ",(0,i.jsx)(e.code,{children:"buildConfig.outDir"})," 计算出复制文件输出的绝对路径。"]}),"\n",(0,i.jsx)(e.li,{children:"如果是绝对路径，则会直接使用该值。"}),"\n"]}),"\n",(0,i.jsxs)(e.p,{children:["最后 ",(0,i.jsx)(e.code,{children:"patterns.globOptions"})," 用于配置寻找复制文件 ",(0,i.jsx)(e.a,{href:"https://github.com/sindresorhus/globby",target:"_blank",rel:"noopener noreferrer",children:"globby"})," 对象，其配置可参考："]}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"https://github.com/sindresorhus/globby#options",target:"_blank",rel:"noopener noreferrer",children:"globby.options"})}),"\n"]}),"\n",(0,i.jsxs)(e.h2,{id:"不同场景使用示例",children:["不同场景使用示例",(0,i.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#不同场景使用示例",children:"#"})]}),"\n",(0,i.jsxs)(e.h3,{id:"将文件复制文件",children:["将文件复制文件",(0,i.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#将文件复制文件",children:"#"})]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",children:"export default defineConfig({\n  buildConfig: [\n    {\n      outDir: 'dist',\n      copy: {\n        patterns: [\n          /**\n           * copy file to file\n           */\n          {\n            from: './temp-1/a.png',\n            context: __dirname,\n            to: './temp-1/b.png',\n          },\n        ],\n      },\n    },\n  ],\n});\n"})}),"\n",(0,i.jsxs)(e.h3,{id:"将文件复制到目录",children:["将文件复制到目录",(0,i.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#将文件复制到目录",children:"#"})]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",children:"export default defineConfig({\n  buildConfig: [\n    {\n      outDir: 'dist',\n      copy: {\n        patterns: [\n          /**\n           * copy file to dir\n           */\n          {\n            from: './temp-2/a.png',\n            context: __dirname,\n            to: './temp-2',\n          },\n        ],\n      },\n    },\n  ],\n});\n"})}),"\n",(0,i.jsxs)(e.h3,{id:"从目录复制到目录",children:["从目录复制到目录",(0,i.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#从目录复制到目录",children:"#"})]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",children:"export default defineConfig({\n  buildConfig: [\n    {\n      outDir: 'dist',\n      copy: {\n        patterns: [\n          /**\n           * copy dir to dir\n           */\n          {\n            from: './temp-3/',\n            to: './temp-3',\n            context: __dirname,\n          },\n        ],\n        options: {\n          enableCopySync: true,\n        },\n      },\n    },\n  ],\n});\n"})}),"\n",(0,i.jsxs)(e.h3,{id:"从目录到文件",children:["从目录到文件",(0,i.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#从目录到文件",children:"#"})]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",children:"export default defineConfig({\n  buildConfig: [\n    {\n      outDir: 'dist',\n      copy: {\n        patterns: [\n          /**\n           * copy dir to file\n           */\n          {\n            from: './temp-4/',\n            context: __dirname,\n            to: './temp-4/_index.html',\n          },\n        ],\n        options: {\n          enableCopySync: true,\n        },\n      },\n    },\n  ],\n});\n"})}),"\n",(0,i.jsxs)(e.h3,{id:"使用-glob",children:["使用 Glob",(0,i.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#使用-glob",children:"#"})]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-ts",children:"export default defineConfig({\n  buildConfig: [\n    {\n      outDir: 'dist',\n      copy: {\n        patterns: [\n          /**\n           * copy glob to dir\n           */\n          {\n            from: './*.html',\n            to: './temp-5',\n          },\n        ],\n        options: {\n          enableCopySync: true,\n        },\n      },\n    },\n    {\n      copy: {\n        patterns: [\n          /**\n           * copy glob to file\n           */\n          {\n            from: './*.html',\n            to: './temp-6/index.html',\n          },\n        ],\n        options: {\n          enableCopySync: true,\n        },\n      },\n    },\n  ],\n});\n"})})]})}function t(){let n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,o.ah)(),n.components);return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(d,{...n})}):d(n)}let s=t;t.__RSPRESS_PAGE_META={},t.__RSPRESS_PAGE_META["zh%2Fguide%2Fadvance%2Fcopy.md"]={toc:[{text:"了解 Copy API",id:"了解-copy-api",depth:2},{text:"API 详解",id:"api-详解",depth:2},{text:"不同场景使用示例",id:"不同场景使用示例",depth:2},{text:"将文件复制文件",id:"将文件复制文件",depth:3},{text:"将文件复制到目录",id:"将文件复制到目录",depth:3},{text:"从目录复制到目录",id:"从目录复制到目录",depth:3},{text:"从目录到文件",id:"从目录到文件",depth:3},{text:"使用 Glob",id:"使用-glob",depth:3}],title:"使用 Copy 工具",frontmatter:{sidebar_position:3}}}}]);

package/doc_build/static/js/async/5555.40dabd12.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["5555"],{5320:function(e,n,o){o.r(n),o.d(n,{default:function(){return d}});var r=o(8093),s=o(5878);function i(e){let n=Object.assign({h1:"h1",a:"a",p:"p",ul:"ul",li:"li",h2:"h2",h3:"h3",pre:"pre",code:"code",div:"div",blockquote:"blockquote",strong:"strong",h4:"h4"},(0,s.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"using-storybook",children:["Using Storybook",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#using-storybook",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"https://storybook.js.org/",target:"_blank",rel:"noopener noreferrer",children:"Storybook"})," is a tool dedicated to component debugging, providing around component development."]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Develop UIs that are more durable"}),"\n",(0,r.jsx)(n.li,{children:"Test UIs with less effort and no flakes"}),"\n",(0,r.jsx)(n.li,{children:"Document UI for your team to reuse"}),"\n",(0,r.jsx)(n.li,{children:"Share how the UI actually works"}),"\n",(0,r.jsx)(n.li,{children:"Automate UI workflows"}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Before when using Storybook, there are various problems related to configurations, Babel, Webpack, less or sass.\nModern.js integrates with Storybook, which greatly simplifies configuration for us as we develop our Storybook project."}),"\n",(0,r.jsxs)(n.h2,{id:"v7-recommended",children:["V7 (Recommended)",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#v7-recommended",children:"#"})]}),"\n",(0,r.jsxs)(n.h3,{id:"enable-storybook",children:["Enable Storybook",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#enable-storybook",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"You can directly enable the Storybook feature by using the following command:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"$ npx modern new\n? Please select the operation you want: Enable features\n? Please select the feature name: Enable「Storybook」V7\n"})}),"\n",(0,r.jsx)(n.p,{children:"This command will create a template for Storybook, including:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Creating a configuration folder .storybook and a default configuration file .storybook/main.ts."}),"\n",(0,r.jsx)(n.li,{children:"Creating example story components."}),"\n",(0,r.jsx)(n.li,{children:"Updating package.json to add dependencies @storybook/addon-essentials and @modern-js/storybook, as well as creating Storybook-related scripts."}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"enable-debug-output",children:["Enable Debug output",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#enable-debug-output",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"In fact, Modern.js Module is implemented based on esbuild, while Storybook uses Webpack as the default build tool, and their configurations are not fully compatible. Therefore, we recommend building the components first, and then importing the component output in stories."}),"\n",(0,r.jsx)(n.p,{children:"The way to import component outputs is very simple. Suppose your module exports a Button component, then you can use it in stories like this:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",meta:'filename="stories/index.stories.tsx"',children:"import { Button } from '.';\n\nexport const YourStory = () => <Button />;\n\nexport default {\n  title: 'Your Stories',\n};\n"})}),"\n",(0,r.jsx)(n.p,{children:"If you want to update the components, you can start the build in watch mode before starting Storybook:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"modern build --watch\n"})}),"\n",(0,r.jsxs)(n.div,{className:"rspress-directive info",children:[(0,r.jsx)(n.div,{className:"rspress-directive-title",children:"INFO"}),(0,r.jsxs)(n.div,{className:"rspress-directive-content",children:[(0,r.jsx)(n.p,{children:"In the development process, you may encounter situations where you cannot get type definitions in real time. Because only when the code is saved, the type file under the output directory will be updated. At this time:"}),"\n",(0,r.jsxs)(n.p,{children:["For ",(0,r.jsx)(n.code,{children:"pnpm"})," projects, you can modify the ",(0,r.jsx)(n.code,{children:"package.json"})," as follows:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'{\n    "name": "foo",\n    "main": "./dist/index.js",\n    "types": "./src/index.ts",\n    "publishConfig": {\n      "types": "./dist/index.d.ts",\n    }\n}\n'})}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:["For the use of ",(0,r.jsx)(n.code,{children:"publishConfig"})," in pnpm, you can read the following ",(0,r.jsx)(n.a,{href:"https://pnpm.io/package_json#publishconfig",target:"_blank",rel:"noopener noreferrer",children:"link"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["For npm and Yarn projects, the ",(0,r.jsx)(n.code,{children:"types"})," value of ",(0,r.jsx)(n.code,{children:"package.json"})," can only be modified manually during the ",(0,r.jsx)(n.strong,{children:"development stage"})," and ",(0,r.jsx)(n.strong,{children:"release stage"}),".\n"]})]})]}),"\n",(0,r.jsxs)(n.h3,{id:"enable-rspack-build",children:["Enable Rspack build",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#enable-rspack-build",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"Rspack is known for its fast build speed. To use Rspack as a build tool in Modern.js, you only need to configure it as follows:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-diff",meta:"filename='.storybook/main.js'",children:"const config = {\n  framework: {\n    name: '@modern-js/storybook',\n    options: {\n-      bundler: 'webpack'\n+      bundler: 'rspack'\n    },\n  },\n  typescript: {\n-    reactDocgen: 'react-docgen-typescript'\n+    reactDocgen: 'react-docgen'\n  }\n};\n\nexport default config;\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that in the above configuration, the reactDocgen configuration has been changed because Rspack currently does not support @storybook/react-docgen-typescript-plugin."}),"\n",(0,r.jsxs)(n.h3,{id:"configurations",children:["Configurations",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#configurations",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:["There are some separate configurations in ",(0,r.jsx)(n.code,{children:".storybook/main.js"}),"."]}),"\n",(0,r.jsxs)(n.h4,{id:"bundler",children:["bundler",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#bundler",children:"#"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Type"}),": ",(0,r.jsx)(n.code,{children:"'webpack' | 'rspack'"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Default"}),": ",(0,r.jsx)(n.code,{children:"webpack"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Specify the underlying bundler to use either Webpack or Rspack."}),"\n",(0,r.jsx)(n.p,{children:"Example:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",meta:"filename='.storybook/main.js'",children:"const config = {\n  framework: {\n    name: '@modern-js/storybook',\n    options: {\n      bundler: 'rspack',\n    },\n  },\n};\n\nexport default config;\n"})}),"\n",(0,r.jsxs)(n.h4,{id:"builderconfig",children:["builderConfig",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#builderconfig",children:"#"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Type"}),": ",(0,r.jsx)(n.code,{children:"BuilderConfig"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Default"}),": ",(0,r.jsx)(n.code,{children:"undefined"})]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["The Storybook build capability of Modern.js is provided by ",(0,r.jsx)(n.a,{href:"https://rsbuild.dev/",target:"_blank",rel:"noopener noreferrer",children:"Rsbuild"}),", and the Rsbuild configuration can be modified through builderConfig."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",meta:"filename='.storybook/main.js'",children:"const config = {\n  framework: {\n    name: '@modern-js/storybook',\n    options: {\n      builderConfig: {\n        alias: {\n          react: require.resolve('react'),\n          'react-dom': require.resolve('react-dom'),\n        },\n      },\n    },\n  },\n};\n\nexport default config;\n"})}),"\n",(0,r.jsxs)(n.h3,{id:"command",children:["Command",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#command",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"@modern-js/storybook proxies some storybook cli commands"}),"\n",(0,r.jsxs)(n.h4,{id:"storybook-dev",children:["storybook dev",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#storybook-dev",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:["Start Storybook,",(0,r.jsx)(n.a,{href:"https://storybook.js.org/docs/react/api/cli-options#dev",target:"_blank",rel:"noopener noreferrer",children:"detail"})]}),"\n",(0,r.jsxs)(n.h4,{id:"storybook-build",children:["storybook build",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#storybook-build",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:["Build Storybook for production,",(0,r.jsx)(n.a,{href:"https://storybook.js.org/docs/react/api/cli-options#build",target:"_blank",rel:"noopener noreferrer",children:"detail"})]}),"\n",(0,r.jsxs)(n.h2,{id:"migrate-from-v6-to-v7",children:["Migrate from V6 to V7",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#migrate-from-v6-to-v7",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"Our support methods for the two versions are different, so if you are migrating from V6 to V7,\nwe hope you will also use V7 in the same way, while making the following adjustments:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Configuration file: Migrate any custom configurations (if any) in the original ",(0,r.jsx)(n.code,{children:"root/config/storybook/main.(j|t)s"})," to the new ",(0,r.jsx)(n.code,{children:"root/.storybook/main.(j|t)s"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:["Dependencies: Upgrade ",(0,r.jsx)(n.code,{children:"@storybook/addon-*"})," series dependencies (if any) to version 7 and delete ",(0,r.jsx)(n.code,{children:"@modern-js/plugin-storybook"})," dependencies."]}),"\n",(0,r.jsxs)(n.li,{children:["Commands: Delete the original ",(0,r.jsx)(n.code,{children:"edenx dev storybook"})," and ",(0,r.jsx)(n.code,{children:"edenx build --platform"})," commands.\nIf you are used to the original ",(0,r.jsx)(n.code,{children:"pnpm run dev"})," usage, you can replace it with ",(0,r.jsx)(n.code,{children:"storybook dev -p 6006"})," and ",(0,r.jsx)(n.code,{children:"storybook build"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:["modern.config.(j|t)s : Remove the registration of ",(0,r.jsx)(n.code,{children:"@modern-js/plugin-storybook"})," plugin."]}),"\n"]}),"\n",(0,r.jsxs)(n.h2,{id:"v6-legacy",children:["V6 (legacy)",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#v6-legacy",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:["Starting from ",(0,r.jsx)(n.code,{children:"2.40.0"})," version, ",(0,r.jsx)(n.code,{children:"@modern-js/plugin-storybook"})," will stop iterating. It is recommended to use the V7 version.\nIf your ",(0,r.jsx)(n.code,{children:"@modern-js/module-tools"})," version is lower than ",(0,r.jsx)(n.code,{children:"2.40.0"}),", you can use Storybook V6 in the following ways:"]}),"\n",(0,r.jsxs)(n.h3,{id:"start-storybook",children:["Start Storybook",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#start-storybook",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"You can directly use the following command to enable the Storybook feature."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:'$ npx modern new\n? Please select the operation you want Enable optional features\n? Please select the function name Enable "Storybook"\n'})}),"\n",(0,r.jsx)(n.p,{children:"This command will create commonly used templates for Storybook, including"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Create stories component examples"}),"\n",(0,r.jsxs)(n.li,{children:["Update package.json, add a dependency on @modern-js/plugin-storybook, and add related scripts such as ",(0,r.jsx)(n.code,{children:"pnpm dev storybook"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"configure-storybook",children:["Configure Storybook",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#configure-storybook",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:["The Storybook official configures the project through a folder named ",(0,r.jsx)(n.code,{children:".storybook"}),", which contains various configuration files. ",(0,r.jsxs)(n.strong,{children:["In Modern.js Module, you can add Storybook configuration files in the project's ",(0,r.jsx)(n.code,{children:"config/storybook"})," directory."]})]}),"\n",(0,r.jsx)(n.p,{children:"For how to use various Storybook configuration files, you can check the following link:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://storybook.js.org/docs/react/configure/overview",target:"_blank",rel:"noopener noreferrer",children:"Configure Storybook"})}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"However, there are some restrictions when using it in module projects"}),":"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Cannot change the location where Story files are stored, that is, the ",(0,r.jsx)(n.code,{children:"stories"})," configuration cannot be modified in the ",(0,r.jsx)(n.code,{children:"main.js"})," file."]}),"\n",(0,r.jsxs)(n.li,{children:["Cannot modify the configuration related to Webpack and Babel, that is, the ",(0,r.jsx)(n.code,{children:"webpackFinal"})," and ",(0,r.jsx)(n.code,{children:"babel"})," configurations cannot be modified in the ",(0,r.jsx)(n.code,{children:"main.js"})," file."]}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"build-storybook-output",children:["Build Storybook Output",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#build-storybook-output",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"In addition to debugging the component or ordinary modules with Storybook, you can also use the following command to execute the Storybook build task."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"modern build --platform storybook\n"})}),"\n",(0,r.jsxs)(n.p,{children:["After the build is complete, you can see the build output files in the ",(0,r.jsx)(n.code,{children:"dist/storybook-static"})," directory."]})]})}function t(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,s.ah)(),e.components);return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(i,{...e})}):i(e)}let d=t;t.__RSPRESS_PAGE_META={},t.__RSPRESS_PAGE_META["en%2Fguide%2Fbasic%2Fusing-storybook.mdx"]={toc:[{text:"V7 (Recommended)",id:"v7-recommended",depth:2},{text:"Enable Storybook",id:"enable-storybook",depth:3},{text:"Enable Debug output",id:"enable-debug-output",depth:3},{text:"Enable Rspack build",id:"enable-rspack-build",depth:3},{text:"Configurations",id:"configurations",depth:3},{text:"bundler",id:"bundler",depth:4},{text:"builderConfig",id:"builderconfig",depth:4},{text:"Command",id:"command",depth:3},{text:"storybook dev",id:"storybook-dev",depth:4},{text:"storybook build",id:"storybook-build",depth:4},{text:"Migrate from V6 to V7",id:"migrate-from-v6-to-v7",depth:2},{text:"V6 (legacy)",id:"v6-legacy",depth:2},{text:"Start Storybook",id:"start-storybook",depth:3},{text:"Configure Storybook",id:"configure-storybook",depth:3},{text:"Build Storybook Output",id:"build-storybook-output",depth:3}],title:"Using Storybook",frontmatter:{sidebar_position:5}}}}]);

package/doc_build/static/js/async/5558.073d18d0.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["5558"],{6633:function(n,e,i){i.r(e),i.d(e,{default:function(){return r}});var o=i(8093),t=i(5878);function l(n){let e=Object.assign({h1:"h1",a:"a",p:"p",ul:"ul",li:"li",code:"code",pre:"pre",h2:"h2",strong:"strong"},(0,t.ah)(),n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.h1,{id:"plugin-object",children:["Plugin Object",(0,o.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#plugin-object",children:"#"})]}),"\n",(0,o.jsx)(e.p,{children:"The Modern.js Module plugin is an object, and the object contains the following properties."}),"\n",(0,o.jsxs)(e.ul,{children:["\n",(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:"name"}),": The name of the plugin, a unique identifier."]}),"\n",(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:"setup"}),": plugin initialization function, which will be executed only once. setup function can return a Hooks object, and Modern.js Module will execute the function corresponding to the Hook defined on the Hooks object at a specific time."]}),"\n"]}),"\n",(0,o.jsxs)(e.p,{children:["For example, in the following plugin code example, the ",(0,o.jsx)(e.code,{children:"beforeBuild"})," function is triggered before the project starts the build task and the ",(0,o.jsx)(e.code,{children:"build start"})," log is printed."]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-ts",meta:'title=". /plugins/demo.tsx"',children:"import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';\n\nconst myPlugin: CliPlugin<ModuleTools> = {\n  name: 'my-plugin',\n\n  setup() {\n    return {\n      // this is hook\n      beforeBuild: () => {\n        console.info('build start');\n      },\n    };\n  },\n};\n"})}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"import { myPlugin } from '. /plugins/demo';\nexport default {\n  plugins: [myPlugin()],\n};\n"})}),"\n",(0,o.jsxs)(e.h2,{id:"plugin-type-definitions",children:["Plugin type definitions",(0,o.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#plugin-type-definitions",children:"#"})]}),"\n",(0,o.jsxs)(e.p,{children:["When using TypeScript, you can introduce the built-in ",(0,o.jsx)(e.code,{children:"CliPlugin"})," and ",(0,o.jsx)(e.code,{children:"ModuleTools"})," types to provide the correct type derivation for plugins: ``"]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-ts",children:"import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';\n\nconst myPlugin: CliPlugin<ModuleTools> = {\n  name: 'my-plugin',\n\n  setup() {\n    const foo = '1';\n\n    return {\n      // this is hook\n      afterBuild: () => {\n        //...\n      },\n    };\n  },\n};\n"})}),"\n",(0,o.jsxs)(e.h2,{id:"plugin-configuration-options",children:["Plugin configuration options",(0,o.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#plugin-configuration-options",children:"#"})]}),"\n",(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.strong,{children:"It is recommended to write the plugin as a function"}),", so that the plugin can receive configuration options via function entry."]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-ts",children:"import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';\n\ntype MyPluginOptions = {\n  foo: string;\n};\n\nconst myPlugin = (options: MyPluginOptions): CliPlugin<ModuleTools> => ({\n  name: 'my-plugin',\n\n  setup() {\n    console.log(options.foo);\n  },\n});\n"})})]})}function s(){let n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,t.ah)(),n.components);return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(l,{...n})}):l(n)}let r=s;s.__RSPRESS_PAGE_META={},s.__RSPRESS_PAGE_META["en%2Fplugins%2Fguide%2Fplugin-object.mdx"]={toc:[{text:"Plugin type definitions",id:"plugin-type-definitions",depth:2},{text:"Plugin configuration options",id:"plugin-configuration-options",depth:2}],title:"Plugin Object",frontmatter:{sidebar_position:2}}}}]);

package/doc_build/static/js/async/5844.b3a9d57a.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["5844"],{9096:function(e,t,n){n.r(t),n.d(t,{default:function(){return s}});var i=n(8093),o=n(5878);function d(e){let t=Object.assign({h1:"h1",a:"a"},(0,o.ah)(),e.components);return(0,i.jsxs)(t.h1,{id:"index",children:["index",(0,i.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#index",children:"#"})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,o.ah)(),e.components);return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}let s=l;l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["zh%2Findex.md"]={toc:[],title:"index",frontmatter:{pageType:"home",hero:{name:"Modern.js Module",text:"模块工程解决方案",tagline:"简单、强大、高性能的现代化 npm 包开发方案",actions:[{theme:"brand",text:"欢迎使用",link:"/guide/intro/welcome"},{theme:"alt",text:"快速上手",link:"/guide/intro/getting-started"}]},features:[{title:"esbuild: 高性能的 JS Bundler",details:"基于 esbuild 构建，构建速度极快，带给你极致的开发体验。",icon:"\uD83D\uDE80"},{title:"双构建模式",details:"支持 Bundle 和 Bundleless 两种构建模式。",icon:"✨"},{title:"开箱即用",details:"无需过多配置即可开发你的 npm 包，内置预设覆盖多种场景。",icon:"\uD83D\uDEE0️"},{title:"扩展性强: 提供强大的插件机制",details:"通过其插件扩展机制，你可以轻松的扩展 Modern.js Module 的各项能力。",icon:"\uD83C\uDFA8"},{title:"Storybook: 社区流行的 UI 开发工具",details:"集成了 Storybook，你可以使用它调试 UI。",icon:"\uD83D\uDCE6"},{title:"Lint: 代码格式化",details:"丰富场景的内置 ESLint 规则。",icon:"\uD83D\uDCD0"}]}}}}]);

package/doc_build/static/js/async/588.6de9811a.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["588"],{5517:function(e,n,r){r.r(n),r.d(n,{default:function(){return a}});var t=r(8093),i=r(5878);function o(e){let n=Object.assign({h1:"h1",a:"a"},(0,i.ah)(),e.components);return(0,t.jsxs)(n.h1,{id:"overview",children:["Overview",(0,t.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#overview",children:"#"})]})}function s(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,i.ah)(),e.components);return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(o,{...e})}):o(e)}let a=s;s.__RSPRESS_PAGE_META={},s.__RSPRESS_PAGE_META["en%2Fapi%2Findex.md"]={toc:[],title:"Overview",frontmatter:{overview:!0,sidebar_label:"Overview",sidebar_position:1}}}}]);

package/doc_build/static/js/async/5889.41a786b6.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["5889"],{8010:function(e,n,s){s.r(n),s.d(n,{default:function(){return d}});var r=s(8093),a=s(5878);function i(e){let n=Object.assign({h1:"h1",a:"a",p:"p",ul:"ul",li:"li",h2:"h2",strong:"strong",code:"code",pre:"pre",blockquote:"blockquote"},(0,a.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"versioning-and-publishing",children:["Versioning and Publishing",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#versioning-and-publishing",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"An npm-type module project release process consists of two phases."}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"The first phase is during development, where the developer needs to provide a change file to record changes that need to be released."}),"\n",(0,r.jsxs)(n.li,{children:["The second phase is during release, collect all the change files to update the version, update the release log, and release new packages to the ",(0,r.jsx)(n.a,{href:"https://www.npmjs.com/",target:"_blank",rel:"noopener noreferrer",children:"npm Registry"}),"."]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Modern.js Module provides a set of version management and release solutions, which are suitable for single-package scenarios. For npm packages in monorepo, you need to follow the strategies provided by various monorepo solutions."}),"\n",(0,r.jsxs)(n.h2,{id:"tracking-changes",children:["Tracking changes",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#tracking-changes",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Changes need to be logged when they happen to the project"}),". Changes that occur in a project are typically."]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"New features"}),"\n",(0,r.jsx)(n.li,{children:"Fixes to issues"}),"\n",(0,r.jsx)(n.li,{children:"Configuration file changes"}),"\n",(0,r.jsx)(n.li,{children:"..."}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Once these changes have been made, the current changes need to be documented with the following command."}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"/guide/basic/command-preview#modern-change",children:(0,r.jsx)(n.code,{children:"modern change"})})}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Executing the ",(0,r.jsx)(n.code,{children:"modern change"})," command asks the developer several questions and generates a change log based on the developer's answers. The changelog file contains the type of change and its description, and is committed to the git repository."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"$ npx modern change\n\uD83E\uDD8B What kind of change is this for module-example? (current version is 0.1.0) - patch\n\uD83E\uDD8B Please enter a summary for this change (this will be in the changelogs). Submit empty line to open external editor\n\uD83E\uDD8B Summary - publish test\n\uD83E\uDD8B === Releasing the following packages ===\n\uD83E\uDD8B [Patch]\n\uD83E\uDD8B module\n\uD83E\uDD8B Is this your desired changeset? (Y/n) - true\n\uD83E\uDD8B Changeset added! - you can now commit it\n\uD83E\uDD8B\n\uD83E\uDD8B If you want to modify or expand on the changeset summary, you can find it here\n\uD83E\uDD8B info /xxxxxx/module/.changeset/brave-dryers-agree.md\n"})}),"\n",(0,r.jsxs)(n.p,{children:["When executed successfully, the resulting Markdown file containing the change log is saved in the project's ",(0,r.jsx)(n.code,{children:".changeset"})," directory. The contents will look like the following."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-markdown",meta:'title=".changeset/brave-dryers-agree.md"',children:"---\n\"``module-example'': patch\n---\n\npublish test\n"})}),"\n",(0,r.jsxs)(n.h2,{id:"version-update",children:["Version update",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#version-update",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"When the project version needs to be updated, execute the following command."}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"/guide/basic/command-preview#modern-bump",children:(0,r.jsx)(n.code,{children:"modern bump"})})}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Executing ",(0,r.jsx)(n.code,{children:"modern bump"})," will modify the version number in ",(0,r.jsx)(n.code,{children:"package.json"})," based on the contents of the Markdown file in the ",(0,r.jsx)(n.code,{children:".changeset/"})," directory where the changes were recorded, and generate the ",(0,r.jsx)(n.code,{children:"CHANGELOG.md"})," file. ",(0,r.jsx)(n.strong,{children:'These Markdown files are also deleted when the version update is complete, so they are "consumed "'}),"."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-markdown",meta:'title="CHANGELOG.md"',children:"# module\n\n## 0.1.1\n\n### Patch Changes\n\n- publish test\n"})}),"\n",(0,r.jsxs)(n.h2,{id:"publish",children:["Publish",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#publish",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"To publish a project, you can execute the following command."}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"/guide/basic/command-preview#modern-release",children:(0,r.jsx)(n.code,{children:"modern publish"})})}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"modern release"})," command publishes the project to the npm Registry."]}),"\n",(0,r.jsxs)(n.p,{children:["The release is the ",(0,r.jsx)(n.code,{children:"latest"})," version, which is also the official version. If you want to change the ",(0,r.jsx)(n.code,{children:"dist-tag"}),", you can specify it with the ",(0,r.jsx)(n.code,{children:"modern release --tag"})," command. For example."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"modern release --tag beta\n"})}),"\n",(0,r.jsxs)(n.p,{children:["However, if you want to change the version number of the current project to a pre-release as well, you need to use the ",(0,r.jsx)(n.code,{children:"modern pre"})," command."]}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"dist-tag"})," can be understood as: tagging the current release. Generally speaking, the ",(0,r.jsx)(n.code,{children:"dist-tag"})," for the default release is ",(0,r.jsx)(n.code,{children:"latest"}),", so you can consider ",(0,r.jsx)(n.code,{children:"latest"})," as the ",(0,r.jsx)(n.code,{children:"dist-tag"})," for the official release."]}),"\n"]}),"\n",(0,r.jsxs)(n.h2,{id:"pre-releases",children:["Pre-releases",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#pre-releases",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"When a pre-release is needed before the official release, the following command is executed."}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"/guide/basic/command-preview#modern-pre",children:(0,r.jsx)(n.code,{children:"modern pre"})})}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["First ",(0,r.jsx)(n.code,{children:"modern pre enter <tag>"})," to enter pre-release mode, ",(0,r.jsx)(n.code,{children:"<tag>"})," can be the same as the ",(0,r.jsx)(n.code,{children:"tag"})," specified with the ",(0,r.jsx)(n.code,{children:"modern release --tag"})," command when releasing the project."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"$ npx modern pre enter next\n\uD83E\uDD8B success Entered pre mode with tag next\n\uD83E\uDD8B info Run `changeset version` to version packages with prerelease versions\n✨ Done in 5.30s.\nDone in 5.30s.\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Then you can update the specific version number with the ",(0,r.jsx)(n.code,{children:"modern bump"})," command, ",(0,r.jsx)(n.strong,{children:'which doesn\'t actually "consume" the Markdown file that records the changes'}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"$ npx modern bump\n\uD83E\uDD8B warn ===============================IMPORTANT!===============================\n\uD83E\uDD8B warn You are in prerelease mode\n\uD83E\uDD8B warn If you meant to do a normal release you should revert these changes and run `changeset pre exit`\n\uD83E\uDD8B warn You can then run `changeset version` again to do a normal release\n\uD83E\uDD8B warn ----------------------------------------------------------------------\n\uD83E\uDD8B All files have been updated. review them and commit at your leisure\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Then you can see that the updated version number in ",(0,r.jsx)(n.code,{children:"package.json"})," will look like this: ",(0,r.jsx)(n.code,{children:"0.1.2-next.0"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["Finally, ",(0,r.jsxs)(n.strong,{children:["if you don't need to do a pre-release anymore, be sure to run the ",(0,r.jsx)(n.code,{children:"modern pre exit"})," command"]})," to exit the pre-release state and to release the official version when you run the ",(0,r.jsx)(n.code,{children:"modern bump"})," command again."]})]})}function o(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,a.ah)(),e.components);return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(i,{...e})}):i(e)}let d=o;o.__RSPRESS_PAGE_META={},o.__RSPRESS_PAGE_META["en%2Fguide%2Fbasic%2Fpublish-your-project.mdx"]={toc:[{text:"Tracking changes",id:"tracking-changes",depth:2},{text:"Version update",id:"version-update",depth:2},{text:"Publish",id:"publish",depth:2},{text:"Pre-releases",id:"pre-releases",depth:2}],title:"Versioning and Publishing",frontmatter:{sidebar_position:7}}}}]);

package/doc_build/static/js/async/5892.b0db6657.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["5892"],{3605:function(e,o,r){r.r(o),r.d(o,{default:function(){return d}});var n=r(8093),s=r(5878);function t(e){let o=Object.assign({h1:"h1",a:"a",h2:"h2",p:"p",code:"code",ul:"ul",li:"li",pre:"pre",ol:"ol",img:"img"},(0,s.ah)(),e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(o.h1,{id:"storybook-faq",children:["Storybook FAQ",(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#storybook-faq",children:"#"})]}),"\n",(0,n.jsxs)(o.h2,{id:"storybook-v7-support",children:["Storybook v7 Support",(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#storybook-v7-support",children:"#"})]}),"\n",(0,n.jsx)(o.p,{children:"Storybook v7 is now fully supported and has become our recommended version."}),"\n",(0,n.jsxs)(o.h2,{id:"using-storybook-addon-or-other-configurations-does-not-work",children:["Using Storybook Addon or other configurations does not work",(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#using-storybook-addon-or-other-configurations-does-not-work",children:"#"})]}),"\n",(0,n.jsx)(o.p,{children:"Modern.js Module is currently using Storybook version v6, if you are using Addon version v7 you may not be able to get the addon to work."}),"\n",(0,n.jsxs)(o.p,{children:["In addition to the Addon, other configurations may also have differences. For example, if you modify the ",(0,n.jsx)(o.code,{children:"preview.js"})," configuration file, Storybook v6 is written differently than v7:"]}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsxs)(o.li,{children:["v6：",(0,n.jsx)(o.a,{href:"https://storybook.js.org/docs/6.5/react/writing-stories/decorators#global-decorators",target:"_blank",rel:"noopener noreferrer",children:"Document"})]}),"\n",(0,n.jsxs)(o.li,{children:["v7：",(0,n.jsx)(o.a,{href:"https://storybook.js.org/docs/react/writing-stories/decorators#global-decorators",target:"_blank",rel:"noopener noreferrer",children:"Document"})]}),"\n"]}),"\n",(0,n.jsxs)(o.h2,{id:"cannot-find-module-react-dompackagejson",children:["Cannot find module 'react-dom/package.json'",(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#cannot-find-module-react-dompackagejson",children:"#"})]}),"\n",(0,n.jsx)(o.p,{children:"When debug Storybook, the following problem occurs:"}),"\n",(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-bash",children:"ERR! Error: Cannot find module 'react-dom/package.json'\n"})}),"\n",(0,n.jsx)(o.p,{children:"You can install the react-dom dependency in the project."}),"\n",(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-json",children:'{\n    "devDependencies": {\n        "react-dom": "^17"\n    }\n}\n'})}),"\n",(0,n.jsxs)(o.h2,{id:"unable-to-locate-the-specific-error-message",children:["Unable to locate the specific error message",(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#unable-to-locate-the-specific-error-message",children:"#"})]}),"\n",(0,n.jsx)(o.p,{children:"Solutions:"}),"\n",(0,n.jsxs)(o.ol,{children:["\n",(0,n.jsxs)(o.li,{children:["Find ",(0,n.jsx)(o.code,{children:"@storybook/core-server/dist/cjs/dev-server.js"})]}),"\n",(0,n.jsxs)(o.li,{children:["Find this code: ",(0,n.jsx)(o.code,{children:"var _await$Promise$all = await Promise.all([preview, manager,"}),"."]}),"\n",(0,n.jsx)(o.li,{children:"Modify it："}),"\n"]}),"\n",(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-js",children:"var _await$Promise$all = await Promise.all([\n    preview.catch(e => console.info(e)),\n    manager // TODO #13083 Restore this when compiling the preview is fast enough\n  // .then((result) => {\n  //   if (!options.ci && !options.smokeTest) openInBrowser(address);\n  //   return result;\n  // })\n  .catch(previewBuilder.bail)]),\n      _await$Promise$all2 = _slicedToArray(_await$Promise$all, 2),\n      previewResult = _await$Promise$all2[0],\n      managerResult = _await$Promise$all2[1]; // TODO #13083 Remove this when compiling the preview is fast enough\n"})}),"\n",(0,n.jsxs)(o.h2,{id:"cant-find-any-stories-is-your-storybook",children:["Can`t find any stories is your Storybook",(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#cant-find-any-stories-is-your-storybook",children:"#"})]}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://lf3-static.bytednsdoc.com/obj/eden-cn/shylnyhaeh7uldvivhn/01719a11-1939-4009-9317-5e2b491ae52f.png",alt:"storybook-error"})}),"\n",(0,n.jsx)(o.p,{children:"When you get a problem like this, you can first open the browser console and there should be some error messages. You can use the error messages to deduce if there is a problem in the code you are writing that is causing Storybook to not work properly."}),"\n",(0,n.jsxs)(o.h2,{id:"storybook-adds-proxy-functionality",children:["Storybook Adds Proxy Functionality",(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#storybook-adds-proxy-functionality",children:"#"})]}),"\n",(0,n.jsx)(o.p,{children:"Storybook does not provide a solution for this, but there is one in the Storybook Issue. In the Modern.js Module, you can:"}),"\n",(0,n.jsxs)(o.ol,{children:["\n",(0,n.jsxs)(o.li,{children:["Add the ",(0,n.jsx)(o.code,{children:".storybook/middleware.js"})," file and initialize the following:"]}),"\n"]}),"\n",(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-js",children:"/* eslint-disable filenames/match-exported */\nmodule.exports = function expressMiddleware(router) {\n    // router is express router\n    // import { Router } from 'express'\n    // router = new Router();\n};\n"})}),"\n",(0,n.jsxs)(o.ol,{start:"2",children:["\n",(0,n.jsxs)(o.li,{children:["add ",(0,n.jsx)(o.code,{children:"http-proxy-middleware"})," dependency"]}),"\n",(0,n.jsx)(o.li,{children:"Add proxy routing-related configuration"}),"\n"]}),"\n",(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-js",children:'/* eslint-disable filenames/match-exported */\nconst { createProxyMiddleware } = require("http-proxy-middleware");\n\nmodule.exports = function expressMiddleware (router) {\n  router.use(\'/api\', createProxyMiddleware({\n    target: "http://localhost:8000",\n    changeOrigin: true\n  }))\n}\n'})}),"\n",(0,n.jsxs)(o.p,{children:["Link：",(0,n.jsx)(o.a,{href:"https://github.com/storybookjs/storybook/issues/11551",target:"_blank",rel:"noopener noreferrer",children:"https://github.com/storybookjs/storybook/issues/11551"})]}),"\n",(0,n.jsxs)(o.h2,{id:"tailwind-css-doesnt-work-in-storybook",children:["Tailwind CSS doesn't work in Storybook",(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#tailwind-css-doesnt-work-in-storybook",children:"#"})]}),"\n",(0,n.jsxs)(o.p,{children:["The Storybook build capability of the Modern.js Module is provided by ",(0,n.jsx)(o.a,{href:"https://rsbuild.dev/",target:"_blank",rel:"noopener noreferrer",children:"Rsbuild"}),". Since the underlying implementation of Rsbuild is not integrated with Modern.js Module, the Modern.js Module plugins do not work in Storybook (Rsbuild)."]}),"\n",(0,n.jsx)(o.p,{children:"Solution: Register the tailwindcss PostCSS plugin in storybook."}),"\n",(0,n.jsxs)(o.p,{children:["Reference link: ",(0,n.jsx)(o.a,{href:"https://rsbuild.dev/guide/basic/tailwindcss#configuring-postcss",target:"_blank",rel:"noopener noreferrer",children:"Rsbuild - tailwindcss"}),"."]})]})}function i(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:o}=Object.assign({},(0,s.ah)(),e.components);return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(t,{...e})}):t(e)}let d=i;i.__RSPRESS_PAGE_META={},i.__RSPRESS_PAGE_META["en%2Fguide%2Ffaq%2Fstorybook.mdx"]={toc:[{text:"Storybook v7 Support",id:"storybook-v7-support",depth:2},{text:"Using Storybook Addon or other configurations does not work",id:"using-storybook-addon-or-other-configurations-does-not-work",depth:2},{text:"Cannot find module 'react-dom/package.json'",id:"cannot-find-module-react-dompackagejson",depth:2},{text:"Unable to locate the specific error message",id:"unable-to-locate-the-specific-error-message",depth:2},{text:"Can`t find any stories is your Storybook",id:"cant-find-any-stories-is-your-storybook",depth:2},{text:"Storybook Adds Proxy Functionality",id:"storybook-adds-proxy-functionality",depth:2},{text:"Tailwind CSS doesn't work in Storybook",id:"tailwind-css-doesnt-work-in-storybook",depth:2}],title:"Storybook FAQ",frontmatter:{}}}}]);

package/doc_build/static/js/async/5995.209e2925.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["5995"],{6792:function(e,n,r){r.r(n),r.d(n,{default:function(){return o}});var i=r(8093),s=r(5878);function t(e){let n=Object.assign({h1:"h1",a:"a",h2:"h2",p:"p",strong:"strong",code:"code",em:"em",pre:"pre",ul:"ul",li:"li",blockquote:"blockquote",div:"div",h3:"h3",h4:"h4"},(0,s.ah)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.h1,{id:"before-you-start",children:["Before you start",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#before-you-start",children:"#"})]}),"\n",(0,i.jsxs)(n.h2,{id:"environment-preparation",children:["Environment preparation",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#environment-preparation",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["In order to use the Modern.js Module, you first need ",(0,i.jsx)(n.a,{href:"https://nodejs.org/zh/",target:"_blank",rel:"noopener noreferrer",children:"NodeJS"})," engine, we recommend the latest ",(0,i.jsx)(n.a,{href:"https://github.com/nodejs/Release",target:"_blank",rel:"noopener noreferrer",children:"LTS version"}),", and make sure the Node version is ",(0,i.jsx)(n.strong,{children:">=16.0.0"}),". because non-stable NodeJS releases frequently have bugs. You might consider installing via ",(0,i.jsx)(n.a,{href:"https://github.com/coreybutler/nvm-windows",target:"_blank",rel:"noopener noreferrer",children:"nvm-windows"})," and ",(0,i.jsx)(n.a,{href:"https://github.com/nvm-sh/nvm",target:"_blank",rel:"noopener noreferrer",children:"nvm"})," (Mac / Linux), so you can easily switch to different NodeJS versions that might be required for different projects that you work on."]}),"\n",(0,i.jsxs)(n.h2,{id:"getting-started-with-npm",children:["Getting Started with npm",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#getting-started-with-npm",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["Once NodeJS is installed, not only can you access the ",(0,i.jsx)(n.code,{children:"node"})," executable from the command line, but you can also execute the ",(0,i.jsx)(n.code,{children:"npm"})," command."]}),"\n",(0,i.jsx)(n.p,{children:"Npm is the standard package manager for NodeJS. It started out as a tool for downloading and managing NodeJS package dependencies, but it has since evolved into a tool for front-end JavaScript."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsxs)(n.strong,{children:["If you already know something about usage of npm and npm packages, then you can directly see ",(0,i.jsx)(n.a,{href:"/en/guide/basic/before-getting-started#npm-package-manager",children:"npm package manager"})," section."]})}),"\n",(0,i.jsxs)(n.h2,{id:"npm-package-type-project",children:["npm package type project",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#npm-package-type-project",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["So what is an npm package type project? When we execute the ",(0,i.jsx)(n.code,{children:"npm init"})," command in an empty project directory, it creates a JSON file with the file name ",(0,i.jsx)(n.code,{children:"package.json"})," under the current directory. During the creation process, we will need to fill in information including but not limited to the ",(0,i.jsx)(n.em,{children:"name"}),", ",(0,i.jsx)(n.em,{children:"version"})," ",(0,i.jsx)(n.em,{children:"number"}),", ",(0,i.jsx)(n.em,{children:"description"}),", etc. of the npm package, which will be found in the resulting ",(0,i.jsx)(n.code,{children:"package.json"})," file as follows"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-json",children:'{\n  "name": "npm-demo",\n  "version": "1.0.0",\n  "description": "",\n  "main": "index.js",\n  "scripts": {\n    "test": "echo \\"Error: no test specified\\" && exit 1"\n  },\n  "author": "",\n  "license": "ISC"\n}\n'})}),"\n",(0,i.jsxs)(n.p,{children:["At this point the project containing the initialized ",(0,i.jsx)(n.code,{children:"package.json"})," file is an npm package type project, and you can execute the ",(0,i.jsx)(n.code,{children:"npm publish"})," command to publish the project to the ",(0,i.jsx)(n.a,{href:"https://www.npmjs.com/",target:"_blank",rel:"noopener noreferrer",children:"npm Registry"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["The npm Registry is a ",(0,i.jsx)(n.a,{href:"https://docs.npmjs.com/about-the-public-npm-registry",target:"_blank",rel:"noopener noreferrer",children:"npm package store"})," where developers can not only publish their own npm packages to the npm Registry, but also use npm packages published by other developers through the npm Registry."]}),"\n",(0,i.jsx)(n.p,{children:"A quality npm package will be used by more people because it not only saves a lot of code implementation work, but is also less likely to cause problems with the project."}),"\n",(0,i.jsxs)(n.h2,{id:"using-third-party-npm-packages",children:["Using third-party npm packages",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#using-third-party-npm-packages",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:['When adding a third-party npm package to an initial project, we can call this process "installing dependencies for the project" or "adding dependencies to the project". Before adding dependencies, we need to know one thing in particular -- ',(0,i.jsx)(n.strong,{children:"the types of packages npm depends on"}),"."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:'"dependencies"'}),": a type of package that your application will need in a production environment."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:'"devDependencies"'}),": another type of package that is only needed for local development and testing.","\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"packages can be understood as third-party npm packages."}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["You can install the packages you need in a ",(0,i.jsx)(n.strong,{children:"production environment"})," by running ",(0,i.jsx)(n.code,{children:"npm install npm-package-name"})," or ",(0,i.jsx)(n.code,{children:"npm add npm-package-name"}),", or you can manually write the packages you need to install and the corresponding ",(0,i.jsx)(n.a,{href:"https://docs.npmjs.com/about-semantic-versioning",target:"_blank",rel:"noopener noreferrer",children:"semantic version"})," in ",(0,i.jsx)(n.code,{children:'"dependencies"'})," in the ",(0,i.jsx)(n.code,{children:"package.json"})," file, and run the ",(0,i.jsx)(n.code,{children:"npm install"})," command to."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-json",children:'{\n  "name": "your-npm-project",\n  "dependencies": {\n    "npm-package-name": "0.1.0"\n  }\n}\n'})}),"\n",(0,i.jsxs)(n.p,{children:["Similarly, you can install ",(0,i.jsx)(n.strong,{children:"only packages needed for local development and testing"})," by running ",(0,i.jsx)(n.code,{children:"npm install npm-package-name --save-dev"})," or ",(0,i.jsx)(n.code,{children:"npm add npm-package-name --save-dev"}),", or you can manually write the packages to be installed and the corresponding ",(0,i.jsx)(n.a,{href:"https://docs.npmjs.com/about-semantic-versioning",target:"_blank",rel:"noopener noreferrer",children:"semantic version"})," in ",(0,i.jsx)(n.code,{children:'"devDependencies"'})," in the ",(0,i.jsx)(n.code,{children:"package.json"})," file, and run the ",(0,i.jsx)(n.code,{children:"npm install"})," command as follows"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-json",children:'{\n  "name": "your-npm-project",\n  "devDependencies": {\n    "npm-package-name": "0.1.0"\n  }\n}\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsxs)(n.strong,{children:["When installing or using third-party npm packages be sure to determine what they are for and whether they should be placed in ",(0,i.jsx)(n.code,{children:'"dependencies"'})," or ",(0,i.jsx)(n.code,{children:'"devDependencies"'})," by distinguishing between their types."]})}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive tip",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"TIP"}),(0,i.jsx)(n.div,{className:"rspress-directive-content",children:(0,i.jsxs)(n.p,{children:["In general, packages that need to be used in source code are ",(0,i.jsx)(n.code,{children:"dependencies"})," dependencies. Unless you are exporting dependent code locally via packaging, in which case it can be treated as a ",(0,i.jsx)(n.code,{children:"devDependencies"})," dependency.\n"]})})]}),"\n",(0,i.jsxs)(n.h2,{id:"other-npm-bits-and-pieces-to-know",children:["Other npm bits and pieces to know",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#other-npm-bits-and-pieces-to-know",children:"#"})]}),"\n",(0,i.jsxs)(n.h3,{id:"program-entry-for-npm-packages",children:["Program entry for npm packages",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#program-entry-for-npm-packages",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["There is a ",(0,i.jsx)(n.code,{children:'"main"'})," attribute in ",(0,i.jsx)(n.code,{children:"package.json"})," that corresponds to a module ID or, more intuitively, a NodeJS file path, which is the main entry point for your application."]}),"\n",(0,i.jsxs)(n.p,{children:["For example, if your package is named ",(0,i.jsx)(n.code,{children:"foo"})," and the user installs it, and then executes the ",(0,i.jsx)(n.code,{children:'require("foo")'})," code, then the file corresponding to the ",(0,i.jsx)(n.code,{children:'"main"'})," field of the npm package ",(0,i.jsx)(n.code,{children:"foo"})," will be exported."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsxs)(n.strong,{children:["It is recommended to set the ",(0,i.jsx)(n.code,{children:'"main"'})," field in your npm package"]}),". If ",(0,i.jsx)(n.code,{children:'"main"'})," is not set, the default entry will be the ",(0,i.jsx)(n.code,{children:"index.js"})," file in the root of the package."]}),"\n",(0,i.jsxs)(n.p,{children:["In addition to the ",(0,i.jsx)(n.code,{children:'"main"'})," attribute, the ",(0,i.jsx)(n.code,{children:'"module"'})," attribute is usually set. It is similar to the ",(0,i.jsx)(n.code,{children:'"main"'})," attribute in that it is mainly used in webpack scenarios. webpack reads the npm package entry (file) in most cases in the order ",(0,i.jsx)(n.strong,{children:'"module" -> "main "'}),"."]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["To learn more about how webpack does this, check out this ",(0,i.jsx)(n.a,{href:"https://webpack.js.org/configuration/resolve/#resolvemainfields",target:"_blank",rel:"noopener noreferrer",children:"link"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(n.h3,{id:"scripts",children:[(0,i.jsx)(n.code,{children:"scripts"}),(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#scripts",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:'"scripts"'})," attribute of the ",(0,i.jsx)(n.code,{children:"package.json"})," file supports a number of built-in scripts and npm-preset lifecycle events, as well as arbitrary scripts."]}),"\n",(0,i.jsxs)(n.p,{children:["These can be executed by running ",(0,i.jsx)(n.code,{children:"npm run-script <stage>"})," or simply ",(0,i.jsx)(n.code,{children:"npm run <stage>"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["Name matching ",(0,i.jsx)(n.a,{href:"https://docs.npmjs.com/cli/v9/using-npm/scripts#pre--post-scripts",target:"_blank",rel:"noopener noreferrer",children:"pre and post commands"})," will also be run (e.g. ",(0,i.jsx)(n.code,{children:"premyscript"}),", ",(0,i.jsx)(n.code,{children:"myscript"}),", ",(0,i.jsx)(n.code,{children:"postmyscript"})," )."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-json",children:'{\n  "scripts": {\n    "premyscript": "",\n    "myscript": "",\n    "postmyscript": ""\n  }\n}\n'})}),"\n",(0,i.jsxs)(n.p,{children:["When ",(0,i.jsx)(n.code,{children:"npm run myscripts"})," is executed, the script corresponding to ",(0,i.jsx)(n.code,{children:"premyscripts"})," will be executed before it, and the script corresponding to ",(0,i.jsx)(n.code,{children:"postmyscripts"})," will be executed after it."]}),"\n",(0,i.jsxs)(n.p,{children:["Script commands from dependencies can be run with ",(0,i.jsx)(n.code,{children:"npm explore <pkg> -- npm run <stage>"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"There are also special lifecycle scripts that occur only under certain circumstances. Here are a few that are usually necessary to know."}),"\n",(0,i.jsxs)(n.h4,{id:"npm-install",children:[(0,i.jsx)(n.code,{children:"npm install"}),(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#npm-install",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["When you run ",(0,i.jsx)(n.code,{children:"npm install -g <pkg-name>"}),", the following scripts will run."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"preinstall"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"install"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"postinstall"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"prepublish"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"preprepare"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"prepare"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"postprepare"})}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["If your package root has a ",(0,i.jsx)(n.code,{children:"binding.gyp"})," file and you don't define an ",(0,i.jsx)(n.code,{children:"install"})," or ",(0,i.jsx)(n.code,{children:"preinstall"})," script, then npm will build with ",(0,i.jsx)(n.code,{children:"node-gyp rebuild"})," as the default install command, using ",(0,i.jsx)(n.a,{href:"https://github.com/nodejs/node-gyp",target:"_blank",rel:"noopener noreferrer",children:"node-gyp"}),"."]}),"\n",(0,i.jsxs)(n.h4,{id:"npm-publish",children:[(0,i.jsx)(n.code,{children:"npm publish"}),(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#npm-publish",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"When publishing a project, executing this command will trigger the following script."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"prepublishOnly"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"prepack"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"prepare"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"postpack"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"publish"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"postpublish"})}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["When running in ",(0,i.jsx)(n.a,{href:"https://docs.npmjs.com/cli/v7/commands/npm-publish#dry-run",target:"_blank",rel:"noopener noreferrer",children:(0,i.jsx)(n.code,{children:"-dry-run"})})," mode, the script corresponding to ",(0,i.jsx)(n.code,{children:"prepare"})," will not be executed."]}),"\n",(0,i.jsxs)(n.h3,{id:"peerdependencies",children:["peerDependencies",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#peerdependencies",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"In some cases, your npm project has a compatibility relationship with its host tool or library (e.g. a webpack plugin project and webpack), and your npm project does not want to use the host as a necessary dependency, which usually means that your project is probably a plugin for that host tool or library. Your npm project will have certain requirements for the version of the host package, as only the APIs required by the npm project will be exposed under a specific version."}),"\n",(0,i.jsxs)(n.p,{children:["For more explanation of ",(0,i.jsx)(n.code,{children:"peerDependencies"}),", you can learn about the different ways npm, pnpm, and Yarn handle it at the following links."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://docs.npmjs.com/cli/v9/configuring-npm/package-json#peerdependencies",target:"_blank",rel:"noopener noreferrer",children:"npm's explanation of peerDependencies"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://pnpm.io/feature-comparison",target:"_blank",rel:"noopener noreferrer",children:"pnpm vs npm vs Yarn"})}),"\n"]}),"\n",(0,i.jsxs)(n.h2,{id:"npm-package-manager",children:["npm package manager",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#npm-package-manager",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["In addition to the standard package manager like npm, the mainstream ones are ",(0,i.jsx)(n.strong,{children:"pnpm"})," and ",(0,i.jsx)(n.strong,{children:"Yarn"}),", both of which are good alternatives to npm cli."]}),"\n",(0,i.jsxs)(n.p,{children:["It is recommended to use ",(0,i.jsx)(n.a,{href:"https://pnpm.io/installation",target:"_blank",rel:"noopener noreferrer",children:"pnpm"})," to manage project dependencies, which can be installed as follows."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"npm install -g pnpm\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"modernjs-module-configuration-file",children:["Modern.js Module configuration file",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#modernjs-module-configuration-file",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["The Modern.js Module configuration file - ",(0,i.jsx)(n.code,{children:"modern.config.(j|t)s"})," - is provided in the project directory of the module project created with ",(0,i.jsx)(n.code,{children:"@modern-js/create"}),". However, the ",(0,i.jsx)(n.code,{children:"modern.config"})," configuration file is not required to exist."]}),"\n",(0,i.jsx)(n.p,{children:"By default, the contents of the generated configuration file are as follows."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\n\nexport default defineConfig({\n  plugins: [moduleTools()],\n  buildPreset: 'npm-library',\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsxs)(n.strong,{children:["We recommend using the ",(0,i.jsx)(n.code,{children:"defineConfig"})," function"]}),", but it is not mandatory to use it. So you can also return an object directly in the config file: the"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"import { moduleTools } from '@modern-js/module-tools';\n\nexport default {\n  plugins: [moduleTools()],\n  buildPreset: 'npm-library',\n};\n"})})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,s.ah)(),e.components);return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(t,{...e})}):t(e)}let o=a;a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["en%2Fguide%2Fbasic%2Fbefore-getting-started.md"]={toc:[{text:"Environment preparation",id:"environment-preparation",depth:2},{text:"Getting Started with npm",id:"getting-started-with-npm",depth:2},{text:"npm package type project",id:"npm-package-type-project",depth:2},{text:"Using third-party npm packages",id:"using-third-party-npm-packages",depth:2},{text:"Other npm bits and pieces to know",id:"other-npm-bits-and-pieces-to-know",depth:2},{text:"Program entry for npm packages",id:"program-entry-for-npm-packages",depth:3},{text:"`scripts`",id:"scripts",depth:3},{text:"`npm install`",id:"npm-install",depth:4},{text:"`npm publish`",id:"npm-publish",depth:4},{text:"peerDependencies",id:"peerdependencies",depth:3},{text:"npm package manager",id:"npm-package-manager",depth:2},{text:"Modern.js Module configuration file",id:"modernjs-module-configuration-file",depth:2}],title:"Before you start",frontmatter:{sidebar_position:1}}}}]);

package/doc_build/static/js/async/6046.963bbf59.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["6046"],{765:function(e,n,t){t.r(n),t.d(n,{default:function(){return i}});var s=t(8093),r=t(5878);function o(e){let n=Object.assign({h1:"h1",a:"a"},(0,r.ah)(),e.components);return(0,s.jsxs)(n.h1,{id:"概览",children:["概览",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#概览",children:"#"})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,r.ah)(),e.components);return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(o,{...e})}):o(e)}let i=a;a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["zh%2Fapi%2Findex.md"]={toc:[],title:"概览",frontmatter:{overview:!0,sidebar_label:"概览",sidebar_position:1}}}}]);

package/doc_build/static/js/async/6308.6363792d.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["6308"],{5555:function(e,n,r){r.r(n),r.d(n,{default:function(){return a}});var s=r(8093),d=r(5878);function c(e){let n=Object.assign({h1:"h1",a:"a",p:"p",ul:"ul",li:"li",h2:"h2",strong:"strong",code:"code",pre:"pre",blockquote:"blockquote"},(0,d.ah)(),e.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.h1,{id:"版本管理与发布",children:["版本管理与发布",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#版本管理与发布",children:"#"})]}),"\n",(0,s.jsx)(n.p,{children:"一个 npm 类型的模块项目发布流程包含了两个阶段："}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"第一阶段是在开发期间，开发者需要提供变更文件，该文件记录了在发布期间需要的变更内容；"}),"\n",(0,s.jsxs)(n.li,{children:["第二阶段是在发布期间，需要收集所有的变更文件来更新版本、更新发布日志，并发布新的包到 ",(0,s.jsx)(n.a,{href:"https://www.npmjs.com/",target:"_blank",rel:"noopener noreferrer",children:"npm Registry"})," 上。"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Modern.js Module 提供了一套版本管理与发布的方案，这适用于单包场景。对于 monorepo 里的 npm 包你需要遵循各类 monorepo 解决方案提供的策略。"}),"\n",(0,s.jsxs)(n.h2,{id:"跟踪变更",children:["跟踪变更",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#跟踪变更",children:"#"})]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"当项目发生变化的时候需要将变化的内容记录下来"}),"。项目发生的变化一般是指："]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"新功能"}),"\n",(0,s.jsx)(n.li,{children:"修复问题"}),"\n",(0,s.jsx)(n.li,{children:"配置文件修改"}),"\n",(0,s.jsx)(n.li,{children:"..."}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"当这些任务一旦开发完成后，需要通过以下命令来对当前的变化进行记录："}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/guide/basic/command-preview#modern-change",children:(0,s.jsx)(n.code,{children:"modern change"})})}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["执行 ",(0,s.jsx)(n.code,{children:"modern change"})," 命令后会向开发者提出几个问题，并根据开发者的回答生成变更记录。变更记录文件包含了版本变化的类型和其描述，该文件会被提交到 git 仓库中。"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"$ npx modern change\n\uD83E\uDD8B  What kind of change is this for module-example? (current version is 0.1.0) \xb7 patch\n\uD83E\uDD8B  Please enter a summary for this change (this will be in the changelogs). Submit empty line to open external editor\n\uD83E\uDD8B  Summary \xb7 publish test\n\uD83E\uDD8B  === Releasing the following packages ===\n\uD83E\uDD8B  [Patch]\n\uD83E\uDD8B    module\n\uD83E\uDD8B  Is this your desired changeset? (Y/n) \xb7 true\n\uD83E\uDD8B  Changeset added! - you can now commit it\n\uD83E\uDD8B\n\uD83E\uDD8B  If you want to modify or expand on the changeset summary, you can find it here\n\uD83E\uDD8B  info /xxxxxx/module/.changeset/brave-dryers-agree.md\n"})}),"\n",(0,s.jsxs)(n.p,{children:["当执行成功后，生成的包含变更记录的 Markdown 文件会保存在项目的 ",(0,s.jsx)(n.code,{children:".changeset"})," 目录下面。其内容类似下面这样："]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-markdown",meta:'title=".changeset/brave-dryers-agree.md"',children:"---\n'module-example': patch\n---\n\npublish test\n"})}),"\n",(0,s.jsxs)(n.h2,{id:"版本更新",children:["版本更新",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#版本更新",children:"#"})]}),"\n",(0,s.jsx)(n.p,{children:"当需要更新项目版本的时候，执行以下命令："}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/guide/basic/command-preview#modern-bump",children:(0,s.jsx)(n.code,{children:"modern bump"})})}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["执行 ",(0,s.jsx)(n.code,{children:"modern bump"})," 将会基于 ",(0,s.jsx)(n.code,{children:".changeset/"})," 目录下记录了变更的 Markdown 文件内容来修改 ",(0,s.jsx)(n.code,{children:"package.json"})," 中的版本号，同时生成 ",(0,s.jsx)(n.code,{children:"CHANGELOG.md"})," 文件。",(0,s.jsx)(n.strong,{children:"而当版本更新完成后，这些记录变更的 Markdown 文件也会被删除，也可说这些 Markdown 文件被“消耗”掉了"}),"。"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-markdown",meta:'title="CHANGELOG.md"',children:"# module\n\n## 0.1.1\n\n### Patch Changes\n\n- publish test\n"})}),"\n",(0,s.jsxs)(n.h2,{id:"发布",children:["发布",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#发布",children:"#"})]}),"\n",(0,s.jsx)(n.p,{children:"发布项目可以执行以下命令："}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/guide/basic/command-preview#modern-release",children:(0,s.jsx)(n.code,{children:"modern release"})})}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"modern release"})," 命令可以将项目发布到 npm Registry。"]}),"\n",(0,s.jsxs)(n.p,{children:["此时发布的是 ",(0,s.jsx)(n.code,{children:"latest"})," 版本，也可以说是正式版本。如果想要修改 ",(0,s.jsx)(n.code,{children:"dist-tag"}),"，可以通过 ",(0,s.jsx)(n.code,{children:"modern release --tag"})," 命令来指定。例如："]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"modern release --tag beta\n"})}),"\n",(0,s.jsxs)(n.p,{children:["但是如果希望将当前项目的版本号也修改为预发布的版本号，则需要使用 ",(0,s.jsx)(n.code,{children:"modern pre"})," 命令。"]}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["所谓 ",(0,s.jsx)(n.code,{children:"dist-tag"}),"，可以理解：为当前发布的版本打标签。一般来说，默认发布的版本对应的 ",(0,s.jsx)(n.code,{children:"dist-tag"})," 为 ",(0,s.jsx)(n.code,{children:"latest"}),"，因此可以把 ",(0,s.jsx)(n.code,{children:"latest"})," 认为是正式版本的 ",(0,s.jsx)(n.code,{children:"dist-tag"}),"。"]}),"\n"]}),"\n",(0,s.jsxs)(n.h2,{id:"预发布",children:["预发布",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#预发布",children:"#"})]}),"\n",(0,s.jsx)(n.p,{children:"当需要在正式发布之前进行预发布，则需要执行以下命令："}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/guide/basic/command-preview#modern-pre",children:(0,s.jsx)(n.code,{children:"modern pre"})})}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["首先 ",(0,s.jsx)(n.code,{children:"modern pre enter <tag>"})," 进入预发布模式，",(0,s.jsx)(n.code,{children:"<tag>"})," 可以与发布项目的时候使用 ",(0,s.jsx)(n.code,{children:"modern release --tag"})," 命令指定的 ",(0,s.jsx)(n.code,{children:"tag"})," 一致。"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"$ npx modern pre enter next\n\uD83E\uDD8B  success Entered pre mode with tag next\n\uD83E\uDD8B  info Run `changeset version` to version packages with prerelease versions\n✨  Done in 5.30s.\n"})}),"\n",(0,s.jsxs)(n.p,{children:["接着可以使用 ",(0,s.jsx)(n.code,{children:"modern bump"})," 命令更新具体的版本号，",(0,s.jsx)(n.strong,{children:"此时不会真正的“消耗”记录变更的 Markdown 文件"}),"："]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"$ npx modern bump\n\uD83E\uDD8B  warn ===============================IMPORTANT!===============================\n\uD83E\uDD8B  warn You are in prerelease mode\n\uD83E\uDD8B  warn If you meant to do a normal release you should revert these changes and run `changeset pre exit`\n\uD83E\uDD8B  warn You can then run `changeset version` again to do a normal release\n\uD83E\uDD8B  warn ----------------------------------------------------------------------\n\uD83E\uDD8B  All files have been updated. Review them and commit at your leisure\n"})}),"\n",(0,s.jsxs)(n.p,{children:["然后可以看到 ",(0,s.jsx)(n.code,{children:"package.json"})," 中更新的版本号会类似这样：",(0,s.jsx)(n.code,{children:"0.1.2-next.0"}),"。"]}),"\n",(0,s.jsxs)(n.p,{children:["最后，",(0,s.jsxs)(n.strong,{children:["如果不需要再进行预发布，则一定要执行 ",(0,s.jsx)(n.code,{children:"modern pre exit"})," 命令"]}),"，这样可以退出预发布状态，并且当再次执行 ",(0,s.jsx)(n.code,{children:"modern bump"})," 命令的时候，就可以发布正式的版本。"]})]})}function i(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,d.ah)(),e.components);return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}let a=i;i.__RSPRESS_PAGE_META={},i.__RSPRESS_PAGE_META["zh%2Fguide%2Fbasic%2Fpublish-your-project.mdx"]={toc:[{text:"跟踪变更",id:"跟踪变更",depth:2},{text:"版本更新",id:"版本更新",depth:2},{text:"发布",id:"发布",depth:2},{text:"预发布",id:"预发布",depth:2}],title:"版本管理与发布",frontmatter:{sidebar_position:7}}}}]);

package/doc_build/static/js/async/6576.a753babb.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["6576"],{7571:function(e,s,n){n.r(s),n.d(s,{default:function(){return c}});var r=n(8093),l=n(5878);function i(e){let s=Object.assign({h1:"h1",a:"a",p:"p",h2:"h2",ol:"ol",li:"li",code:"code",pre:"pre",ul:"ul",h3:"h3",blockquote:"blockquote",strong:"strong"},(0,l.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"开发组件",children:["开发组件",(0,r.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#开发组件",children:"#"})]}),"\n",(0,r.jsx)(s.p,{children:"本章将要介绍如何使用 Modern.js Module 开发组件项目。"}),"\n",(0,r.jsxs)(s.h2,{id:"初始化项目",children:["初始化项目",(0,r.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#初始化项目",children:"#"})]}),"\n",(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:["推荐使用 ",(0,r.jsx)(s.code,{children:"@modern-js/create"})," 命令来初始化一个 npm 项目。"]}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-text",meta:'title="交互式问题"',children:"npx @modern-js/create@latest components-project\n\n? 请选择你想创建的工程类型：Npm 模块\n? 请填写项目名称：components-demo\n? 请选择开发语言：TS\n? 请选择包管理工具：pnpm\n"})}),"\n",(0,r.jsxs)(s.ol,{start:"2",children:["\n",(0,r.jsx)(s.li,{children:"初始化的目录结构如下："}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-bash",children:".\n├── README.md\n├── node_modules/\n├── dist/\n├── modern.config.ts\n├── package.json\n├── pnpm-lock.yaml\n├── src\n│   ├── index.ts\n│   └── modern-app-env.d.ts\n└── tsconfig.json\n"})}),"\n",(0,r.jsxs)(s.ol,{start:"3",children:["\n",(0,r.jsxs)(s.li,{children:["最后修改 ",(0,r.jsx)(s.code,{children:"./src/index.ts"})," 文件后缀和内容如下，就完成了组件项目的初始化。"]}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-tsx",meta:'title="./src/index.tsx"',children:"export default () => {\n  return <div>hello world</div>;\n};\n"})}),"\n",(0,r.jsxs)(s.h2,{id:"使用-storybook-调试代码",children:["使用 Storybook 调试代码",(0,r.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#使用-storybook-调试代码",children:"#"})]}),"\n",(0,r.jsxs)(s.p,{children:["请参考 ",(0,r.jsx)(s.a,{href:"/guide/basic/using-storybook.html",children:"「使用 Storybook」"})," 来使用 Storybook 调试代码。"]}),"\n",(0,r.jsxs)(s.h2,{id:"开发样式",children:["开发样式",(0,r.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#开发样式",children:"#"})]}),"\n",(0,r.jsx)(s.p,{children:"接下来我们可以给组件添加样式。"}),"\n",(0,r.jsx)(s.p,{children:"目前支持开发样式的能力有："}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"CSS/PostCSS"}),"\n",(0,r.jsx)(s.li,{children:"Less"}),"\n",(0,r.jsx)(s.li,{children:"Scss/Sass"}),"\n",(0,r.jsx)(s.li,{children:"Tailwind CSS"}),"\n",(0,r.jsx)(s.li,{children:"CSS Modules"}),"\n"]}),"\n",(0,r.jsxs)(s.h3,{id:"csspostcss",children:["CSS/PostCSS",(0,r.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#csspostcss",children:"#"})]}),"\n",(0,r.jsx)(s.p,{children:"Modern.js Module 支持 PostCSS，并且内置了以下 PostCSS 插件："}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://github.com/luisrudge/postcss-flexbugs-fixes",target:"_blank",rel:"noopener noreferrer",children:"flexbugs-fixes"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://github.com/postcss/postcss-custom-properties",target:"_blank",rel:"noopener noreferrer",children:"custom-properties"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://github.com/maximkoretskiy/postcss-initial",target:"_blank",rel:"noopener noreferrer",children:"initial"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://github.com/shrpne/postcss-page-break",target:"_blank",rel:"noopener noreferrer",children:"page-break"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://github.com/postcss/postcss-font-variant",target:"_blank",rel:"noopener noreferrer",children:"font-variant"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://github.com/postcss/postcss-media-minmax",target:"_blank",rel:"noopener noreferrer",children:"media-minmax"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#readme",target:"_blank",rel:"noopener noreferrer",children:"nesting"})}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["因此我们可以在项目中创建 ",(0,r.jsx)(s.code,{children:".css"})," 文件，并且可以直接在 css 文件中使用这些插件提供的语法支持和能力。"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"源代码："}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-less",meta:'title="./src/index.css"',children:'a,\nb {\n  color: red;\n\n  /* "&" comes first */\n  & c,\n  & d {\n    color: white;\n  }\n\n  /* "&" comes later, requiring "@nest" */\n  @nest e & {\n    color: yellow;\n  }\n}\n'})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"CSS 产物："}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-css",meta:'title="./dist/es/index.css"',children:"a,\nb {\n  color: red;\n}\na c,\nb c,\na d,\nb d {\n  color: white;\n}\ne a,\ne b {\n  color: yellow;\n}\n"})}),"\n",(0,r.jsxs)(s.h3,{id:"less",children:["Less",(0,r.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#less",children:"#"})]}),"\n",(0,r.jsx)(s.p,{children:"Modern.js Module 支持使用 Less 开发样式。"}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"目前内置的 Less 版本为 v4.1.3"}),"\n"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"源代码："}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-less",meta:'title="./src/common.less"',children:"@bg: black;\n@bg-light: boolean(luma(@bg) > 50%);\n\ndiv {\n  background: @bg;\n  color: if(@bg-light, black, white);\n}\n"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"Less 产物："}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-css",meta:'title="./dist/es/common.css"',children:"div {\n  background: black;\n  color: white;\n}\n"})}),"\n",(0,r.jsxs)(s.h3,{id:"sassscss",children:["Sass/Scss",(0,r.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#sassscss",children:"#"})]}),"\n",(0,r.jsx)(s.p,{children:"Modern.js Module 支持使用 Scss/Sass 开发样式。"}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"目前内置的 Sass 版本为 v1.54.4"}),"\n"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"源代码："}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-scss",meta:'title="./src/common.sass"',children:"$font-stack: Helvetica, sans-serif;\n$primary-color: #333;\n\nbody {\n  font: 100% $font-stack;\n  color: $primary-color;\n}\n"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"Sass 产物："}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-css",meta:'title="./dist/es/common.css"',children:"body {\n  font: 100% Helvetica, sans-serif;\n  color: #333;\n}\n"})}),"\n",(0,r.jsxs)(s.h3,{id:"tailwind-css",children:["Tailwind CSS",(0,r.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#tailwind-css",children:"#"})]}),"\n",(0,r.jsxs)(s.p,{children:["请参考 ",(0,r.jsx)(s.a,{href:"/guide/best-practices/use-tailwindcss.html",children:"「使用 Tailwind CSS」"})," 来了解相关用法。"]}),"\n",(0,r.jsxs)(s.h3,{id:"css-modules",children:["CSS Modules",(0,r.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#css-modules",children:"#"})]}),"\n",(0,r.jsx)(s.p,{children:"Modern.js Module 支持使用 CSS Module 开发样式。默认情况下会将以下文件识别为 CSS Module 文件："}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:".module.css"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:".module.less"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:".module.scss"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.code,{children:".module.sass"})}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:"如果需要对 CSS Modules 进行配置，可以查看以下 API："}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/api/config/build-config#styleautomodules",children:"style.autoModules"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/api/config/build-config#stylemodules",children:"style.modules"})}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:"下面是一个代码示例："}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-tsx",meta:'title="./src/index.tsx"',children:"import style from './index.module.css';\n\nexport default () => {\n  return <div className={style.btn}>hello world</div>;\n};\n"})}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-css",meta:'title="./src/index.module.css"',children:".btn {\n  color: blue;\n}\n"})}),"\n",(0,r.jsxs)(s.h2,{id:"配置构建产物",children:["配置构建产物",(0,r.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#配置构建产物",children:"#"})]}),"\n",(0,r.jsxs)(s.p,{children:["根据组件项目使用的多数场景，",(0,r.jsxs)(s.strong,{children:["推荐使用 ",(0,r.jsx)(s.code,{children:"npm-component"})," 构建预设"]}),"。该预设得到的产物目录结构为："]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-bash",children:".\n├── dist\n│   ├── es\n│   ├── lib\n│   └── types\n"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"./dist/es"}),": 包含了支持 es6 语法的 ES modules 格式的 bundleless 产物。"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"./dist/lib"}),": 包含了支持 es6 语法的 CommonJS 格式的 bundleless 产物。"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"./dist/types"}),": 包含了类型文件。"]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["如果对使用语法支持有要求，可以手动配置 ",(0,r.jsx)(s.a,{href:"/api/config/build-preset",children:(0,r.jsx)(s.code,{children:"buildPreset"})}),"，并且支持在 ",(0,r.jsx)(s.code,{children:"npm-component"})," 基础上增加后缀的方式修改支持的语法："]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-tsx",children:"export default defineConfig({\n  buildPreset: 'npm-component-es2019',\n});\n"})}),"\n",(0,r.jsxs)(s.p,{children:["如果对构建产物目录结构有特殊需求，则可以使用 ",(0,r.jsxs)(s.a,{href:"/api/config/build-config",children:[(0,r.jsx)(s.code,{children:"buildConfig"})," API"]}),"，可以通过以下文档来了解使用方式："]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/guide/basic/modify-output-product#%E6%9E%84%E5%BB%BA%E9%85%8D%E7%BD%AE%E5%AF%B9%E8%B1%A1",children:"修改输出产物"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/guide/advance/in-depth-about-build",children:"深入理解构建"})}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"发布组件",children:["发布组件",(0,r.jsx)(s.a,{className:"header-anchor","aria-hidden":"true",href:"#发布组件",children:"#"})]}),"\n",(0,r.jsxs)(s.p,{children:["推荐使用 Modern.js Module 提供的版本发布功能，可以参考 ",(0,r.jsx)(s.a,{href:"/guide/basic/publish-your-project",children:"「版本管理与发布」"}),"。"]})]})}function d(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,l.ah)(),e.components);return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(i,{...e})}):i(e)}let c=d;d.__RSPRESS_PAGE_META={},d.__RSPRESS_PAGE_META["zh%2Fguide%2Fbest-practices%2Fcomponents.mdx"]={toc:[{text:"初始化项目",id:"初始化项目",depth:2},{text:"使用 Storybook 调试代码",id:"使用-storybook-调试代码",depth:2},{text:"开发样式",id:"开发样式",depth:2},{text:"CSS/PostCSS",id:"csspostcss",depth:3},{text:"Less",id:"less",depth:3},{text:"Sass/Scss",id:"sassscss",depth:3},{text:"Tailwind CSS",id:"tailwind-css",depth:3},{text:"CSS Modules",id:"css-modules",depth:3},{text:"配置构建产物",id:"配置构建产物",depth:2},{text:"发布组件",id:"发布组件",depth:2}],title:"开发组件",frontmatter:{sidebar_position:1}}}}]);

package/doc_build/static/js/async/6615.154a2810.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["6615"],{6826:function(e,n,s){s.r(n),s.d(n,{default:function(){return a}});var r=s(8093),l=s(5878);function i(e){let n=Object.assign({h1:"h1",a:"a",p:"p",ul:"ul",li:"li"},(0,l.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"faq",children:["FAQ",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#faq",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"Here is a list of all frequently asked questions about Modern.js Module."}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"/en/guide/faq/basic",children:"General FAQ"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"/en/guide/faq/build",children:"Build FAQ"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"/en/guide/faq/storybook",children:"Storybook FAQ"})}),"\n"]})]})}function d(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,l.ah)(),e.components);return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(i,{...e})}):i(e)}let a=d;d.__RSPRESS_PAGE_META={},d.__RSPRESS_PAGE_META["en%2Fguide%2Ffaq%2Findex.md"]={toc:[],title:"FAQ",frontmatter:{}}}}]);

package/doc_build/static/js/async/6858.e2452605.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["6858"],{8370:function(e,n,s){s.r(n),s.d(n,{default:function(){return a}});var i=s(8093),r=s(5878),t=s(8078);function l(e){let n=Object.assign({h1:"h1",a:"a",p:"p",div:"div",ol:"ol",li:"li",code:"code",h2:"h2",h3:"h3",pre:"pre",ul:"ul",strong:"strong"},(0,r.ah)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.h1,{id:"vue-plugin",children:["Vue Plugin",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#vue-plugin",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["The Vue plugin provides support for building Vue 3 components. The plugin internally integrates ",(0,i.jsx)(n.a,{href:"https://github.com/pipe01/esbuild-plugin-vue3",target:"_blank",rel:"noopener noreferrer",children:"esbuild-plugin-vue3"})," and ",(0,i.jsx)(n.a,{href:"https://github.com/vuejs/babel-plugin-jsx",target:"_blank",rel:"noopener noreferrer",children:"@vue/babel-plugin-jsx"}),"。"]}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive warning",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"WARNING"}),(0,i.jsxs)(n.div,{className:"rspress-directive-content",children:[(0,i.jsx)(n.p,{children:"Notice that we have some limitation:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsx)(n.li,{children:"The current implementation of this plugin integrates directly with the community plugin and therefore does not support writing jsx/tsx in sfc."}),"\n",(0,i.jsxs)(n.li,{children:["If you want to generate d.ts for the components, please use the official recommendation ",(0,i.jsx)(n.a,{href:"https://www.npmjs.com/package/vue-tsc",target:"_blank",rel:"noopener noreferrer",children:"vue-tsc"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:["Only support bundle, we recommend to set input to ",(0,i.jsx)(n.code,{children:"['src/**/*.vue']"})," or ",(0,i.jsx)(n.code,{children:"['src/index.ts']"}),"."]}),"\n"]}),"\n"]})]}),"\n",(0,i.jsxs)(n.h2,{id:"quick-start",children:["Quick start",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#quick-start",children:"#"})]}),"\n",(0,i.jsxs)(n.h3,{id:"install",children:["Install",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#install",children:"#"})]}),"\n","\n",(0,i.jsx)(t.SU,{command:"add @modern-js/plugin-module-vue -D"}),"\n",(0,i.jsxs)(n.h3,{id:"register",children:["Register",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#register",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"In Modern.js Module, you can register plugins in the following way:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\nimport { modulePluginVue } from '@modern-js/plugin-module-vue';\n\nexport default defineConfig({\n  plugins: [moduleTools(), modulePluginVue()],\n  buildConfig: {\n    buildType: 'bundle',\n    format: 'esm',\n    input: ['src/index.vue'],\n    dts: false,\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"options",children:["Options",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#options",children:"#"})]}),"\n",(0,i.jsxs)(n.h3,{id:"vuejsxpluginoptions",children:["vueJsxPluginOptions",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#vuejsxpluginoptions",children:"#"})]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.strong,{children:"Type:"})}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"type VueJSXPluginOptions = {\n  /** transform `on: { click: xx }` to `onClick: xxx` */\n  transformOn?: boolean;\n  /** enable optimization or not. */\n  optimize?: boolean;\n  /** merge static and dynamic class / style attributes / onXXX handlers */\n  mergeProps?: boolean;\n  /** configuring custom elements */\n  isCustomElement?: (tag: string) => boolean;\n  /** enable object slots syntax */\n  enableObjectSlots?: boolean;\n  /** Replace the function used when compiling JSX expressions */\n  pragma?: string;\n};\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Default:"})," ",(0,i.jsx)(n.code,{children:"{}"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Options passed to ",(0,i.jsx)(n.code,{children:"@vue/babel-plugin-jsx"}),", please refer to the ",(0,i.jsx)(n.a,{href:"https://github.com/vuejs/babel-plugin-jsx",target:"_blank",rel:"noopener noreferrer",children:"@vue/babel-plugin-jsx documentation"})," for detailed usage."]})]})}function o(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,r.ah)(),e.components);return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}let a=o;o.__RSPRESS_PAGE_META={},o.__RSPRESS_PAGE_META["en%2Fplugins%2Fofficial-list%2Fplugin-vue.mdx"]={toc:[{text:"Quick start",id:"quick-start",depth:2},{text:"Install",id:"install",depth:3},{text:"Register",id:"register",depth:3},{text:"Options",id:"options",depth:2},{text:"vueJsxPluginOptions",id:"vuejsxpluginoptions",depth:3}],title:"Vue Plugin",frontmatter:{}}}}]);

package/doc_build/static/js/async/6975.be4ba201.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["6975"],{2517:function(e,i,l){l.r(i),l.d(i,{default:function(){return d}});var n=l(8093),o=l(5878);function s(e){let i=Object.assign({h1:"h1",a:"a",h2:"h2",ul:"ul",li:"li",code:"code"},(0,o.ah)(),e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(i.h1,{id:"overview",children:["Overview",(0,n.jsx)(i.a,{className:"header-anchor","aria-hidden":"true",href:"#overview",children:"#"})]}),"\n",(0,n.jsxs)(i.h2,{id:"official-plugins",children:["Official Plugins",(0,n.jsx)(i.a,{className:"header-anchor","aria-hidden":"true",href:"#official-plugins",children:"#"})]}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.a,{href:"/en/plugins/official-list/plugin-import",children:"@modern-js/plugin-module-import"}),"：Use SWC to provide the same ability as ",(0,n.jsx)(i.a,{href:"https://github.com/umijs/babel-plugin-import",target:"_blank",rel:"noopener noreferrer",children:(0,n.jsx)(i.code,{children:"babel-plugin-import"})}),"."]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.a,{href:"/en/plugins/official-list/plugin-banner",children:"@modern-js/plugin-module-banner"}),"：Add custom content, such as copyright information, to the top and bottom of each JS and CSS file."]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.a,{href:"/en/plugins/official-list/plugin-node-polyfill",children:"@modern-js/plugin-module-node-polyfill"}),"： Inject Polyfills of Node core modules in the browser side."]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.a,{href:"/en/plugins/official-list/plugin-polyfill",children:"@modern-js/plugin-module-polyfill"}),"：Inject polyfill for unsupported features used in your code."]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.a,{href:"/en/plugins/official-list/plugin-babel",children:"@modern-js/plugin-module-babel"}),"：Use Babel to transform your code."]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.a,{href:"/en/plugins/official-list/plugin-vue",children:"@modern-js/plugin-module-vue"}),"：Support for Vue component."]}),"\n"]})]})}function r(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:i}=Object.assign({},(0,o.ah)(),e.components);return i?(0,n.jsx)(i,{...e,children:(0,n.jsx)(s,{...e})}):s(e)}let d=r;r.__RSPRESS_PAGE_META={},r.__RSPRESS_PAGE_META["en%2Fplugins%2Fofficial-list%2Foverview.md"]={toc:[{text:"Official Plugins",id:"official-plugins",depth:2}],title:"Overview",frontmatter:{}}}}]);

package/doc_build/static/js/async/7080.1c684c7d.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["7080"],{6532:function(e,l,n){n.r(l),n.d(l,{default:function(){return c}});var i=n(8093),d=n(5878),s=n(8078);function r(e){let l=Object.assign({h1:"h1",a:"a",div:"div",p:"p",h2:"h2",h3:"h3",pre:"pre",code:"code",ul:"ul",li:"li",strong:"strong"},(0,d.ah)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(l.h1,{id:"node-polyfill-plugin",children:["Node Polyfill Plugin",(0,i.jsx)(l.a,{className:"header-anchor","aria-hidden":"true",href:"#node-polyfill-plugin",children:"#"})]}),"\n",(0,i.jsxs)(l.div,{className:"rspress-directive tip",children:[(0,i.jsx)(l.div,{className:"rspress-directive-title",children:"About Node Polyfill"}),(0,i.jsx)(l.div,{className:"rspress-directive-content",children:(0,i.jsx)(l.p,{children:"Normally, we don't need to use Node libs on the browser side. However, it is possible to use some Node libs when the code will run on both the Node side and the browser side, and Node Polyfill provides browser versions of polyfills for these Node libs."})})]}),"\n",(0,i.jsx)(l.p,{children:"By using the Node Polyfill plugin, Node core libs polyfills are automatically injected into the browser-side, allowing you to use these modules on the browser side with confidence."}),"\n",(0,i.jsxs)(l.h2,{id:"quick-start",children:["Quick Start",(0,i.jsx)(l.a,{className:"header-anchor","aria-hidden":"true",href:"#quick-start",children:"#"})]}),"\n",(0,i.jsxs)(l.h3,{id:"install",children:["Install",(0,i.jsx)(l.a,{className:"header-anchor","aria-hidden":"true",href:"#install",children:"#"})]}),"\n","\n",(0,i.jsx)(s.SU,{command:"add @modern-js/plugin-module-node-polyfill -D"}),"\n",(0,i.jsxs)(l.h3,{id:"register",children:["Register",(0,i.jsx)(l.a,{className:"header-anchor","aria-hidden":"true",href:"#register",children:"#"})]}),"\n",(0,i.jsx)(l.p,{children:"In Modern.js Module, you can register plugins in the following way:"}),"\n",(0,i.jsx)(l.pre,{children:(0,i.jsx)(l.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\nimport { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';\n\nexport default defineConfig({\n  plugins: [moduleTools(), modulePluginNodePolyfill()],\n});\n"})}),"\n",(0,i.jsxs)(l.h2,{id:"configurations",children:["Configurations",(0,i.jsx)(l.a,{className:"header-anchor","aria-hidden":"true",href:"#configurations",children:"#"})]}),"\n",(0,i.jsxs)(l.ul,{children:["\n",(0,i.jsxs)(l.li,{children:[(0,i.jsx)(l.strong,{children:"Type"}),":"]}),"\n"]}),"\n",(0,i.jsx)(l.pre,{children:(0,i.jsx)(l.code,{className:"language-ts",children:"type NodePolyfillOptions = {\n  exclude?: string[];\n  overrides?: Record<NodePolyfillKey, string>;\n};\n"})}),"\n",(0,i.jsxs)(l.h3,{id:"exclude",children:["exclude",(0,i.jsx)(l.a,{className:"header-anchor","aria-hidden":"true",href:"#exclude",children:"#"})]}),"\n",(0,i.jsx)(l.p,{children:"Exclude the Node Polyfill to be injected."}),"\n",(0,i.jsx)(l.pre,{children:(0,i.jsx)(l.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\nimport { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';\n\nexport default defineConfig({\n  plugins: [\n    moduleTools(),\n    modulePluginNodePolyfill({\n      exclude: ['console'],\n    }),\n  ],\n});\n"})}),"\n",(0,i.jsxs)(l.h3,{id:"overrides",children:["overrides",(0,i.jsx)(l.a,{className:"header-anchor","aria-hidden":"true",href:"#overrides",children:"#"})]}),"\n",(0,i.jsx)(l.p,{children:"Override the built-in Node Polyfill."}),"\n",(0,i.jsx)(l.pre,{children:(0,i.jsx)(l.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\nimport { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';\n\nexport default defineConfig({\n  plugins: [\n    moduleTools(),\n    modulePluginNodePolyfill({\n      overrides: {\n        fs: path.join(__dirname, './custom-fs.js'),\n      },\n    }),\n  ],\n});\n"})}),"\n",(0,i.jsxs)(l.h2,{id:"node-polyfills",children:["Node Polyfills",(0,i.jsx)(l.a,{className:"header-anchor","aria-hidden":"true",href:"#node-polyfills",children:"#"})]}),"\n",(0,i.jsxs)(l.h3,{id:"globals",children:["Globals",(0,i.jsx)(l.a,{className:"header-anchor","aria-hidden":"true",href:"#globals",children:"#"})]}),"\n",(0,i.jsxs)(l.ul,{children:["\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"Buffer"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"process"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"console"})}),"\n"]}),"\n",(0,i.jsx)(l.p,{children:"When the above global variables are used directly in code, the corresponding polyfill will be injected."}),"\n",(0,i.jsx)(l.pre,{children:(0,i.jsx)(l.code,{className:"language-ts",children:"const bufferData = Buffer.from('xxxx');\n"})}),"\n",(0,i.jsxs)(l.h3,{id:"modules",children:["Modules",(0,i.jsx)(l.a,{className:"header-anchor","aria-hidden":"true",href:"#modules",children:"#"})]}),"\n",(0,i.jsxs)(l.ul,{children:["\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"assert"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"buffer"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"console"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"constants"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"crypto"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"domain"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"events"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"http"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"https"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"os"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"path"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"punycode"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"process"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"querystring"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"stream"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"_stream_duplex"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"_stream_passthrough"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"_stream_readable"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"_stream_transform"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"_stream_writable"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"string_decoder"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"sys"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"timers"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"tty"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"url"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"util"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"vm"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"zlib"})}),"\n"]}),"\n",(0,i.jsx)(l.p,{children:"When the above module is referenced in code via import / require syntax, the corresponding polyfill will be injected."}),"\n",(0,i.jsx)(l.pre,{children:(0,i.jsx)(l.code,{className:"language-ts",children:"import { Buffer } from 'buffer';\n\nconst bufferData = Buffer.from('xxxx');\n"})}),"\n",(0,i.jsxs)(l.h3,{id:"fallbacks",children:["Fallbacks",(0,i.jsx)(l.a,{className:"header-anchor","aria-hidden":"true",href:"#fallbacks",children:"#"})]}),"\n",(0,i.jsxs)(l.ul,{children:["\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"child_process"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"cluster"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"dgram"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"dns"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"fs"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"module"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"net"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"readline"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"repl"})}),"\n",(0,i.jsx)(l.li,{children:(0,i.jsx)(l.code,{children:"tls"})}),"\n"]}),"\n",(0,i.jsx)(l.p,{children:"Currently there is no polyfill for the above modules on the browser side, so when you import the above modules, it will automatically fallback to an empty object."}),"\n",(0,i.jsx)(l.pre,{children:(0,i.jsx)(l.code,{className:"language-ts",children:"import fs from 'fs';\n\nconsole.log(fs); // -> {}\n"})})]})}function o(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:l}=Object.assign({},(0,d.ah)(),e.components);return l?(0,i.jsx)(l,{...e,children:(0,i.jsx)(r,{...e})}):r(e)}let c=o;o.__RSPRESS_PAGE_META={},o.__RSPRESS_PAGE_META["en%2Fplugins%2Fofficial-list%2Fplugin-node-polyfill.mdx"]={toc:[{text:"Quick Start",id:"quick-start",depth:2},{text:"Install",id:"install",depth:3},{text:"Register",id:"register",depth:3},{text:"Configurations",id:"configurations",depth:2},{text:"exclude",id:"exclude",depth:3},{text:"overrides",id:"overrides",depth:3},{text:"Node Polyfills",id:"node-polyfills",depth:2},{text:"Globals",id:"globals",depth:3},{text:"Modules",id:"modules",depth:3},{text:"Fallbacks",id:"fallbacks",depth:3}],title:"Node Polyfill Plugin",frontmatter:{}}}}]);

package/doc_build/static/js/async/7220.1c4ee8bb.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["7220"],{2101:function(e,n,s){s.r(n),s.d(n,{default:function(){return o}});var r=s(8093),i=s(5878),l=s(8078);function d(e){let n=Object.assign({h1:"h1",a:"a",p:"p",div:"div",ol:"ol",li:"li",code:"code",h2:"h2",h3:"h3",pre:"pre",ul:"ul",strong:"strong"},(0,i.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"vue-插件",children:["Vue 插件",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#vue-插件",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:["Vue 插件提供了对 Vue 3 组件构建的支持，插件内部集成了 ",(0,r.jsx)(n.a,{href:"https://github.com/pipe01/esbuild-plugin-vue3",target:"_blank",rel:"noopener noreferrer",children:"esbuild-plugin-vue3"})," 和 ",(0,r.jsx)(n.a,{href:"https://github.com/vuejs/babel-plugin-jsx",target:"_blank",rel:"noopener noreferrer",children:"@vue/babel-plugin-jsx"}),"。"]}),"\n",(0,r.jsxs)(n.div,{className:"rspress-directive warning",children:[(0,r.jsx)(n.div,{className:"rspress-directive-title",children:"WARNING"}),(0,r.jsxs)(n.div,{className:"rspress-directive-content",children:[(0,r.jsx)(n.p,{children:"请注意，此插件仍有一些用法限制："}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsx)(n.li,{children:"目前此插件的实现是直接集成社区插件，因此不支持在 sfc 里写 jsx/tsx。"}),"\n",(0,r.jsxs)(n.li,{children:["如果要为组件生成 d.ts，请使用官方推荐方式 ",(0,r.jsx)(n.a,{href:"https://www.npmjs.com/package/vue-tsc",target:"_blank",rel:"noopener noreferrer",children:"vue-tsc"}),"。"]}),"\n",(0,r.jsxs)(n.li,{children:["仅支持打包场景，推荐将 input 设置为 ",(0,r.jsx)(n.code,{children:"['src/**/*.vue']"})," 或者 ",(0,r.jsx)(n.code,{children:"['src/index.ts']"}),"。"]}),"\n"]}),"\n"]})]}),"\n",(0,r.jsxs)(n.h2,{id:"快速开始",children:["快速开始",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#快速开始",children:"#"})]}),"\n",(0,r.jsxs)(n.h3,{id:"安装",children:["安装",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#安装",children:"#"})]}),"\n","\n",(0,r.jsx)(l.SU,{command:"add @modern-js/plugin-module-vue -D"}),"\n",(0,r.jsxs)(n.h3,{id:"注册插件",children:["注册插件",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#注册插件",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"在 Modern.js Module 中，你可以按照如下方式注册插件："}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\nimport { modulePluginVue } from '@modern-js/plugin-module-vue';\n\nexport default defineConfig({\n  plugins: [moduleTools(), modulePluginVue()],\n  buildConfig: {\n    buildType: 'bundle',\n    format: 'esm',\n    input: ['src/index.vue'],\n    dts: false,\n  },\n});\n"})}),"\n",(0,r.jsxs)(n.h2,{id:"配置",children:["配置",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#配置",children:"#"})]}),"\n",(0,r.jsxs)(n.h3,{id:"vuejsxpluginoptions",children:["vueJsxPluginOptions",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#vuejsxpluginoptions",children:"#"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.strong,{children:"Type:"})}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"type VueJSXPluginOptions = {\n  /** transform `on: { click: xx }` to `onClick: xxx` */\n  transformOn?: boolean;\n  /** enable optimization or not. */\n  optimize?: boolean;\n  /** merge static and dynamic class / style attributes / onXXX handlers */\n  mergeProps?: boolean;\n  /** configuring custom elements */\n  isCustomElement?: (tag: string) => boolean;\n  /** enable object slots syntax */\n  enableObjectSlots?: boolean;\n  /** Replace the function used when compiling JSX expressions */\n  pragma?: string;\n};\n"})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Default:"})," ",(0,r.jsx)(n.code,{children:"{}"})]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["传递给 ",(0,r.jsx)(n.code,{children:"@vue/babel-plugin-jsx"})," 的选项，请查阅 ",(0,r.jsx)(n.a,{href:"https://github.com/vuejs/babel-plugin-jsx",target:"_blank",rel:"noopener noreferrer",children:"@vue/babel-plugin-jsx"})," 文档 来了解具体用法。"]})]})}function t(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,i.ah)(),e.components);return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}let o=t;t.__RSPRESS_PAGE_META={},t.__RSPRESS_PAGE_META["zh%2Fplugins%2Fofficial-list%2Fplugin-vue.mdx"]={toc:[{text:"快速开始",id:"快速开始",depth:2},{text:"安装",id:"安装",depth:3},{text:"注册插件",id:"注册插件",depth:3},{text:"配置",id:"配置",depth:2},{text:"vueJsxPluginOptions",id:"vuejsxpluginoptions",depth:3}],title:"Vue 插件",frontmatter:{}}}}]);

package/doc_build/static/js/async/7406.b2acec42.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["7406"],{2501:function(e,t,i){i.r(t),i.d(t,{default:function(){return a}});var n=i(8093),o=i(5878);function l(e){let t=Object.assign({h1:"h1",a:"a"},(0,o.ah)(),e.components);return(0,n.jsxs)(t.h1,{id:"index",children:["index",(0,n.jsx)(t.a,{className:"header-anchor","aria-hidden":"true",href:"#index",children:"#"})]})}function s(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,o.ah)(),e.components);return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}let a=s;s.__RSPRESS_PAGE_META={},s.__RSPRESS_PAGE_META["en%2Findex.md"]={toc:[],title:"index",frontmatter:{pageType:"home",hero:{name:"Modern.js Module",text:"Module engineering solutions",tagline:"simple, powerful, high-performance modern npm package development solution",actions:[{theme:"brand",text:"Welcome",link:"/guide/intro/welcome"},{theme:"alt",text:"Quick Start",link:"/guide/intro/getting-started"}]},features:[{title:"esbuild: The High Performance JS Bundler",details:"Built on esbuild, the build is extremely fast and gives you the ultimate development experience.",icon:"\uD83D\uDE80"},{title:"Two build modes",details:"Both bundle and bundleless build modes are supported.",icon:"✨"},{title:"Out of the box",details:"Develop your npm packages without too much configuration, with built-in presets covering a wide range of scenarios.",icon:"\uD83D\uDEE0️"},{title:"Extensible: Provides a powerful plugin mechanism",details:"With its plugin extension mechanism, you can easily extend the capabilities of Modern.js Module.",icon:"\uD83C\uDFA8"},{title:"Storybook: The community popular UI development tool",details:"Integrated with Storybook, you can use it to debug UI.",icon:"\uD83D\uDCE6"},{title:"Lint: Code Formatting",details:"Built-in ESLint rules for rich scenarios.",icon:"\uD83D\uDCD0"}]}}}}]);

package/doc_build/static/js/async/7521.ca744786.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["7521"],{577:function(e,n,o){o.r(n),o.d(n,{default:function(){return t}});var r=o(8093),i=o(5878);function s(e){let n=Object.assign({h1:"h1",a:"a",p:"p",ul:"ul",li:"li",code:"code",strong:"strong",h2:"h2",div:"div",pre:"pre"},(0,i.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"using-the-microgenerator",children:["Using the Microgenerator",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#using-the-microgenerator",children:"#"})]}),"\n",(0,r.jsx)(n.p,{children:"Modern.js Module provides the Microgenerator tool, which allows for the current project to."}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"add new directories and files"}),"\n",(0,r.jsxs)(n.li,{children:["Modify the contents of the ",(0,r.jsx)(n.code,{children:"package.json"})," file"]}),"\n",(0,r.jsx)(n.li,{children:"Execute commands"}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Thus with these capabilities, ",(0,r.jsx)(n.strong,{children:"Microgenerator can enable additional feature functionality for the project"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["The microgenerator can be started via ",(0,r.jsx)(n.a,{href:"/guide/basic/command-preview",children:(0,r.jsx)(n.code,{children:"modern new"})}),". The current Microgenerator features supported by the Modern.js Module are:"]}),"\n",(0,r.jsxs)(n.h2,{id:"develop-module-doc",children:["Develop Module Doc",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#develop-module-doc",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:["When we want to write documentation for out module project, we can enable the module doc feature. ",(0,r.jsxs)(n.strong,{children:["will create ",(0,r.jsx)(n.code,{children:"docs"})," directory and related files in the project directory, and add ",(0,r.jsx)(n.code,{children:'"@modern-js/plugin-rspress"'})," dependency"]})," in package.json.\nUse ",(0,r.jsx)(n.code,{children:"modern dev"})," and ",(0,r.jsx)(n.code,{children:"modern build --platform"})," to debug and build your doc site."]}),"\n",(0,r.jsxs)(n.div,{className:"rspress-directive tip",children:[(0,r.jsx)(n.div,{className:"rspress-directive-title",children:"TIP"}),(0,r.jsxs)(n.div,{className:"rspress-directive-content",children:["\n",(0,r.jsx)(n.p,{children:"After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\nimport { modulePluginDoc } from '@modern-js/plugin-rspress';\n\nexport default defineConfig({\n  plugins: [moduleTools(), modulePluginDoc()],\n});\n"})}),"\n"]})]}),"\n",(0,r.jsxs)(n.h2,{id:"storybook",children:["Storybook",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#storybook",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.strong,{children:"Storybook feature"})," can be enabled when we want to debug a component or a common module. When this feature is enabled, ",(0,r.jsxs)(n.strong,{children:["the ",(0,r.jsx)(n.code,{children:"stories"})," directory and ",(0,r.jsx)(n.code,{children:".storybook"})," directory are created in the project directory, and a new ",(0,r.jsx)(n.code,{children:'"@modern-js/storybook"'})," dependency is added to package.json"]}),". Use ",(0,r.jsx)(n.code,{children:"storybook dev"})," and ",(0,r.jsx)(n.code,{children:"storybook build"})," to debug and build."]}),"\n",(0,r.jsxs)(n.h2,{id:"tailwind-css-support",children:["Tailwind CSS Support",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#tailwind-css-support",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"https://tailwindcss.com/",target:"_blank",rel:"noopener noreferrer",children:"Tailwind CSS"})," is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles."]}),"\n",(0,r.jsxs)(n.p,{children:["If you want to use Tailwind CSS for a project, you can refer to ",(0,r.jsx)(n.a,{href:"https://modernjs.dev/module-tools/guide/best-practices/components.html#tailwind-css",target:"_blank",rel:"noopener noreferrer",children:'"Using Tailwind CSS"'}),"."]}),"\n",(0,r.jsxs)(n.h2,{id:"modernjs-runtime-api",children:["Modern.js Runtime API",(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#modernjs-runtime-api",children:"#"})]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Modern.js provides Runtime API capabilities that can only be used in the Modern.js application project environment"}),". If you need to develop a component for use in a Modern.js application environment, then you can turn on this feature and the microgenerator will add the ",(0,r.jsx)(n.code,{children:'"@modern-js/runtime"'})," dependency."]}),"\n",(0,r.jsx)(n.p,{children:"Also, the Storybook debugging tool will determine if the project needs to use the Runtime API by checking the project's dependencies and providing the same Runtime API runtime environment as the Modern.js application project."}),"\n",(0,r.jsxs)(n.div,{className:"rspress-directive tip",children:[(0,r.jsx)(n.div,{className:"rspress-directive-title",children:"TIP"}),(0,r.jsxs)(n.div,{className:"rspress-directive-content",children:["\n",(0,r.jsx)(n.p,{children:"After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\nimport runtime from '@modern-js/runtime/cli';\n\nexport default defineConfig({\n  plugins: [moduleTools(), runtime()],\n});\n"})}),"\n"]})]})]})}function d(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,i.ah)(),e.components);return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(s,{...e})}):s(e)}let t=d;d.__RSPRESS_PAGE_META={},d.__RSPRESS_PAGE_META["en%2Fguide%2Fbasic%2Fuse-micro-generator.md"]={toc:[{text:"Develop Module Doc",id:"develop-module-doc",depth:2},{text:"Storybook",id:"storybook",depth:2},{text:"Tailwind CSS Support",id:"tailwind-css-support",depth:2},{text:"Modern.js Runtime API",id:"modernjs-runtime-api",depth:2}],title:"Using the Microgenerator",frontmatter:{sidebar_position:4}}}}]);

package/doc_build/static/js/async/7535.f50f0fd1.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["7535"],{5408:function(e,n,s){s.r(n),s.d(n,{default:function(){return c}});var i=s(8093),d=s(5878),r=s(8078);function o(e){let n=Object.assign({h1:"h1",a:"a",h2:"h2",p:"p",strong:"strong",h3:"h3",pre:"pre",code:"code",div:"div",blockquote:"blockquote",ul:"ul",li:"li"},(0,d.ah)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.h1,{id:"quick-start",children:["Quick Start",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#quick-start",children:"#"})]}),"\n",(0,i.jsxs)(n.h2,{id:"3-minute-demo",children:["3 minute demo",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#3-minute-demo",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["Want to experience Modern.js Module in action? The only prerequisite you need is ",(0,i.jsx)(n.a,{href:"https://github.com/nodejs/Release",target:"_blank",rel:"noopener noreferrer",children:"Node.js LTS"})," and make sure your Node version is ",(0,i.jsx)(n.strong,{children:">= 16.0.0"}),".We recommend using the LTS version of Node.js 18."]}),"\n",(0,i.jsxs)(n.h3,{id:"create-new-project",children:["Create new project",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#create-new-project",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"If you want to create a complete Modern.js Module, you can execute the following command:"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"npx @modern-js/create your-project-dir-name\n"})}),"\n",(0,i.jsxs)(n.div,{className:"rspress-directive info",children:[(0,i.jsx)(n.div,{className:"rspress-directive-title",children:"INFO"}),(0,i.jsx)(n.div,{className:"rspress-directive-content",children:(0,i.jsxs)(n.p,{children:["Execute ",(0,i.jsx)(n.code,{children:"npx @modern-js/create -h"})," for more command line arguments\n"]})})]}),"\n",(0,i.jsx)(n.p,{children:"Next, in the issue interaction, follow the options below."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-text",children:"? Please select the type of project you want to create: Npm Module\n? Please fill in the project name: library\n? Please select the programming language: TS\n? Please select the package manager: pnpm\n"})}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["The project name is the value of the ",(0,i.jsx)(n.code,{children:'"name"'})," field in ",(0,i.jsx)(n.code,{children:"package.json"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Then the process of initializing the project will start. After the project directory and files are generated and the dependencies are installed, a complete module project is created."}),"\n",(0,i.jsxs)(n.p,{children:["We can start the project build directly with the ",(0,i.jsx)(n.code,{children:"pnpm build"})," command, and start the build in watching mode with the ",(0,i.jsx)(n.code,{children:"pnpm build --watch"})," command."]}),"\n",(0,i.jsxs)(n.h3,{id:"add-to-an-existing-project",children:["Add to an existing project",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#add-to-an-existing-project",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"From your shell, install the following dependencies in your project."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"@modern-js/module-tools"})}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:'"typescript"'})," (omitted if not a TypeScript project)"]}),"\n"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["If it's a TypeScript project, add the ",(0,i.jsx)(n.code,{children:'"typescript"'})," dependency."]}),"\n"]}),"\n","\n",(0,i.jsx)(r.SU,{command:"add @modern-js/module-tools typescript -D"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["For projects that use pnpm or the Yarn package manager, just replace npm. ",(0,i.jsx)(n.strong,{children:"pnpm is recommended"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Next, create the ",(0,i.jsx)(n.code,{children:"modern.config.(t|j)s"})," file in the root of the project."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\n\nexport default defineConfig({\n  plugins: [moduleTools()],\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Finally, add the command ",(0,i.jsx)(n.code,{children:'"build": "modern build"'})," to the project's ",(0,i.jsx)(n.code,{children:"package.json"})," file."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-json",children:'{\n  "scripts": {\n    "build": "modern build"\n  }\n}\n'})}),"\n",(0,i.jsxs)(n.p,{children:["If your project has a ",(0,i.jsx)(n.code,{children:"src/index.(js|jsx)"})," file or both ",(0,i.jsx)(n.code,{children:"src/index.(ts|tsx)"})," and ",(0,i.jsx)(n.code,{children:"tsconfig.json"})," files, then congratulations you can run the ",(0,i.jsx)(n.code,{children:"npm run build"})," command directly to build your project with Modern.js Module."]}),"\n",(0,i.jsxs)(n.h3,{id:"core-npm-package",children:["Core npm Package",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#core-npm-package",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"@modern-js/module-tools"})," is the core npm package of Modern.js Module, providing the following capabilities:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["It offers commonly used CLI commands such as ",(0,i.jsx)(n.code,{children:"modern dev"}),", ",(0,i.jsx)(n.code,{children:"modern build"}),", and more."]}),"\n",(0,i.jsx)(n.li,{children:"It integrates Modern.js Core, providing capabilities for configuration parsing, plugin loading, and more."}),"\n",(0,i.jsx)(n.li,{children:"It integrates esbuild and SWC, providing build capabilities."}),"\n",(0,i.jsxs)(n.li,{children:["It integrates some commonly used plugins, such as ",(0,i.jsx)(n.code,{children:"plugin-lint"}),", ",(0,i.jsx)(n.code,{children:"plugin-changeset"}),", and others."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"@modern-js/module-tools"})," is implemented based on the plugin system of Modern.js. Essentially, it is a plugin. Therefore, you need to register ",(0,i.jsx)(n.code,{children:"moduleTools"})," in the ",(0,i.jsx)(n.code,{children:"plugins"})," field of the configuration file:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\n\nexport default defineConfig({\n  plugins: [moduleTools()],\n});\n"})}),"\n",(0,i.jsxs)(n.h3,{id:"view-official-example",children:["View official example",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#view-official-example",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"If you want to see the complete project using the Modern.js Module, you can execute the following command"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"git clone https://github.com/web-infra-dev/modern-js-examples\ncd modern-js-examples/examples/basic-module\n\n## Execute the build.\npnpm build\n\n## Execute the build in listening mode.\npnpm build --watch\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"lets-get-started",children:["Let's get started",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#lets-get-started",children:"#"})]}),"\n",(0,i.jsx)(n.p,{children:"Choose your tutorial scenario..."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["I'm a beginner and need to learn ",(0,i.jsx)(n.a,{href:"/en/guide/basic/before-getting-started",children:"basic usage"})," of Modern.js Module."]}),"\n",(0,i.jsxs)(n.li,{children:["I have learned the basic usage of Modern.js Module and can learn ",(0,i.jsx)(n.a,{href:"/en/guide/advance/in-depth-about-build",children:"advanced usage"})," of Modern.js Module."]}),"\n",(0,i.jsxs)(n.li,{children:["I need to expand my project capabilities and need to learn how to develop ",(0,i.jsx)(n.a,{href:"/en/plugins/guide/getting-started",children:"plugins"})," for Modern.js Module."]}),"\n"]})]})}function t(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,d.ah)(),e.components);return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(o,{...e})}):o(e)}let c=t;t.__RSPRESS_PAGE_META={},t.__RSPRESS_PAGE_META["en%2Fguide%2Fintro%2Fgetting-started.mdx"]={toc:[{text:"3 minute demo",id:"3-minute-demo",depth:2},{text:"Create new project",id:"create-new-project",depth:3},{text:"Add to an existing project",id:"add-to-an-existing-project",depth:3},{text:"Core npm Package",id:"core-npm-package",depth:3},{text:"View official example",id:"view-official-example",depth:3},{text:"Let's get started",id:"lets-get-started",depth:2}],title:"Quick Start",frontmatter:{sidebar_position:3}}}}]);

package/doc_build/static/js/async/7584.c3b673fd.js

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

package/doc_build/static/js/async/7600.03d9da89.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["7600"],{7533:function(e,r,o){o.r(r),o.d(r,{default:function(){return t}});var n=o(8093),s=o(5878);function d(e){let r=Object.assign({h1:"h1",a:"a",h2:"h2",p:"p",code:"code",ul:"ul",li:"li",pre:"pre",ol:"ol",img:"img"},(0,s.ah)(),e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(r.h1,{id:"storybook-相关问题",children:["Storybook 相关问题",(0,n.jsx)(r.a,{className:"header-anchor","aria-hidden":"true",href:"#storybook-相关问题",children:"#"})]}),"\n",(0,n.jsxs)(r.h2,{id:"支持-storybook-v7",children:["支持 Storybook v7",(0,n.jsx)(r.a,{className:"header-anchor","aria-hidden":"true",href:"#支持-storybook-v7",children:"#"})]}),"\n",(0,n.jsx)(r.p,{children:"Storybook v7 目前已全面支持并已成为我们的推荐使用版本。"}),"\n",(0,n.jsxs)(r.h2,{id:"使用-storybook-addon-或者其他配置不生效",children:["使用 Storybook Addon 或者其他配置不生效",(0,n.jsx)(r.a,{className:"header-anchor","aria-hidden":"true",href:"#使用-storybook-addon-或者其他配置不生效",children:"#"})]}),"\n",(0,n.jsx)(r.p,{children:"Modern.js Module 目前使用的 Storybook 版本是 v6，如果使用了 v7 版本的 Addon 可能会出现插件不生效的情况。"}),"\n",(0,n.jsxs)(r.p,{children:["除了 Addon 以外，其他配置也可能会有区别。比如修改 ",(0,n.jsx)(r.code,{children:"preview.js"})," 配置文件的话，Storybook v6 与 v7 的写法也不相同："]}),"\n",(0,n.jsxs)(r.ul,{children:["\n",(0,n.jsxs)(r.li,{children:["v6：",(0,n.jsx)(r.a,{href:"https://storybook.js.org/docs/6.5/react/writing-stories/decorators#global-decorators",target:"_blank",rel:"noopener noreferrer",children:"文档链接"})]}),"\n",(0,n.jsxs)(r.li,{children:["v7：",(0,n.jsx)(r.a,{href:"https://storybook.js.org/docs/react/writing-stories/decorators#global-decorators",target:"_blank",rel:"noopener noreferrer",children:"文档链接"})]}),"\n"]}),"\n",(0,n.jsxs)(r.h2,{id:"cannot-find-module-react-dompackagejson",children:["Cannot find module 'react-dom/package.json'",(0,n.jsx)(r.a,{className:"header-anchor","aria-hidden":"true",href:"#cannot-find-module-react-dompackagejson",children:"#"})]}),"\n",(0,n.jsx)(r.p,{children:"在执行 Storybook 调试的时候，出现下面的报错提示："}),"\n",(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:"language-bash",children:"ERR! Error: Cannot find module 'react-dom/package.json'\n"})}),"\n",(0,n.jsxs)(r.p,{children:["解决办法：在项目中安装 ",(0,n.jsx)(r.code,{children:"react-dom"})," 依赖。"]}),"\n",(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:"language-json",children:'{\n    "devDependencies": {\n        "react-dom": "^17"\n    }\n}\n'})}),"\n",(0,n.jsxs)(r.h2,{id:"报错后看不到具体报错信息",children:["报错后，看不到具体报错信息",(0,n.jsx)(r.a,{className:"header-anchor","aria-hidden":"true",href:"#报错后看不到具体报错信息",children:"#"})]}),"\n",(0,n.jsx)(r.p,{children:"解决办法："}),"\n",(0,n.jsxs)(r.ol,{children:["\n",(0,n.jsxs)(r.li,{children:["找到 ",(0,n.jsx)(r.code,{children:"@storybook/core-server/dist/cjs/dev-server.js"})]}),"\n",(0,n.jsxs)(r.li,{children:["找到 ",(0,n.jsx)(r.code,{children:"var _await$Promise$all = await Promise.all([preview, manager"})," 这附近的代码。"]}),"\n",(0,n.jsx)(r.li,{children:"修改成："}),"\n"]}),"\n",(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:"language-js",children:"var _await$Promise$all = await Promise.all([\n    preview.catch(e => console.info(e)),\n    manager // TODO #13083 Restore this when compiling the preview is fast enough\n  // .then((result) => {\n  //   if (!options.ci && !options.smokeTest) openInBrowser(address);\n  //   return result;\n  // })\n  .catch(previewBuilder.bail)]),\n      _await$Promise$all2 = _slicedToArray(_await$Promise$all, 2),\n      previewResult = _await$Promise$all2[0],\n      managerResult = _await$Promise$all2[1]; // TODO #13083 Remove this when compiling the preview is fast enough\n"})}),"\n",(0,n.jsxs)(r.h2,{id:"couldnt-find-any-stories-is-your-storybook",children:["Couldn't find any stories is your Storybook",(0,n.jsx)(r.a,{className:"header-anchor","aria-hidden":"true",href:"#couldnt-find-any-stories-is-your-storybook",children:"#"})]}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.img,{src:"https://lf3-static.bytednsdoc.com/obj/eden-cn/shylnyhaeh7uldvivhn/screenshot-20230703-162111.png",alt:"storybook-error"})}),"\n",(0,n.jsx)(r.p,{children:"当在预览区域看到类似这样的报错提示的时候，首先可以打开一下浏览器的控制台，应该会有些报错信息。可以先根据报错信息来推断是不是编写代码里出现的问题导致 Storybook 无法正常运行。修复后，再次刷新查看是否正常。"}),"\n",(0,n.jsxs)(r.h2,{id:"storybook-添加-proxy-功能",children:["Storybook 添加 Proxy 功能",(0,n.jsx)(r.a,{className:"header-anchor","aria-hidden":"true",href:"#storybook-添加-proxy-功能",children:"#"})]}),"\n",(0,n.jsx)(r.p,{children:"Storybook 没有提供相关方案，不过 Storybook Issue 中有找到相关的解决办法。在 Modern.js Module 中，你可以："}),"\n",(0,n.jsxs)(r.ol,{children:["\n",(0,n.jsxs)(r.li,{children:["添加 ",(0,n.jsx)(r.code,{children:".storybook/middleware.js"})," 文件，并初始化下面的内容："]}),"\n"]}),"\n",(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:"language-js",children:"/* eslint-disable filenames/match-exported */\nmodule.exports = function expressMiddleware(router) {\n    // router is express router\n    // import { Router } from 'express'\n    // router = new Router();\n};\n"})}),"\n",(0,n.jsxs)(r.ol,{start:"2",children:["\n",(0,n.jsx)(r.li,{children:"添加 http-proxy-middleware 依赖"}),"\n",(0,n.jsx)(r.li,{children:"添加代理路由相关配置"}),"\n"]}),"\n",(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:"language-js",children:'/* eslint-disable filenames/match-exported */\nconst { createProxyMiddleware } = require("http-proxy-middleware");\n\nmodule.exports = function expressMiddleware (router) {\n  router.use(\'/api\', createProxyMiddleware({\n    target: "http://localhost:8000",\n    changeOrigin: true\n  }))\n}\n'})}),"\n",(0,n.jsxs)(r.p,{children:["相关 issue 链接：",(0,n.jsx)(r.a,{href:"https://github.com/storybookjs/storybook/issues/11551",target:"_blank",rel:"noopener noreferrer",children:"#11551"}),"。"]}),"\n",(0,n.jsxs)(r.h2,{id:"tailwind-css-在-storybook-中不生效",children:["Tailwind CSS 在 Storybook 中不生效",(0,n.jsx)(r.a,{className:"header-anchor","aria-hidden":"true",href:"#tailwind-css-在-storybook-中不生效",children:"#"})]}),"\n",(0,n.jsxs)(r.p,{children:["Modern.js Module 的 Storybook 构建能力由 ",(0,n.jsx)(r.a,{href:"https://rsbuild.dev/",target:"_blank",rel:"noopener noreferrer",children:"Rsbuild"})," 提供，由于 Rsbuild 的底层实现与 Modern.js Module 并未打通，因此， Modern.js Module 插件无法在 Storybook (Rsbuild) 中生效。"]}),"\n",(0,n.jsx)(r.p,{children:"解决办法：需要在 storybook 中单独注册 tailwindcss 的 PostCSS 插件。"}),"\n",(0,n.jsxs)(r.p,{children:["参考链接：",(0,n.jsx)(r.a,{href:"https://rsbuild.dev/zh/guide/basic/tailwindcss#%E9%85%8D%E7%BD%AE-postcss",target:"_blank",rel:"noopener noreferrer",children:"Rsbuild - tailwindcss"}),"。"]})]})}function i(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:r}=Object.assign({},(0,s.ah)(),e.components);return r?(0,n.jsx)(r,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}let t=i;i.__RSPRESS_PAGE_META={},i.__RSPRESS_PAGE_META["zh%2Fguide%2Ffaq%2Fstorybook.mdx"]={toc:[{text:"支持 Storybook v7",id:"支持-storybook-v7",depth:2},{text:"使用 Storybook Addon 或者其他配置不生效",id:"使用-storybook-addon-或者其他配置不生效",depth:2},{text:"Cannot find module 'react-dom/package.json'",id:"cannot-find-module-react-dompackagejson",depth:2},{text:"报错后，看不到具体报错信息",id:"报错后看不到具体报错信息",depth:2},{text:"Couldn't find any stories is your Storybook",id:"couldnt-find-any-stories-is-your-storybook",depth:2},{text:"Storybook 添加 Proxy 功能",id:"storybook-添加-proxy-功能",depth:2},{text:"Tailwind CSS 在 Storybook 中不生效",id:"tailwind-css-在-storybook-中不生效",depth:2}],title:"Storybook 相关问题",frontmatter:{}}}}]);

package/doc_build/static/js/async/7663.86b79735.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["7663"],{6957:function(e,n,l){l.r(n),l.d(n,{default:function(){return a}});var s=l(8093),o=l(5878),i=l(8078);function r(e){let n=Object.assign({h1:"h1",a:"a",div:"div",p:"p",h2:"h2",h3:"h3",pre:"pre",code:"code"},(0,o.ah)(),e.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.h1,{id:"babel-plugin",children:["Babel Plugin",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#babel-plugin",children:"#"})]}),"\n",(0,s.jsxs)(n.div,{className:"rspress-directive tip",children:[(0,s.jsx)(n.div,{className:"rspress-directive-title",children:"TIP"}),(0,s.jsx)(n.div,{className:"rspress-directive-content",children:(0,s.jsx)(n.p,{children:"Normally, we don't need to use Babel to transform our code, this plugin is only used as a downgrade."})})]}),"\n",(0,s.jsxs)(n.h2,{id:"quick-start",children:["Quick start",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#quick-start",children:"#"})]}),"\n",(0,s.jsxs)(n.h3,{id:"install",children:["Install",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#install",children:"#"})]}),"\n","\n",(0,s.jsx)(i.SU,{command:"add @modern-js/plugin-module-babel -D"}),"\n",(0,s.jsxs)(n.h3,{id:"register",children:["Register",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#register",children:"#"})]}),"\n",(0,s.jsx)(n.p,{children:"You can install the plugin with the following command:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\nimport { modulePluginBabel } from '@modern-js/plugin-module-babel';\n\nexport default defineConfig({\n  plugins: [moduleTools(), modulePluginBabel()],\n});\n"})}),"\n",(0,s.jsx)(n.p,{children:"You can also configure the registration via hooks, for example,\nif you need to bundle two files A and B at the same time and only need to use babel when bundle A:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\nimport { getBabelHook } from '@modern-js/plugin-module-babel';\n\nconst babelHook = getBabelHook({\n  // babel options\n});\n\nexport default defineConfig({\n  plugins: [moduleTools()],\n  buildConfig: [\n    {\n      hooks: [babelHook],\n      input: ['src/a.ts'],\n    },\n    {\n      input: ['src/b.ts'],\n    },\n  ],\n});\n"})}),"\n",(0,s.jsxs)(n.h2,{id:"config",children:["Config",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#config",children:"#"})]}),"\n",(0,s.jsxs)(n.p,{children:["See ",(0,s.jsx)(n.a,{href:"https://babeljs.io/docs/options",target:"_blank",rel:"noopener noreferrer",children:"babel options"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Here is an example with ",(0,s.jsx)(n.code,{children:"@babel/preset-env"})," configured"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"import { moduleTools, defineConfig } from '@modern-js/module-tools';\nimport { modulePluginBabel } from '@modern-js/plugin-module-babel';\n\nexport default defineConfig({\n  plugins: [\n    moduleTools(),\n    modulePluginBabel({\n      presets: [['@babel/preset-env']],\n    }),\n  ],\n});\n"})})]})}function d(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,o.ah)(),e.components);return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(r,{...e})}):r(e)}let a=d;d.__RSPRESS_PAGE_META={},d.__RSPRESS_PAGE_META["en%2Fplugins%2Fofficial-list%2Fplugin-babel.mdx"]={toc:[{text:"Quick start",id:"quick-start",depth:2},{text:"Install",id:"install",depth:3},{text:"Register",id:"register",depth:3},{text:"Config",id:"config",depth:2}],title:"Babel Plugin",frontmatter:{}}}}]);

package/doc_build/static/js/async/769.2bc1c7b7.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["769"],{4650:function(e,n,l){l.r(n),l.d(n,{default:function(){return c}});var i=l(8093),d=l(5878);function s(e){let n=Object.assign({h1:"h1",a:"a",p:"p",strong:"strong",ul:"ul",li:"li",pre:"pre",code:"code",h2:"h2",h3:"h3"},(0,d.ah)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.h1,{id:"构建-umd-产物",children:["构建 umd 产物",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#构建-umd-产物",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["umd 全称为 ",(0,i.jsx)(n.strong,{children:"Universal Module Definition"}),"，这种格式的 JS 文件可以运行在多个运行环境："]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"浏览器环境：基于 AMD 规范进行模块加载"}),"\n",(0,i.jsx)(n.li,{children:"Node.js 环境：基于 CommonJS 进行模块加载"}),"\n",(0,i.jsx)(n.li,{children:"其他情况：将模块挂载在全局对象上。"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"因此我们可以通过下面的方式，将项目的构建产物指定为 umd 产物："}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"export default defineConfig({\n  buildConfig: {\n    format: 'umd',\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.h2,{id:"umd-产物的第三方依赖处理",children:["umd 产物的第三方依赖处理",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#umd-产物的第三方依赖处理",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["在 ",(0,i.jsx)(n.a,{href:"/guide/advance/external-dependency",children:"「如何处理第三方依赖」"})," 章节中，我们知道可以通过 ",(0,i.jsx)(n.a,{href:"/api/config/build-config#autoexternal",children:(0,i.jsx)(n.code,{children:"autoExternals"})})," 和 ",(0,i.jsx)(n.a,{href:"/api/config/build-config#externals",children:(0,i.jsx)(n.code,{children:"externals"})})," API 来控制项目是否对第三方依赖打包。\n因此在构建 umd 产物的过程中，我们也可以这样使用："]}),"\n",(0,i.jsxs)(n.h3,{id:"示例",children:["示例",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#示例",children:"#"})]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["如果项目依赖了 ",(0,i.jsx)(n.code,{children:"react"}),"："]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-json",meta:'title="package.json"',children:'{\n  "dependencies": {\n    "react": "^17"\n  }\n}\n'})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"modern.config.ts"})," 配置："]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",meta:'title="modern.config.ts"',children:"export default defineConfig({\n  buildConfig: {\n    format: 'umd',\n    autoExternal: false,\n    externals: ['react'],\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["当源码中使用了 ",(0,i.jsx)(n.code,{children:"react"})," 依赖："]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-tsx",meta:'title="src/index.ts"',children:"import React from 'react';\nconsole.info(React);\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["此时产物中不会将 ",(0,i.jsx)(n.code,{children:"react"})," 代码打包到产物中："]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="dist/index.js"',children:"(function (global, factory) {\n  if (typeof module === 'object' && typeof module.exports === 'object')\n    factory(exports, require('react'));\n  else if (typeof define === 'function' && define.amd)\n    define(['exports', 'react'], factory);\n  else if (\n    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)\n  )\n    factory((global.index = {}), global.react);\n})(this, function (exports, _react) {\n  'use strict';\n  Object.defineProperty(exports, '__esModule', {\n    value: true,\n  });\n  _react = /*#__PURE__*/ _interopRequireDefault(_react);\n  function _interopRequireDefault(obj) {\n    return obj && obj.__esModule\n      ? obj\n      : {\n          default: obj,\n        };\n  }\n  console.info(_react.default);\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["通过上面的例子我们知道，当使用 ",(0,i.jsx)(n.code,{children:"autoExternal"})," 和 ",(0,i.jsx)(n.code,{children:"externals"})," API 后："]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["在 Node.js 环境下，可以通过 ",(0,i.jsx)(n.code,{children:"require('react')"})," 获取 react 依赖。"]}),"\n",(0,i.jsxs)(n.li,{children:["在 浏览器环境下，可以通过 ",(0,i.jsx)(n.code,{children:"global.react"})," 获取 react 依赖。"]}),"\n"]}),"\n",(0,i.jsxs)(n.h3,{id:"三方依赖的全局变量名称",children:["三方依赖的全局变量名称",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#三方依赖的全局变量名称",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["然而在浏览器环境下，获取第三方依赖的时候，",(0,i.jsx)(n.strong,{children:"全局变量名称不一定与依赖名称完全相同"}),"，此时就要使用 ",(0,i.jsx)(n.a,{href:"/api/config/build-config#umdglobals",children:(0,i.jsx)(n.code,{children:"buildConfig.umdGlobals"})})," API。"]}),"\n",(0,i.jsxs)(n.p,{children:["还是使用之前的例子，当 ",(0,i.jsx)(n.code,{children:"react"})," 依赖以 ",(0,i.jsx)(n.code,{children:"windows.React"})," 或者 ",(0,i.jsx)(n.code,{children:"global.React"})," 全局变量的形式存在于浏览器环境下，那么此时："]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"modern.config.ts"})," 配置："]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"export default defineConfig({\n  buildConfig: {\n    format: 'umd',\n    umdGlobals: {\n      react: 'React',\n    },\n  },\n});\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["当源码中使用了 ",(0,i.jsx)(n.code,{children:"react"})," 依赖："]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-tsx",meta:'title="src/index.ts"',children:"import React from 'react';\nconsole.info(React);\n"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"此时我们会看到这样的产物代码："}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="dist/index.js"',children:"(function (global, factory) {\n  if (typeof module === 'object' && typeof module.exports === 'object')\n    factory();\n  else if (typeof define === 'function' && define.amd) define([], factory);\n  else if (\n    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)\n  )\n    factory();\n})(this, function () {\n  // ...\n  // libuild:globals:react\n  var require_react = __commonJS({\n    'libuild:globals:react'(exports, module1) {\n      module1.exports = Function('return this')()['React'];\n    },\n  });\n  // src/index.ts\n  var import_react = __toESM(require_react());\n  console.info(import_react.default);\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["此时项目就可以运行在浏览器中，并使用存在于全局对象上的 ",(0,i.jsx)(n.code,{children:"React"})," 变量了。"]}),"\n",(0,i.jsxs)(n.h2,{id:"更改项目的全局变量名称",children:["更改项目的全局变量名称",(0,i.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#更改项目的全局变量名称",children:"#"})]}),"\n",(0,i.jsxs)(n.p,{children:["当我们将下面的代码打包成 umd 产物并运行在浏览器的时候，我们可以通过 ",(0,i.jsx)(n.code,{children:"window.index"})," 来使用该模块。"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",meta:'title="./src/index.ts"',children:"export default () => {\n  console.info('hello world');\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"默认情况下，以源码文件名称作为该模块在浏览器里全局变量的名称"}),"。对于上面的例子，其产物内容如下："]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="./dist/index.js"',children:"(function (global, factory) {\n  if (typeof module === 'object' && typeof module.exports === 'object')\n    factory(exports);\n  else if (typeof define === 'function' && define.amd)\n    define(['exports'], factory);\n  else if (\n    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)\n  )\n    factory((global.index = {}));\n})(this, function (exports) {\n  //...\n});\n"})}),"\n",(0,i.jsxs)(n.p,{children:["如果需要修改它，则需要使用 ",(0,i.jsx)(n.a,{href:"/api/config/build-config#umdmodulename",children:(0,i.jsx)(n.code,{children:"buildConfig.umdModuleName"})})," API。"]}),"\n",(0,i.jsx)(n.p,{children:"当使用该 API 后："}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"export default defineConfig({\n  buildConfig: {\n    format: 'umd',\n    umdModuleName: 'myLib',\n  },\n});\n"})}),"\n",(0,i.jsx)(n.p,{children:"此时构建产物的内容为："}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",meta:'title="./dist/index.js"',children:"(function (global, factory) {\n  if (typeof module === 'object' && typeof module.exports === 'object')\n    factory(exports);\n  else if (typeof define === 'function' && define.amd)\n    define(['exports'], factory);\n  else if (\n    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)\n  )\n    factory((global.myLib = {}));\n})(this, function (exports) {\n  //...\n});\n"})})]})}function r(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,d.ah)(),e.components);return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(s,{...e})}):s(e)}let c=r;r.__RSPRESS_PAGE_META={},r.__RSPRESS_PAGE_META["zh%2Fguide%2Fadvance%2Fbuild-umd.mdx"]={toc:[{text:"umd 产物的第三方依赖处理",id:"umd-产物的第三方依赖处理",depth:2},{text:"示例",id:"示例",depth:3},{text:"三方依赖的全局变量名称",id:"三方依赖的全局变量名称",depth:3},{text:"更改项目的全局变量名称",id:"更改项目的全局变量名称",depth:2}],title:"构建 umd 产物",frontmatter:{sidebar_position:5}}}}]);