{"id":10006509,"date":"2022-09-16T20:36:42","date_gmt":"2022-09-16T12:36:42","guid":{"rendered":"https:\/\/ityet.com\/?p=10006509"},"modified":"2022-09-16T20:36:42","modified_gmt":"2022-09-16T12:36:42","slug":"taro%e6%ba%90%e7%a0%81-%e9%a1%b9%e7%9b%aebuild%e4%b8%80%e4%b8%aaweapp%e7%9a%84%e8%bf%87%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/itmax.cn\/?p=10006509","title":{"rendered":"Taro\u6e90\u7801-\u9879\u76eebuild\u4e00\u4e2aweapp\u7684\u8fc7\u7a0b"},"content":{"rendered":"

\u5f15\u8a00<\/h3>\n

\u57fa\u4e8eTaro3.5.5<\/code><\/strong>
\u6b64\u524d\uff0c\u6211\u4eec\u5b66\u4e60\u4e86cli\u521b\u5efa\u4e00\u4e2aTaro\u9879\u76ee<\/a>\uff0c\u5e76\u5728packages\/taro-cli\/bin<\/strong>\u6587\u4ef6\u5939\u4e0b\u521b\u5efa\u4e86\u7b80\u5355\u7684Taro\u9879\u76eeappname<\/code>\uff0c\u63a5\u7740\u770b\u4e00\u4e0b\u7528Taro\u9879\u76ee\u53bbbuild<\/code>\u4e00\u4e2a\u5fae\u4fe1\u5c0f\u7a0b\u5e8fweapp<\/a>\u7684\u8fc7\u7a0b
\"image.png\"<\/p>\n

\n

\u521b\u5efa\u7684\u9879\u76ee<\/h3>\n

\u6253\u5f00\u6b64\u9879\u76ee\uff0c\u5982\u679c\u4f7f\u7528\u8fc7taro\u7684\u5f00\u53d1\u8fc7\u5c0f\u7a0b\u5e8f\u7684\u53ef\u4ee5\u5f88\u719f\u6089\uff0c\u5305\u62ec\u914d\u7f6econfig\u3001src\u7b49\u7b49<\/code><\/p>\n

\"image.png\"<\/p>\n

\u6253\u5f00\u6211\u4eec\u7684\u9996\u9875\u6587\u4ef6pages\/index\/index.tsx<\/p>\n

...\n\nexport default class Index extends Component<PropsWithChildren> {\n  ...\n  render () {\n    return (\n      <View className='index'>\n        <Text>\u8fd9\u662f\u4e00\u4e2aTaro\u9879\u76ee<\/Text>\n      <\/View>\n    )\n  }\n}\n<\/code><\/pre>\n
\u7528taro \uff08dev\u6216\u8005build\uff09<\/code>\u547d\u4ee4\u542f\u52a8\u8fd9\u4e2a\u9879\u76ee\u4f5c\u4e3a\u5fae\u4fe1\u5c0f\u7a0b\u5e8f<\/p>\n
\"image.png\"<\/p>\n
\n
build\u548cdev<\/h3>\n
\u6253\u5f00\u521b\u5efa\u7684taro\u9879\u76ee\u4e0b\u7684package.json<\/code><\/p>\n
  "scripts": {\n    "build:weapp": "taro build --type weapp",\n    ...\n    "dev:weapp": "npm run build:weapp -- --watch",\n    ...\n  },<\/code><\/pre>\n
dev<\/code>\u547d\u4ee4\u76f8\u8f83\u4e8ebuild<\/code>\u547d\u4ee4\u5c31\u662f\u5728build<\/code>\u547d\u4ee4\u540e\u591a\u52a0\u4e86--watch<\/code>\uff0c\u4ee5\u6b64\u6765\u533a\u5206\u662f\u5f00\u53d1\u76d1\u542c\u70ed\u52a0\u8f7d<\/code>\u8fd8\u662f\u6253\u5305\u9879\u76ee<\/code>\uff0cdev<\/code>\u547d\u4ee4\u53ef\u4ee5\u4e5f\u53ef\u4ee5\u76f4\u63a5\u8fd9\u4e48\u5199<\/p>\n
 "dev:weapp": "taro build --type weapp --watch",<\/code><\/pre>\n
\u6253\u5370\u63a5\u53d7\u5230\u7684\u5185\u7f6e\u547d\u4ee4
dev\uff1a
\"image.png\"
build\uff1a
\"image.png\"<\/p>\n
\n
Cli<\/h3>\n
packages\/taro-cli\/src\/cli.ts
\u4e0ecli\u521b\u5efa\u9879\u76ee<\/a>\u7684init<\/code>\u547d\u4ee4\u4e00\u6837\uff0cbuild<\/code>\u7684\u5165\u53e3\u4e5f\u662fpackages\/taro-cli\/bin\/taro\uff0c\u5728\u5165\u53e3\u6587\u4ef6\u91cc\u6267\u884ccli.run()<\/code>\uff0cCli\u7684\u4f5c\u7528\u5c31\u662f\u63a5\u53d7\u5185\u7f6e\u547d\u4ee4\u3001\u5206\u89e3\u5185\u7f6e\u547d\u4ee4\u3001\u8bbe\u7f6e\u73af\u5883\u53d8\u91cf\u3001\u9488\u5bf9\u4e0d\u540c\u7684\u5185\u7f6e\u547d\u4ee4\u6ce8\u518c\u5bf9\u5e94\u7684\u547d\u4ee4\u63d2\u4ef6\u3002<\/strong><\/p>\n
\u5728build:weapp<\/code>\u4e4b\u540e\u5206\u89e3\u5185\u7f6e\u547d\u4ee4\u4e4b\u540e\u8fdb\u884c\u73af\u5883\u53d8\u91cf\u7684\u8bbe\u7f6e<\/strong><\/p>\n
      \/\/ \u8bbe\u7f6e\u73af\u5883\u53d8\u91cf\n      process.env.NODE_ENV ||= args.env\n      if (process.env.NODE_ENV === 'undefined' && (command === 'build' || command === 'inspect')) {\n        \/\/ \u6839\u636ewatch\u5224\u65ad\u662f\u5f00\u53d1\u73af\u5883development\u8fd8\u662f\u751f\u4ea7\u73af\u5883production\n        process.env.NODE_ENV = (args.watch ? 'development' : 'production')\n      }\n      args.type ||= args.t\n      if (args.type) {\n        \/\/ \u9879\u76ee\u7684\u7c7b\u578b\uff1aweapp\u3001tt\u3001qq\u3001h5\u3001rn...\n        process.env.TARO_ENV = args.type\n      }\n      \n      if (typeof args.plugin === 'string') {\n        \/\/ plugin\u5c0f\u7a0b\u5e8f\u63d2\u4ef6\n        process.env.TARO_ENV = 'plugin'\n      }\n      \/\/ \u6211\u4eecbuild\u4e00\u4e2aweapp\u90a3\u5c31\u662fprocess.env.TARO_ENV = 'weapp'<\/code><\/pre>\n
\u5b9e\u4f8b\u5316Kernel<\/code>\u5e76\u628apresets\/commands\/build.ts<\/code>\u547d\u4ee4\u63d2\u4ef6\u6302\u8f7d\u5230kernel\u4e0a<\/p>\n
      \/\/ command\u662f\u5206\u89e3build\u5185\u7f6e\u547d\u4ee4\u5f97\u5230\u7684'build'\n      \/\/ build\u63d2\u4ef6\u8def\u5f84\n      const commandPlugins = fs.readdirSync(commandsPath)\n      const targetPlugin = `${command}.js`\n      ...\n      \/\/ \u5b9e\u4f8b\u5316Kernel\n      const kernel = new Kernel({\n        appPath,\n        presets: [\n          path.resolve(__dirname, '.', 'presets', 'index.js')\n        ],\n        plugins: []\n      })\n      kernel.optsPlugins ||= []\n\n      \/\/ \u6ce8\u518cbuild\u63d2\u4ef6\u6302\u8f7d\u5230kernel\u4e0a\n      if (commandPlugins.includes(targetPlugin)) {\n        kernel.optsPlugins.push(path.resolve(commandsPath, targetPlugin))\n      }<\/code><\/pre>\n
\u9488\u5bf9\u4e0d\u540c\u7684\u5185\u7f6e\u5e73\u53f0\u6ce8\u518c\u5bf9\u5e94\u7684\u7aef\u5e73\u53f0\u63d2\u4ef6\uff0c\u6211\u4eecbuild<\/code>\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f<\/code><\/p>\n
    ...\n    let platform = args.type \/\/ weapp\n    ...\n    \/\/ \u9488\u5bf9\u4e0d\u540c\u7684\u5185\u7f6e\u5e73\u53f0\u6ce8\u518c\u5bf9\u5e94\u7684\u7aef\u5e73\u53f0\u63d2\u4ef6\n    switch (platform) {\n      case 'weapp':\n      case 'alipay':\n      case 'swan':\n      case 'tt':\n      case 'qq':\n      case 'jd':\n        \/\/ \u6ce8\u518cweapp\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u63d2\u4ef6\n        \/\/ kernel.optsPlugins.push(`@tarojs\/plugin-platform-weapp`)\n        kernel.optsPlugins.push(`@tarojs\/plugin-platform-${platform}`)\n        break\n      default: {\n        \/\/ h5, rn, plugin\n        \/\/ \u83b7\u53d6 taro-cli\/src\/presets\/platforms\u7684\u6587\u4ef6\u76ee\u5f55\n        const platformPlugins = fs.readdirSync(platformsPath)\n        const targetPlugin = `${platform}.js`\n        \/\/ \u5982\u679c\u76ee\u5f55\u4e2d\u6709\u5bf9\u5e94\u7684h5\u6216rn\u6216plugin\u63d2\u4ef6\n        if (platformPlugins.includes(targetPlugin)) {\n          \/\/ \u6ce8\u518c\u5bf9\u5e94\u7684\u63d2\u4ef6\n          kernel.optsPlugins.push(path.resolve(platformsPath, targetPlugin))\n        }\n        break\n      }\n    }<\/code><\/pre>\n
\u6839\u636eframework<\/code>\u6ce8\u518c\u5bf9\u5e94\u7684\u63d2\u4ef6\u8fd9\u91cc\u6709vue\u3001vue3\u3001react<\/code>\uff0c\u6211\u4eec\u521b\u5efa\u9879\u76ee\u7684\u65f6\u5019\u9009\u62e9\u7684\u662freact<\/code><\/p>\n
   const framework = kernel.config?.initialConfig.framework\n   switch (framework) {\n     case 'vue':\n       kernel.optsPlugins.push('@tarojs\/plugin-framework-vue2')\n       break\n     case 'vue3':\n       kernel.optsPlugins.push('@tarojs\/plugin-framework-vue3')\n       break\n     default:\n       kernel.optsPlugins.push('@tarojs\/plugin-framework-react')\n       break\n   }<\/code><\/pre>\n
\u5c06\u6240\u6709\u7684\u63d2\u4ef6\u548c\u63d2\u4ef6\u96c6\u90fd\u6ce8\u518c\u5b8c\u4e4b\u540e\u6211\u4eec\u6253\u5370kernel<\/code>\u53ef\u4ee5\u770b\u5230\u6211\u4eec\u6ce8\u518c\u4e86\u4e00\u4e2a\u63d2\u4ef6\u96c6\uff0c\u4e09\u4e2a\u63d2\u4ef6\uff0c\u4e09\u4e2a\u63d2\u4ef6\u96c6\u5206\u522b\u662fbuild<\/code>\u3001weapp<\/code>\u4ee5\u53careact<\/code><\/p>\n
\"image.png\"<\/p>\n
\u4e4b\u540e\u6267\u884ccustomCommand<\/code>\u51fd\u6570\u5f00\u8c03\u7528kernel.run()<\/code><\/strong><\/p>\n
\/\/ packages\/taro-cli\/src\/cli.ts\ncustomCommand(command, kernel, {\n  ...\n})    <\/code><\/pre>\n
\/\/ packages\/taro-cli\/src\/commands\/customCommand.ts\nexport default function customCommand (\n  command: string,\n  kernel: Kernel,\n  args: { _: string[], [key: string]: any }\n) {\n  if (typeof command === 'string') {\n   ...\n    kernel.run({\n      ...\n    })\n  }\n}  <\/code><\/pre>\n
Kernel<\/code>\u505a\u4e86\u54ea\u4e9b\u4e8b\u60c5\u53ef\u4ee5\u5728\u521b\u5efa\u4e00\u4e2aTaro\u9879\u76ee<\/a>\u67e5\u770b<\/p>\n
\n
\u6267\u884c\u94a9\u5b50<\/h3>\n
\u5728Kernel<\/code>\u7684run<\/code>\u65b9\u6cd5\u4e2d\uff0c\u6267\u884cmodifyRunnerOpts<\/code>\u94a9\u5b50<\/p>\n
    \/\/ packages\/taro-service\/src\/Kernel.ts\n    if (opts?.options?.platform) {\n      opts.config = this.runWithPlatform(opts.options.platform)\n      await this.applyPlugins({\n        name: 'modifyRunnerOpts', \/\/ \u6279\u6539webpack\u53c2\u6570\n        opts: {\n          opts: opts?.config\n        }\n      })\n    }<\/code><\/pre>\n
  \/\/ @tarojs\/plugin-framework-react \u7528\u4e8e\u652f\u6301\u7f16\u8bd1React\/PReact\/Nerv\n  \/\/ \u6279\u6539webpack\u53c2\u6570\n  ctx.modifyRunnerOpts(({ opts }) => {\n    ...\n  })\n})<\/code><\/pre>\n
\u6267\u884cbuild<\/code>\u94a9\u5b50\uff0c\u5728build<\/code>\u94a9\u5b50\u91cc\u6267\u884cweapp<\/code>\u94a9\u5b50<\/p>\n
 \/\/ packages\/taro-service\/src\/Kernel.ts\n await this.applyPlugins({\n   name, \/\/ name: 'build'\n   opts\n })<\/code><\/pre>\n
   \/\/ packages\/taro-cli\/src\/presets\/commonds\/build.ts\n   await ctx.applyPlugins(hooks.ON_BUILD_START) \/\/ build_start\n   await ctx.applyPlugins({\n     name: platform, \/\/ name: 'weapp' \/\/ \u6267\u884cweapp\u94a9\u5b50\n     opts: {\n       config: {\n          ...\n          \/\/ \u4f20\u5165\u591a\u4e2a\u94a9\u5b50\uff1amodifyWebpackChain(\u94fe\u5f0f\u4fee\u6539webpack\u914d\u7f6e)\u3001modifyBuildAssets...\n          \/\/ \u5728packages\/taro-service\/src\/platform-plugin-base.ts\u8c03\u7528mini-runner\u6216webpack5-runner\n          \/\/ \u5728@tarojs\/webpack5-runner\u6216@tarojs\/mini-runner\u4f5c\u4e3a\u914d\u7f6e\u9879\u6267\u884c\u94a9\u5b50\n          async modifyWebpackChain(chain, webpack, data){\n            await ctx.applyPlugins({\n              name: hooks.MODIFY_WEBPACK_CHAIN, \/\/ name: 'modifyWebpackChain'\n              ...\n            })\n          },\n          async modifyBuildAssets (assets, miniPlugin) {\n            await ctx.applyPlugins({\n              name: hooks.MODIFY_BUILD_ASSETS, \/\/ name: 'modifyBuildAssets'\n              ...\n            })\n          },\n          ...\n       }\n     }\n   })<\/code><\/pre>\n
\/\/ @tarojs\/plugin-platform-weapp \u7528\u4e8e\u652f\u6301\u7f16\u8bd1\u4e3a\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\nexport default (ctx: IPluginContext, options: IOptions) => {\n  ctx.registerPlatform({\n    name: 'weapp',\n    useConfigName: 'mini',\n    async fn ({ config }) {\n      const program = new Weapp(ctx, config, options || {})\n      await program.start()\n    }\n  })\n}<\/code><\/pre>\n
Weapp<\/code>\u7c7b\u57fa\u7840\u4e8eTaroPlatformBase<\/code>\uff08packages\/taro-service\/src\/platform-plugin-base.ts\uff09\uff0c\u8c03\u7528program.start()<\/code><\/p>\n
  \/\/ packages\/taro-service\/src\/platform-plugin-base.ts\n  \/**\n   * \u8c03\u7528 mini-runner \u5f00\u542f\u7f16\u8bd1\n   *\/\n  public async start () {\n    await this.setup()\n    await this.build()\n  }<\/code><\/pre>\n
  \/\/ packages\/taro-service\/src\/platform-plugin-base.ts\n  \/**\n   * 1. \u6e05\u7a7a dist \u6587\u4ef6\u5939\n   * 2. \u8f93\u51fa\u7f16\u8bd1\u63d0\u793a\n   * 3. \u751f\u6210 project.config.json\n   *\/\n  private async setup () {\n    await this.setupTransaction.perform(this.setupImpl, this)\n    this.ctx.onSetupClose?.(this)\n  }<\/code><\/pre>\n
  \/\/ packages\/taro-service\/src\/platform-plugin-base.ts\n  \/**\n   * \u8c03\u7528 runner \u5f00\u59cb\u7f16\u8bd1\n   * @param extraOptions \u9700\u8981\u989d\u5916\u4f20\u5165 @tarojs\/mini-runner\u6216@tarojs\/webpack5-runner \u7684\u914d\u7f6e\u9879\n   *\/\n  private async build (extraOptions = {}) {\n    this.ctx.onBuildInit?.(this)\n    await this.buildTransaction.perform(this.buildImpl, this, extraOptions)\n  }\n<\/code><\/pre>\n
\n
\u5f00\u59cb\u7f16\u8bd1<\/h3>\n
Weapp<\/code>\u7c7b\uff08packages\/taro-weapp\/src\/index.ts\uff09\u662f\u57fa\u7840\u81eaTaroPlatformBase<\/code>\u7c7b\uff08packages\/taro-service\/src\/platform-plugin-base.ts\uff09\uff0cweapp.start()<\/code>\u65b9\u6cd5\u4e5f\u662f\u7ee7\u627fTaroPlatformBase<\/code>\u7c7b<\/p>\n
start\u65b9\u6cd5<\/h4>\n
  \/\/ packages\/taro-service\/src\/platform-plugin-base.ts\n  \/**\n   * \u8c03\u7528 mini-runner \u5f00\u542f\u7f16\u8bd1\n   *\/\n  public async start () {\n    await this.setup() \/\/ 1.\u6e05\u7a7a dist \u6587\u4ef6\u5939\uff0c2. \u8f93\u51fa\u7f16\u8bd1\u63d0\u793a\uff0c3. \u751f\u6210 project.config.json\n    await this.build() \/\/ \u8c03\u7528 mini-runner \u5f00\u59cb\u7f16\u8bd1\n  }<\/code><\/pre>\n
setup\u65b9\u6cd5<\/h4>\n
  \/\/ packages\/taro-service\/src\/platform-plugin-base.ts\n  private async setup () {\n    \/\/ perform\u65b9\u6cd5\u662fTransaction\u7684\u65b9\u6cd5\u8fd9\u8def\u7684\u4f5c\u7528\u5c31\u662f\u6267\u884cthis.setupImpl\u65b9\u6cd5\uff0cthis.setupImpl()\n    await this.setupTransaction.perform(this.setupImpl, this)\n    this.ctx.onSetupClose?.(this)\n  }\n<\/code><\/pre>\n
Transaction\u7684perform\u65b9\u6cd5<\/h4>\n
\/\/ packages\/taro-service\/src\/platform-plugin-base.ts\nclass Transaction {\n  ...\n  async perform (fn: (...args: any[]) => void, scope: TaroPlatformBase, ...args) {\n    ...\n    \/\/ \u8fd9\u91cc\u5c31\u662f\u6267\u884cthis.setupImpl()\uff0c\u5185\u90e8\u8fd8\u505a\u4e86\u4e00\u4e9b\u72b6\u6001\u7ba1\u7406\uff08\u611f\u89c9\u6ca1\u4ec0\u4e48\u7528\uff0c\u5220\u4e86\u4ee5\u540e\u6267\u884c\u7684\u6548\u679c\u4e0d\u53d8\uff09\n    \/\/ \u4e4b\u540esetbuild\u7684\u65f6\u5019\u5c31\u662fthis.buildImpl(extraOptions)\n    await fn.call(scope, ...args)\n    ...\n  }\n  ...\n}<\/code><\/pre>\n
setupImpl\u65b9\u6cd5<\/h4>\n
 \/\/ packages\/taro-service\/src\/platform-plugin-base.ts\n private setupImpl () {\n    const { needClearOutput } = this.config\n    if (typeof needClearOutput === 'undefined' || !!needClearOutput) {\n      \/\/ \u5982\u679cdist\u6587\u4ef6\u5b58\u5728\uff0c\u6e05\u7a7adist\u6587\u4ef6\u5939\n      this.emptyOutputDir()\n    }\n    \/\/ \u8f93\u51fa\u7f16\u8bd1\u63d0\u793a\n    this.printDevelopmentTip(this.platform)\n    if (this.projectConfigJson) {\n      \/\/ \u751f\u6210 project.config.json\n      this.generateProjectConfig(this.projectConfigJson)\n    }\n    if (this.ctx.initialConfig.logger?.quiet === false) {\n      const { printLog, processTypeEnum } = this.ctx.helper\n      printLog(processTypeEnum.START, '\u5f00\u53d1\u8005\u5de5\u5177-\u9879\u76ee\u76ee\u5f55', `${this.ctx.paths.outputPath}`)\n    }\n  }<\/code><\/pre>\n
build\u65b9\u6cd5<\/h4>\n
 \/\/ packages\/taro-service\/src\/platform-plugin-base.ts\n private async build (extraOptions = {}) {\n    this.ctx.onBuildInit?.(this)\n    \/\/ \u4e0esetup\u65b9\u6cd5\u4e00\u6837\u8fd9\u91cc\u5c31\u662fthis.buildImpl(extraOptions);\n    await this.buildTransaction.perform(this.buildImpl, this, extraOptions)\n  }<\/code><\/pre>\n
buildImpl\u65b9\u6cd5<\/h4>\n
  \/\/ packages\/taro-service\/src\/platform-plugin-base.ts\n  private async buildImpl (extraOptions) {\n    \/\/ \u83b7\u53d6\u66b4\u9732\u7ed9@tarojs\/cli\u7684\u5c0f\u7a0b\u5e8f\/H5 Webpack\u542f\u52a8\u5668\n    const runner = await this.getRunner()\n    \/\/ options\u914d\u7f6e\n    const options = this.getOptions(Object.assign({\n      runtimePath: this.runtimePath,\n      taroComponentsPath: this.taroComponentsPath\n    }, extraOptions))\n    await runner(options) \/\/ \u6267\u884c\u542f\u52a8\u5668\u5e76\u4f20\u5165\u7b2c\u4e8c\u4e2a\u53c2\u6570options runner(appPath, options)\n  }<\/code><\/pre>\n
getRunner\u65b9\u6cd5<\/h4>\n
  \/\/ packages\/taro-service\/src\/platform-plugin-base.ts\n  \/**\n   * \u8fd4\u56de\u5f53\u524d\u9879\u76ee\u5185\u7684 @tarojs\/mini-runner \u5305\n   *\/\n  protected async getRunner () {\n    const { appPath } = this.ctx.paths\n    const { npm } = this.helper\n    \/\/ \u83b7\u53d6\u5305\u540d\n    let runnerPkg: string\n    switch (this.compiler) {\n      case 'webpack5':\n        runnerPkg = '@tarojs\/webpack5-runner'\n        break\n      default:\n        runnerPkg = '@tarojs\/mini-runner'\n    }\n    \/\/ \u66b4\u9732\u7ed9 `@tarojs\/cli` \u7684\u5c0f\u7a0b\u5e8f\/H5 Webpack \u542f\u52a8\u5668\n    \/\/ \u83b7\u53d6\u542f\u52a8\u5668\u5728node_modules\u91cc\u4e24\u4e2a\u53c2\u6570\u5305\u540d\u548c\u5305\u6240\u5728\u7684\u6839\u76ee\u5f55\u8def\u5f84\n    const runner = await npm.getNpmPkg(runnerPkg, appPath)\n    return runner.bind(null, appPath) \/\/ \u542f\u52a8\u5668\u4f20\u5165\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u9879\u76ee\u8def\u5f84 runner(appPath, options)\n  }<\/code><\/pre>\n
\u542f\u52a8\u5668\u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570options<\/code>\u914d\u7f6e\u6253\u5370\u5982\u4e0b\uff1a<\/p>\n
{\n  entry: { ... }, \/\/\u5165\u53e3appname\/src\/app.ts\n  alias: {}, \/\/ \u522b\u540d\u50cf@src\u4ee3\u8868\u8def\u5f84src\u76ee\u5f55\u4e0b\n  copy: { patterns: [], options: {} },\n  sourceRoot: 'src', \/\/ \u5b58\u653e\u4e3b\u4ee3\u7801\u6839\n  outputRoot: 'dist',\/\/ \u9879\u76ee\u6839\n  platform: 'weapp', \/\/ \u9879\u76ee\u7c7b\u578b\n  framework: 'react', \/\/ \u5e73\u53f0\n  compiler: {\n    type: 'webpack5',\n    prebundle: { include: [Array], exclude: [Array], esbuild: [Object] }\n  },\/\/ \u6279\u6539webpack\u53c2\u6570\n  cache: { enable: true }, \/\/ webpack\u6301\u4e45\u5316\u7f13\u5b58\u914d\u7f6e\u9879\u76ee\u7684config\u914d\u7f6e\u7684\n  logger: undefined,\n  baseLevel: undefined,\n  csso: undefined,\n  sass: undefined,\n  uglify: undefined,\n  plugins: [], \/\/ \u81ea\u5b9a\u4e49\u7684\u63d2\u4ef6\n  projectName: 'appname',\n  env: { NODE_ENV: '"production"' },\n  defineConstants: {},\n  designWidth: 750,\n  deviceRatio: { '640': 1.17, '750': 1, '828': 0.905 },\n  projectConfigName: undefined,\n  jsMinimizer: undefined, \/\/ js\u538b\u7f29\u5668\n  cssMinimizer: undefined, \/\/ css\u538b\u7f29\u5668\n  terser: undefined,\n  esbuild: undefined,\n  postcss: {\n    pxtransform: { enable: true, config: {} },\n    url: { enable: true, config: [Object] },\n    cssModules: { enable: false, config: [Object] }\n  }, \/\/ \u6837\u5f0f\u5904\u7406\u5668\n  isWatch: false,\n  mode: 'production',\n  blended: false,\n  isBuildNativeComp: false,\n  \/\/ \u4e00\u7cfb\u5217\u94a9\u5b50\n  modifyWebpackChain: [Function: modifyWebpackChain],\n  modifyBuildAssets: [Function: modifyBuildAssets],\n  modifyMiniConfigs: [Function: modifyMiniConfigs],\n  modifyComponentConfig: [Function: modifyComponentConfig],\n  onCompilerMake: [Function: onCompilerMake],\n  onParseCreateElement: [Function: onParseCreateElement],\n  onBuildFinish: [Function: onBuildFinish],\n  nodeModulesPath: '...\/taro\/packages\/taro-cli\/bin\/appname\/node_modules',\n  buildAdapter: 'weapp',\n  globalObject: 'wx',\n  fileType: {\n    templ: '.wxml',\n    style: '.wxss',\n    config: '.json',\n    script: '.js',\n    xs: '.wxs'\n  },\/\/ \u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u6587\u4ef6\u7c7b\u578b\n  template: Template {...}, \/\/ weapp\u4ee3\u7801\u6a21\u677fRecursiveTemplate\/UnRecursiveTemplate\uff08@tarojs\/shared\/src\/template.ts\uff09\n  runtimePath: '@tarojs\/plugin-platform-weapp\/dist\/runtime',\/\/ \u901a\u8fc7webpack\u6ce8\u5165\uff0c\u5feb\u901f\u7684dom\u3001api...\u751f\u6210\u5668\uff08react -> weapp\uff09\n  taroComponentsPath: '@tarojs\/plugin-platform-weapp\/dist\/components-react'\/\/ react\u7f16\u8bd1weapp\n}\n<\/code><\/pre>\n
\u7b80\u5355\u7684\u770b\u4e00\u4e0bnpm.getNpmPkg<\/code>
packages\/taro-helper\/src\/npm.ts<\/p>\n
\/\/ packages\/taro-helper\/src\/npm.ts\nexport async function getNpmPkg (npmName: string, root: string) {\n  let npmPath\n  try {\n    \/\/ \u68c0\u6d4b\u5e76\u8fd4\u56de\u53ef\u627e\u5230\u7684\u5305\u8def\u5f84\uff08webpack5-runner\u7684\u5305\u8def\u5f84\uff09\n    npmPath = resolveNpmSync(npmName, root)\n  } catch (err) {\n    \/\/ \u8fd9\u91cc\u627e\u4e0d\u5230\u5c31\u53bb\u4e0b\u8f7d\u5b89\u88c5\n    ...\n  }\n  \/\/ \u83b7\u53d6\u5305\u5e76\u8fd4\u56de\n  const npmFn = require(npmPath)\n  return npmFn \/\/ webpack5-runner\u91cc\u7684build\u51fd\u6570\n}<\/code><\/pre>\n
webpack5-runner – Webpack\u542f\u52a8\u5668<\/h4>\n
packages\/taro-webpack5-runner\/src\/index.mini.ts
build<\/code> – Webpack\u542f\u52a8\u5668\u7684\u4e24\u4e2a\u53c2\u6570appPath<\/code>\uff1a\u9879\u76ee\u8def\u52b2 rawConfig<\/code>\uff1a\u9879\u76ee\u53c2\u6570\u914d\u7f6e\uff08\u4e0a\u9762\u8bf4\u7684options<\/code>\u914d\u7f6e\uff09<\/p>\n
\/\/ packages\/taro-webpack5-runner\/src\/index.mini.ts\nasync function build (appPath: string, rawConfig: MiniBuildConfig): Promise<Stats> {\n  1.\u4fee\u6539webpack\u914d\u7f6e\n  2.\u9884\u7f16\u8bd1\u63d0\u5347\u7f16\u8bd1\u901f\u5ea6\n  3.\u542f\u52a8webpack\u7f16\u8bd1\n  ...\n}<\/code><\/pre>\n
1.\u4fee\u6539webpack\u914d\u7f6e<\/strong>
\u5b9e\u4f8b\u5316MiniCombination<\/code>\u6267\u884ccombination.make<\/code>\uff0cMiniCombination<\/code>\u662f\u7ee7\u627fCombination<\/code><\/p>\n
  \/\/ packages\/taro-webpack5-runner\/src\/index.mini.ts\n  \/\/ \u4fee\u6539webpack\u914d\u7f6e\n  const combination = new MiniCombination(appPath, rawConfig)\n  await combination.make()<\/code><\/pre>\n
MiniCombination\uff08Combination\uff09<\/code>
webpack-chain<\/a>\u4fee\u6539webpack<\/code>\u914d\u7f6e\uff0c\u6267\u884c\u4fee\u6539webpack<\/code>\u7684\u94a9\u5b50\u51fd\u6570modifyWebpackChain...<\/code><\/p>\n
  \/\/ packages\/taro-webpack5-runner\/src\/webpack\/Combination.ts\n  async make () {\n    \/\/ \u83b7\u53d6sass\u9884\u5904\u7406\u5668loader\u5e76\u6574\u7406this.config\n    await this.pre(this.rawConfig)\n    \/\/ \u5728MiniCombination\u91cc\u91cd\u5199\u4e86process\u65b9\u6cd5\uff0c\u91cd\u5199\u4e4b\u540e\u4f5c\u7528\u662f\u7528webpack-chain\u5305\u7684chain.merge\u53bb\u4fee\u6539webpack\n    this.process(this.config, this.appPath)\n    \/\/ \u6267\u884c\u94a9\u5b50\u4fee\u6539webpack\uff1amodifyWebpackChain\u3001webpackChain\u3001onWebpackChainReady\n    await this.post(this.config, this.chain)\n  }<\/code><\/pre>\n
2.\u9884\u7f16\u8bd1\u63d0\u5347\u7f16\u8bd1\u901f\u5ea6<\/strong>  
WebpackModuleFederation<\/a><\/p>\n
\/\/ packages\/taro-webpack5-runner\/src\/index.mini.ts\n\/\/ taro-webpack5-prebundle\u9884\u7f16\u8bd1\u63d0\u5347\u7f16\u8bd1\u901f\u5ea6\uff08packages\/taro-webpack5-prebundle\/src\/mini.ts\uff09\nconst prebundle = new Prebundle({\n  appPath,\n  sourceRoot: combination.sourceRoot,\n  chain: combination.chain,\n  enableSourceMap,\n  entry,\n  runtimePath\n})\nawait prebundle.run(combination.getPrebundleOptions())<\/code><\/pre>\n
  \/\/ packages\/taro-webpack5-prebundle\/src\/mini.ts\n  async run () {\n    ...\n    \/** \u4f7f\u7528 esbuild \u5bf9 node_modules \u4f9d\u8d56\u8fdb\u884c bundle *\/\n    await this.bundle()\n    \/** \u628a\u4f9d\u8d56\u7684 bundle \u4ea7\u7269\u6253\u5305\u6210 Webpack Module Federation \u683c\u5f0f *\/\n    await this.buildLib()\n    \/** \u9879\u76ee Host \u914d\u7f6e Module Federation *\/\n    this.setHost()\n    await super.run()\n  }<\/code><\/pre>\n
3.\u542f\u52a8webpack\u7f16\u8bd1<\/strong><\/p>\n
\/\/ packages\/taro-webpack5-runner\/src\/index.mini.ts\n\/\/ \u8fd9\u91cc\u8c03\u7528webpack(webpackConfig)\u4f1a\u5728\u63a7\u5236\u53f0\u51fa\u73b0\u8fdb\u5ea6\u6761\nconst compiler = webpack(webpackConfig)<\/code><\/pre>\n
\u533a\u5206\u662f\u5426\u662f\u5f00\u53d1\u73af\u5883watch\u70ed\u66f4\u65b0\u76d1\u542c<\/code><\/p>\n
  \/\/ packages\/taro-webpack5-runner\/src\/index.mini.ts\n  if (config.isWatch) {\n      \/\/ watch\u70ed\u66f4\u65b0\u76d1\u542c\u7136\u540e\u56de\u8c03callback\n      compiler.watch({\n        aggregateTimeout: 300,\n        poll: undefined\n      }, callback)\n    } else {\n      \/\/ \u6253\u5305\u5b8c\u6210\u540e\u5173\u95ed\u7136\u540e\u56de\u8c03callback\n      compiler.run((err: Error, stats: Stats) => {\n        compiler.close(err2 => callback(err || err2, stats))\n      })\n    }<\/code><\/pre>\n
\u7f16\u8bd1\u6700\u7ec8\u662f\u7531webpack<\/code>\u5b8c\u6210\u7684<\/p>\n
\/\/packages\/taro-webpack5-runner\/src\/index.mini.ts\n\/\/ \u5f15\u5165webpack\nimport webpack\u8fd4\u56de, { Stats } from 'webpack'\n...\n\/\/ \u4f20\u5165webpackConfig\u8c03\u7528webpack\u8fd4\u56decompiler \nconst compiler = webpack(webpackConfig)\n... \n\/\/ \u6267\u884ccompiler.run\u8fdb\u884c\u7f16\u8bd1\ncompiler.run((err: Error, stats: Stats) => {\n   compiler.close(err2 => callback(err || err2, stats))\n})<\/code><\/pre>\n
\u6253\u5370webpackConfig<\/code> \u91cc\u9762\u6709\u5fc5\u987b\u7684\u5165\u53e3\u914d\u7f6e\u3001\u51fa\u53e3\u914d\u7f6e\u3001\u63d2\u4ef6\u914d\u7f6e…<\/p>\n
{\n  target: [ 'web', 'es5' ],\n  watchOptions: { aggregateTimeout: 200 },\n  cache: {\n    type: 'filesystem',\n    buildDependencies: { config: [Array] },\n    name: 'production-weapp'\n  },\n  mode: 'production',\n  devtool: false,\n  output: {\n    chunkLoadingGlobal: 'webpackJsonp',\n    path: '...\/taro\/packages\/taro-cli\/bin\/appname\/dist',\n    publicPath: '\/',\n    filename: '[name].js',\n    chunkFilename: '[name].js',\n    globalObject: 'wx',\n    enabledLibraryTypes: [],\n    devtoolModuleFilenameTemplate: [Function (anonymous)]\n  },\n  resolve: {\n    symlinks: true,\n    fallback: { fs: false, path: false },\n    alias: {\n      'regenerator-runtime': '...\/taro\/packages\/taro-cli\/bin\/appname\/node_modules\/regenerator-runtime\/runtime-module.js',\n      '@tarojs\/runtime': '...\/taro\/packages\/taro-cli\/bin\/appname\/node_modules\/@tarojs\/runtime\/dist\/runtime.esm.js',\n      '@tarojs\/shared': '...\/taro\/packages\/taro-cli\/bin\/appname\/node_modules\/@tarojs\/shared\/dist\/shared.esm.js',\n      '@tarojs\/components$': '@tarojs\/plugin-platform-weapp\/dist\/components-react',\n      'react-dom$': '@tarojs\/react'\n    },\n    extensions: [ '.js', '.jsx', '.ts', '.tsx', '.mjs', '.vue' ],\n    mainFields: [ 'browser', 'module', 'jsnext:main', 'main' ],\n    plugins: [ [MultiPlatformPlugin] ]\n  },\n  resolveLoader: { modules: [ 'node_modules' ] },\n  module: {\n    rules: [\n      [Object], [Object],\n      [Object], [Object],\n      [Object], [Object],\n      [Object], [Object],\n      [Object], [Object]\n    ]\n  },\n  optimization: {\n    sideEffects: true,\n    minimize: true,\n    usedExports: true,\n    runtimeChunk: { name: 'runtime' },\n    splitChunks: {\n      chunks: 'all',\n      maxInitialRequests: Infinity,\n      minSize: 0,\n      cacheGroups: [Object]\n    },\n    minimizer: [ [TerserPlugin], [CssMinimizerPlugin] ]\n  },\n  plugins: [\n    TaroWebpackBarPlugin {\n      profile: false,\n      handler: [Function (anonymous)],\n      modulesCount: 5000,\n      dependenciesCount: 10000,\n      showEntries: true,\n      showModules: true,\n      showDependencies: true,\n      showActiveModules: true,\n      percentBy: undefined,\n      options: [Object],\n      reporters: [Array]\n    },\n    ProvidePlugin { definitions: [Object] },\n    DefinePlugin { definitions: [Object] },\n    MiniCssExtractPlugin {\n      _sortedModulesCache: [WeakMap],\n      options: [Object],\n      runtimeOptions: [Object]\n    },\n    MiniSplitChunksPlugin {\n      options: [Object],\n      _cacheGroupCache: [WeakMap],\n      tryAsync: [Function (anonymous)],\n      subCommonDeps: Map(0) {},\n      subCommonChunks: Map(0) {},\n      subPackagesVendors: Map(0) {},\n      distPath: '',\n      exclude: [],\n      fileType: [Object]\n    },\n    TaroMiniPlugin {\n      filesConfig: {},\n      isWatch: false,\n      pages: Set(0) {},\n      components: Set(0) {},\n      tabBarIcons: Set(0) {},\n      dependencies: Map(0) {},\n      pageLoaderName: '@tarojs\/taro-loader\/lib\/page',\n      independentPackages: Map(0) {},\n      options: [Object],\n      prerenderPages: Set(0) {}\n    }\n  ],\n  performance: { maxEntrypointSize: 2000000 },\n  entry: {\n    app: [\n      '...\/taro\/packages\/taro-cli\/bin\/appname\/src\/app.ts'\n    ]\n  }\n}\n<\/code><\/pre>\n
\u7f16\u8bd1\u5b8c\u6210\u540e\u5c31\u4f1a\u751f\u6210weapp\u6587\u4ef6\u5b58\u653e\u5728\u9879\u76ee\u4e0b\u7684dist<\/strong>
\"image.png\"<\/p>\n
https:\/\/segmentfault.com\/a\/1190000042502058<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u5f15\u8a00 \u57fa\u4e8eTaro3.5.5\u6b64\u524d\uff0c\u6211\u4eec\u5b66\u4e60\u4e86cli\u521b\u5efa\u4e00\u4e2aTaro\u9879\u76ee\uff0c\u5e76\u5728packages\/taro-cli […]<\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-10006509","post","type-post","status-publish","format-standard","hentry"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/posts\/10006509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10006509"}],"version-history":[{"count":0,"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/posts\/10006509\/revisions"}],"wp:attachment":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10006509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10006509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10006509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}