ruochuan02<\/code> \u53c2\u4e0e<\/a>\u3002\u53e6\u5916\uff0c\u60f3\u5b66\u6e90\u7801\uff0c\u6781\u529b\u63a8\u8350\u5173\u6ce8\u6211\u5199\u7684\u4e13\u680f\u300a\u5b66\u4e60\u6e90\u7801\u6574\u4f53\u67b6\u6784\u7cfb\u5217\u300b<\/a>\uff0c\u76ee\u524d\u662f\u6398\u91d1\u5173\u6ce8\u4eba\u6570\uff086k+\u4eba\uff09\u7b2c\u4e00\u7684\u4e13\u680f\uff0c\u5199\u6709\u51e0\u5341\u7bc7\u6e90\u7801\u6587\u7ae0\u3002<\/p>\n\u622a\u81f3\u76ee\u524d\uff082024-08-16<\/code>\uff09\uff0ctaro 4.0<\/code> \u6b63\u5f0f\u7248\u5df2\u7ecf\u53d1\u5e03<\/a>\uff0c\u76ee\u524d\u6700\u65b0\u662f 4.0.4<\/code>\uff0c\u5b98\u65b94.0<\/code>\u6b63\u5f0f\u7248\u672c\u7684\u4ecb\u7ecd\u6587\u7ae0\u6682\u672a\u53d1\u5e03\u3002\u5b98\u65b9\u4e4b\u524d\u53d1\u8fc7Taro 4.0 Beta \u53d1\u5e03\uff1a\u652f\u6301\u5f00\u53d1\u9e3f\u8499\u5e94\u7528\u3001\u5c0f\u7a0b\u5e8f\u7f16\u8bd1\u6a21\u5f0f\u3001Vite \u7f16\u8bd1\u7b49<\/a>\u3002<\/p>\n\u8ba1\u5212\u5199\u4e00\u4e2a Taro \u6e90\u7801\u63ed\u79d8\u7cfb\u5217\uff0c\u535a\u5ba2\u5730\u5740\uff1ahttps:\/\/ruochuan12.github.io\/taro<\/a> \u53ef\u4ee5\u52a0\u5165\u4e66\u7b7e\uff0c\u6301\u7eed\u5173\u6ce8\u82e5\u5ddd<\/a>\u3002<\/p>\n\n- [x] 1. \u63ed\u5f00\u6574\u4e2a\u67b6\u6784\u7684\u5165\u53e3 CLI => taro init \u521d\u59cb\u5316\u9879\u76ee\u7684\u79d8\u5bc6<\/a><\/li>\n
- [x] 2. \u63ed\u5f00\u6574\u4e2a\u67b6\u6784\u7684\u63d2\u4ef6\u7cfb\u7edf\u7684\u79d8\u5bc6<\/a><\/li>\n
- [x] 3. \u6bcf\u6b21\u521b\u5efa\u65b0\u7684 taro \u9879\u76ee\uff08taro init\uff09\u7684\u80cc\u540e\u539f\u7406\u662f\u4ec0\u4e48<\/a><\/li>\n
- [x] 4. \u6bcf\u6b21 npm run dev:weapp \u5f00\u53d1\u5c0f\u7a0b\u5e8f\uff0cbuild \u7f16\u8bd1\u6253\u5305\u662f\u5982\u4f55\u5b9e\u73b0\u7684\uff1f<\/a><\/li>\n
- [x] 5. \u9ad8\u624b\u90fd\u5728\u7528\u7684\u53d1\u5e03\u8ba2\u9605\u673a\u5236 Events \u5728 Taro \u4e2d\u662f\u5982\u4f55\u5b9e\u73b0\u7684\uff1f<\/a><\/li>\n
- [x] 6. \u4e3a\u4ec0\u4e48\u901a\u8fc7 Taro.xxx \u80fd\u8c03\u7528\u5404\u4e2a\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u7684 API\uff0c\u5982\u4f55\u8bbe\u8ba1\u5b9e\u73b0\u7684?<\/a><\/li>\n
- [x] 7. Taro.request \u548c\u8bf7\u6c42\u54cd\u5e94\u62e6\u622a\u5668\u662f\u5982\u4f55\u5b9e\u73b0\u7684<\/a><\/li>\n
- [x] 8. Taro \u662f\u5982\u4f55\u4f7f\u7528 webpack \u6253\u5305\u6784\u5efa\u5c0f\u7a0b\u5e8f\u7684\uff1f<\/a><\/li>\n
- [x] 9. Taro \u662f\u5982\u4f55\u751f\u6210 webpack \u914d\u7f6e\u8fdb\u884c\u6784\u5efa\u5c0f\u7a0b\u5e8f\u7684\uff1f<\/a><\/li>\n
- [ ] \u7b49\u7b49<\/li>\n<\/ul>\n
\u5b66\u5b8c\u672c\u6587\uff0c\u4f60\u5c06\u5b66\u5230\uff1a<\/p>\n
1. \u6bcf\u6b21\u5f00\u53d1\u7f16\u8bd1 npm run dev:weapp build \u7f16\u8bd1\u6253\u5305\u662f\u5982\u4f55\u5b9e\u73b0\u7684\uff1f\n2. \u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7aef\u5e73\u53f0\u63d2\u4ef6 @tarojs\/plugin-platform-weapp \u662f\u5982\u4f55\u5b9e\u73b0\u7684\uff1f\n3. \u7aef\u5e73\u53f0\u63d2\u4ef6\u57fa\u7840\u62bd\u8c61\u7c7b TaroPlatformBase\u3001TaroPlatform \u662f\u5982\u4f55\u5b9e\u73b0\u7684\uff1f\n4. \u6700\u7ec8\u662f\u5982\u4f55\u8c03\u7528 runner \u6267\u884c webpack \u7f16\u8bd1\u6784\u5efa\u7684\uff1f\n\u7b49\u7b49<\/code><\/pre>\n\u7ecf\u5e38\u4f7f\u7528 Taro<\/code> \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u7684\u5c0f\u4f19\u4f34\uff0c\u4e00\u5b9a\u65e5\u5e38\u4f7f\u7528 npm run dev:weapp<\/code> \u7b49\u547d\u4ee4\u8fd0\u884c\u5c0f\u7a0b\u5e8f\u3002\u6211\u4eec\u8fd9\u7bc7\u6587\u7ae0\u5c31\u6765\u89e3\u8bfb\u8fd9\u4e2a\u547d\u4ee4\u80cc\u540e\uff0cTaro<\/code> \u5230\u5e95\u505a\u4e86\u4ec0\u4e48\u3002
npm run dev:weapp<\/code> \u5bf9\u5e94\u7684\u662f taro build --type weapp --watch<\/code>\u3002<\/p>\nnpm run build:weapp<\/code> \u5bf9\u5e94\u7684\u662f taro build --type weapp<\/code>\u3002<\/p>\n\u5173\u4e8e\u514b\u9686\u9879\u76ee\u3001\u73af\u5883\u51c6\u5907\u3001\u5982\u4f55\u8c03\u8bd5\u4ee3\u7801\u7b49\uff0c\u53c2\u8003\u7b2c\u4e00\u7bc7\u6587\u7ae0-\u51c6\u5907\u5de5\u4f5c\u3001\u8c03\u8bd5<\/a>\u3002\u540e\u7eed\u6587\u7ae0\u57fa\u672c\u4e0d\u518d\u8fc7\u591a\u8d58\u8ff0\u3002<\/p>\n\u6587\u7ae0\u4e2d\u57fa\u672c\u662f\u5148\u653e\u6e90\u7801\uff0c\u6e90\u7801\u4e2d\u4e0d\u505a\u8fc7\u591a\u89e3\u91ca\u3002\u6e90\u7801\u540e\u9762\u518d\u505a\u7b80\u5355\u8bb2\u8ff0\u3002<\/p><\/blockquote>\n
2. \u8c03\u8bd5\u6e90\u7801<\/h2>\n
\u521d\u59cb\u5316 taro<\/code> \u9879\u76ee\uff0c\u65b9\u4fbf\u8c03\u8bd5\uff0c\u9009\u62e9React<\/code>\u3001TS<\/code>\u3001Less<\/code>\u3001pnpm<\/code>\u3001webpack5<\/code>\u3001CLI\u5185\u7f6e\u9ed8\u8ba4\u6a21\u677f<\/code>\u3002<\/p>\nnpx @taro\/cli init taro4-debug\ncd taro4-debug\n# \u5b89\u88c5\u4f9d\u8d56\npnpm i\n# \u5199\u6587\u7ae0\u65f6\u6700\u65b0\u7684\u7248\u672c\u662f 4.0.4<\/code><\/pre>\n\u5982\u56fe\u6240\u793a
![\"\u521d\u59cb\u5316\u9879\u76ee\"](\"https:\/\/segmentfault.com\/img\/remote\/1460000046035470\" "\\"\u521d\u59cb\u5316\u9879\u76ee\\"")
<\/p>\n
# \u5f00\u53d1\u542f\u52a8\npnpm run dev:weapp<\/code><\/pre>\n\u5982\u56fe
![\"taro-dev.png\"](\"https:\/\/segmentfault.com\/img\/remote\/1460000046035471\" "\\"taro-dev.png\\"")
<\/p>\n
# \u7f16\u8bd1\u6253\u5305\npnpm run build:weapp<\/code><\/pre>\n\u5982\u56fe
![\"taro-build.png\"](\"https:\/\/segmentfault.com\/img\/remote\/1460000046035472\" "\\"taro-build.png\\"")
<\/p>\n
\u6211\u4eec\u6765\u5b66\u4e60 taro \u7f16\u8bd1\u6253\u5305\u7684\u6e90\u7801\u3002<\/p>\n
2.1 \u8c03\u8bd5\u65b9\u5f0f1\uff1a\u4f7f\u7528\u9879\u76ee\u91cc\u7684\u4f9d\u8d56<\/h3>\n
\u514b\u9686 taro<\/code> \u9879\u76ee<\/p>\ngit clone https:\/\/github.com\/NervJS\/taro.git\ncd taro\npnpm i\npnpm run build\n# \u5199\u6587\u7ae0\u65f6\u6700\u65b0\u7684\u7248\u672c\u662f 4.0.4\uff0c\u53ef\u4ee5 git checkout 39dd83eb0bfc2a937acd79b289c7c2ec6e59e202\n# 39dd83eb0bfc2a937acd79b289c7c2ec6e59e202\n# chore(release): publish 4.0.4 (#16202)<\/code><\/pre>\n\u65b9\u5f0f1\u8c03\u8bd5\u622a\u56fe\u5982\u4e0b\uff1a
![\"\u4f7f\u7528\u9879\u76ee\u4e2d\u7684\u4f9d\u8d56\u8c03\u8bd5\"](\"https:\/\/segmentfault.com\/img\/remote\/1460000046035473\" "\\"\u4f7f\u7528\u9879\u76ee\u4e2d\u7684\u4f9d\u8d56\u8c03\u8bd5\\"")
<\/p>\n
\u4f18\u70b9\uff0c\u65e0\u9700\u591a\u4f59\u7684\u914d\u7f6e\uff0c\u53ef\u4ee5\u76f4\u63a5\u8c03\u8bd5\u672c\u8eab\u9879\u76ee\u3002
\u7f3a\u70b9\uff1a\u5b89\u88c5\u7684 taro<\/code> \u4f9d\u8d56\u90fd\u662f dist<\/code> \u76ee\u5f55\uff0c\u538b\u7f29\u8fc7\u540e\u7684\uff0c\u4e0d\u65b9\u4fbf\u67e5\u770b\u539f\u59cb\u4ee3\u7801\u3002<\/p>\n\u6211\u4eec\u4f7f\u7528\u8c03\u8bd5\u65b9\u6cd52\u3002<\/p>\n
2.2 \u8c03\u8bd5\u65b9\u5f0f2\uff1a\u4f7f\u7528 taro \u6e90\u7801<\/h3>\n
\u6211\u628a taro<\/code> \u6e90\u7801\u548c taro4-debug<\/code> \u514b\u9686\u5230\u4e86\u540c\u4e00\u4e2a\u76ee\u5f55 github<\/code>\u3002<\/p>\n\u4f18\u70b9\uff1a\u53ef\u4ee5\u8c03\u8bd5\u672c\u8eab\u4e0d\u538b\u7f29\u7684\u6e90\u7801\u3002\u56e0\u4e3a taro<\/code> \u81ea\u8eab\u6253\u5305\u751f\u6210\u4e86\u5bf9\u5e94\u7684 sourcemap<\/code> \u6587\u4ef6\uff0c\u6240\u4ee5\u53ef\u4ee5\u8c03\u8bd5\u6e90\u7801\u6587\u4ef6\u3002
\u7f3a\u70b9\uff1a<\/p>\n\n- \n
\n- \u9700\u8981\u914d\u7f6e
.vscode\/launch.json<\/code>\u3002<\/li>\n<\/ol>\n<\/li>\n- \n
\n- \u8fd8\u9700\u8981\u5728\u5bf9\u5e94\u7684
dist<\/code> \u6587\u4ef6\u4fee\u6539\u4e00\u4e9b\u5305\u7684\u8def\u5f84\u3002<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n2.2.1 \u914d\u7f6e .vscode\/launch.json<\/code><\/h4>\n\u91cd\u70b9\u6dfb\u52a0\u914d\u7f6e “cwd”: “\/Users\/ruochuan\/git-source\/github\/taro4-debug”\u3001 "args": ["build","--type","weapp" ]<\/code> \u548c "console": "integratedTerminal"<\/code><\/p>\n\u6211\u4eec\u914d\u7f6e\u8c03\u8bd5\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u6253\u5305\u3002<\/p>\n
\/\/ .vscode\/launch.json\n{\n "version": "0.2.0",\n "configurations": [\n {\n "type": "node",\n "request": "launch",\n "name": "CLI debug",\n "program": "${workspaceFolder}\/packages\/taro-cli\/bin\/taro",\n "cwd": "\/Users\/ruochuan\/git-source\/github\/taro4-debug",\n "args": [\n "build",\n "--type",\n "weapp",\n ],\n "console": "integratedTerminal",\n "skipFiles": ["<node_internals>\/**"]\n },\n ]\n}<\/code><\/pre>\n2.2.2 \u4fee\u6539\u4ee5\u4e0b\u4e24\u4e2a\u5305\u7684\u8def\u5f84<\/h4>\n\n@tarojs\/plugin-platform-weapp<\/code> => ..\/taro\/packages\/taro-platform-weapp\/index.js<\/code><\/li>\n@tarojs\/webpack5-runner<\/code> => ..\/taro\/packages\/taro-webpack5-runner\/index.js<\/code><\/li>\n<\/ul>\n\u5bf9\u5e94\u7684\u5177\u4f53\u4ee3\u7801\u4f4d\u7f6e\u5982\u4e0b<\/p>\n
\/\/ packages\/taro-cli\/dist\/cli.js\nswitch (platform) {\n \/\/ \u7701\u7565\u4e00\u4e9b\u5e73\u53f0\n case 'weapp': {\n kernel.optsPlugins.push(path.resolve(`..\/taro\/packages\/taro-platform-${platform}\/index.js`))\n \/\/ kernel.optsPlugins.push(`@tarojs\/plugin-platform-${platform}`);\n break;\n }\n}<\/code><\/pre>\n\/\/ packages\/taro-service\/dist\/platform-plugin-base\/mini.js\ngetRunner() {\n return __awaiter(this, void 0, void 0, function* () {\n const { appPath } = this.ctx.paths;\n const { npm } = this.helper;\n const runnerPkg = this.compiler === 'vite' ? '@tarojs\/vite-runner' : '@tarojs\/webpack5-runner';\n \/\/ const runner = yield npm.getNpmPkg(runnerPkg, appPath);\n const runner = require(path.resolve('..\/taro\/packages\/taro-webpack5-runner\/index.js'));\n return runner.bind(null, appPath);\n });\n}<\/code><\/pre>\n\u4e0d\u914d\u7f6e\u7684\u8bdd\uff0c\u4e0d\u4f1a\u8c03\u7528\u5bf9\u5e94\u7684 taro \u6587\u4ef6\u6e90\u7801\uff0c\u800c\u662f\u8c03\u7528\u9879\u76ee\u4e2d\u7684\u4f9d\u8d56\u5305\u6e90\u7801\uff0c\u8def\u5f84\u4e0d\u5bf9\u3002<\/p>\n
\u65b9\u5f0f2\u8c03\u8bd5\u622a\u56fe\u5982\u4e0b\uff1a<\/p>\n
![\"\u4f7f\u7528](\"https:\/\/segmentfault.com\/img\/remote\/1460000046035474\" "\\"\u4f7f\u7528")
<\/p>\n
\u6839\u636e\u524d\u9762\u4e24\u7bc7 1. taro cli init<\/a>\u30012. taro \u63d2\u4ef6\u673a\u5236<\/a> \u6587\u7ae0\uff0c\u6211\u4eec\u53ef\u4ee5\u5f97\u77e5\uff1ataro build<\/code> \u521d\u59cb\u5316\u547d\u4ee4\uff0c\u6700\u7ec8\u8c03\u7528\u7684\u662f packages\/taro-cli\/src\/presets\/commands\/build.ts<\/code> \u6587\u4ef6\u4e2d\u7684 ctx.registerCommand<\/code> \u6ce8\u518c\u7684 build<\/code> \u547d\u4ee4\u884c\u7684 fn<\/code> \u51fd\u6570\u3002<\/p>\n\/\/ packages\/taro-cli\/src\/presets\/commands\/build.ts\nimport {\n MessageKind,\n validateConfig\n} from '@tarojs\/plugin-doctor'\n\nimport * as hooks from '..\/constant'\n\nimport type { IPluginContext } from '@tarojs\/service'\n\nexport default (ctx: IPluginContext) => {\n ctx.registerCommand({\n name: 'build',\n optionsMap: {\n '--type [typeName]': 'Build type, weapp\/swan\/alipay\/tt\/qq\/jd\/h5\/rn',\n '--watch': 'Watch mode',\n \/\/ \u7701\u7565\u82e5\u5e72\u4ee3\u7801\n '--no-check': 'Do not check config is valid or not',\n },\n synopsisList: [\n 'taro build --type weapp',\n 'taro build --type weapp --watch',\n \/\/ \u7701\u7565\u82e5\u5e72\u4ee3\u7801\n ],\n async fn(opts) {\n const { options, config, _ } = opts\n const { platform, isWatch, blended, newBlended, withoutBuild, noInjectGlobalStyle, noCheck } = options\n const { fs, chalk, PROJECT_CONFIG } = ctx.helper\n const { outputPath, configPath } = ctx.paths\n\n if (!configPath || !fs.existsSync(configPath)) {\n console.log(chalk.red(`\u627e\u4e0d\u5230\u9879\u76ee\u914d\u7f6e\u6587\u4ef6${PROJECT_CONFIG}\uff0c\u8bf7\u786e\u5b9a\u5f53\u524d\u76ee\u5f55\u662f Taro \u9879\u76ee\u6839\u76ee\u5f55!`))\n process.exit(1)\n }\n\n if (typeof platform !== 'string') {\n console.log(chalk.red('\u8bf7\u4f20\u5165\u6b63\u786e\u7684\u7f16\u8bd1\u7c7b\u578b\uff01'))\n process.exit(0)\n }\n\n \/\/ \u6821\u9a8c Taro \u9879\u76ee\u914d\u7f6e\n if (!noCheck) {\n const checkResult = await checkConfig({\n projectConfig: ctx.initialConfig,\n helper: ctx.helper\n })\n if (!checkResult.isValid) {\n \/\/ \u6821\u9a8c\u5931\u8d25\uff0c\u9000\u51fa\n }\n }\n\n const isProduction = process.env.NODE_ENV === 'production' || !isWatch\n\n \/\/ dist folder\n \/\/ \u786e\u4fdd\u8f93\u51fa\u8def\u5f84\u5b58\u5728\uff0c\u5982\u679c\u4e0d\u5b58\u5728\u5c31\u521b\u5efa\n fs.ensureDirSync(outputPath)\n\n \/\/ is build native components mode?\n const isBuildNativeComp = _[1] === 'native-components'\n\n await ctx.applyPlugins(hooks.ON_BUILD_START)\n await ctx.applyPlugins({\n name: platform,\n opts: {\n config: {\n ...config,\n isWatch,\n mode: isProduction ? 'production' : 'development',\n \/\/ \u7701\u7565\u82e5\u5e72\u53c2\u6570\u548c\u82e5\u5e72\u94a9\u5b50\n },\n },\n })\n await ctx.applyPlugins(hooks.ON_BUILD_COMPLETE)\n },\n })\n}\n\nasync function checkConfig ({ projectConfig, helper }) {\n const result = await validateConfig(projectConfig, helper)\n return result\n}<\/code><\/pre>\nTaro<\/code> build<\/code> \u63d2\u4ef6\u4e3b\u8981\u505a\u4e86\u4ee5\u4e0b\u51e0\u4ef6\u4e8b\uff1a<\/p>\n\n- \u5224\u65ad
config\/index<\/code> \u914d\u7f6e\u6587\u4ef6\u662f\u5426\u5b58\u5728\uff0c\u5982\u679c\u4e0d\u5b58\u5728\uff0c\u5219\u62a5\u9519\u9000\u51fa\u7a0b\u5e8f\u3002<\/li>\n- \u5224\u65ad
platform<\/code> \u53c2\u6570\u662f\u5426\u662f\u5b57\u7b26\u4e32\uff0c\u8fd9\u91cc\u662f weapp<\/code>\uff0c\u5982\u679c\u4e0d\u662f\uff0c\u9000\u51fa\u7a0b\u5e8f\u3002<\/li>\n- \u4f7f\u7528
@tarojs\/plugin-doctor<\/code> \u4e2d\u7684 validateConfig<\/code> \u65b9\u6cd5 (checkConfig<\/code>) \u51fd\u6570\u6821\u9a8c\u914d\u7f6e\u6587\u4ef6 config\/index<\/code>\uff0c\u5982\u679c\u914d\u7f6e\u6587\u4ef6\u51fa\u9519\uff0c\u9000\u51fa\u7a0b\u5e8f\u3002<\/li>\n- \u8c03\u7528
ctx.applyPlugins(hooks.ON_BUILD_START)<\/code> \uff08\u7f16\u8bd1\u5f00\u59cb\uff09onBuildStart<\/code> \u94a9\u5b50\u3002<\/li>\n- \u8c03\u7528
ctx.applyPlugins({ name: platform, })<\/code> \uff08\u8c03\u7528 weapp\uff09 \u94a9\u5b50\u3002<\/li>\n- \u8c03\u7528
ctx.applyPlugins(hooks.ON_BUILD_COMPLETE)<\/code> \uff08\u7f16\u8bd1\u7ed3\u675f\uff09onBuildComplete<\/code> \u94a9\u5b50\u3002<\/li>\n<\/ul>\n\u5176\u4e2d<\/p>\n
await ctx.applyPlugins({\n name: platform,\n});<\/code><\/pre>\n\u8c03\u7528\u7684\u662f\u7aef\u5e73\u53f0\u63d2\u4ef6\uff0c\u672c\u6587\u4ee5\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e3a\u4f8b\uff0c\u6240\u4ee5\u8c03\u7528\u7684\u662f weapp\u3002\u5bf9\u5e94\u7684\u6e90\u7801\u6587\u4ef6\u8def\u5f84\u662f\uff1apackages\/taro-platform-weapp\/src\/index.ts<\/code>\u3002\u6211\u4eec\u6765\u770b\u5177\u4f53\u5b9e\u73b0\u3002<\/p>\n3. \u7aef\u5e73\u53f0\u63d2\u4ef6 Weapp<\/h2>\n
Taro\u6587\u6863 – \u7aef\u5e73\u53f0\u63d2\u4ef6<\/a> \u4e2d\uff0c\u6709\u5bf9\u7aef\u5e73\u53f0\u63d2\u4ef6\u7684\u6bd4\u8f83\u8be6\u7ec6\u7684\u63cf\u8ff0\uff0c\u53ef\u4ee5\u53c2\u8003\u5b66\u4e60\u3002<\/p>\n![\"\u6587\u6863\u4e2d\u7684\u7aef\u5e73\u53f0\u63d2\u4ef6\u67b6\u6784\u56fe\"](\"https:\/\/segmentfault.com\/img\/remote\/1460000046035475\" "\\"\u6587\u6863\u4e2d\u7684\u7aef\u5e73\u53f0\u63d2\u4ef6\u67b6\u6784\u56fe\\"")
<\/p>\n
\u6211\u4eec\u63a5\u7740\u5b66\u4e60\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7aef\u5e73\u53f0\u63d2\u4ef6\u6e90\u7801\u3002<\/p>\n
\/\/ packages\/taro-platform-weapp\/src\/index.ts\nimport Weapp from '.\/program'\n\nimport type { IPluginContext } from '@tarojs\/service'\n\n\/\/ \u8ba9\u5176\u5b83\u5e73\u53f0\u63d2\u4ef6\u53ef\u4ee5\u7ee7\u627f\u6b64\u5e73\u53f0\nexport { Weapp }\n\nexport interface IOptions {\n enablekeyboardAccessory?: boolean\n}\n\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\u91cd\u70b9\u5c31\u662f\u8fd9\u4e24\u884c\u4ee3\u7801\u3002<\/p>\n
const program = new Weapp(ctx, config, options || {})\nawait program.start()<\/code><\/pre>\nctx.registerPlatform<\/code> \u6ce8\u518c weapp<\/code> \u5e73\u53f0\u63d2\u4ef6\uff0c\u8c03\u7528 Weapp<\/code> \u6784\u9020\u51fd\u6570\uff0c\u4f20\u5165 ctx<\/code> \u3001config<\/code> \u548c options<\/code> \u7b49\u914d\u7f6e\u3002\u518d\u8c03\u7528\u5b9e\u4f8b\u5bf9\u8c61\u7684 start<\/code> \u65b9\u6cd5\u3002<\/p>\n4. new Weapp \u6784\u9020\u51fd\u6570<\/h2>\npackages\/taro-platform-weapp\/src\/program.ts<\/p><\/blockquote>\n
\/\/ packages\/taro-platform-weapp\/src\/program.ts\nimport { TaroPlatformBase } from '@tarojs\/service'\n\nimport { components } from '.\/components'\nimport { Template } from '.\/template'\n\nimport type { IOptions } from '.\/index'\n\nconst PACKAGE_NAME = '@tarojs\/plugin-platform-weapp'\n\nexport default class Weapp extends TaroPlatformBase {\n template: Template\n platform = 'weapp'\n globalObject = 'wx'\n projectConfigJson: string = this.config.projectConfigName || 'project.config.json'\n runtimePath = `${PACKAGE_NAME}\/dist\/runtime`\n taroComponentsPath = `${PACKAGE_NAME}\/dist\/components-react`\n fileType = {\n templ: '.wxml',\n style: '.wxss',\n config: '.json',\n script: '.js',\n xs: '.wxs'\n }\n\n \/**\n * 1. setupTransaction - init\n * 2. setup\n * 3. setupTransaction - close\n * 4. buildTransaction - init\n * 5. build\n * 6. buildTransaction - close\n *\/\n constructor (ctx, config, pluginOptions?: IOptions) {\n super(ctx, config)\n this.template = new Template(pluginOptions)\n this.setupTransaction.addWrapper({\n close () {\n \/\/ \u589e\u52a0\u7ec4\u4ef6\u6216\u4fee\u6539\u7ec4\u4ef6\u5c5e\u6027\n this.modifyTemplate(pluginOptions)\n \/\/ \u4fee\u6539 Webpack \u914d\u7f6e\n this.modifyWebpackConfig()\n }\n })\n }\n \/\/ \u7701\u7565\u4ee3\u7801 modifyTemplate \u548c modifyWebpackConfig \u5177\u4f53\u5b9e\u73b0\n}<\/code><\/pre>\n\nclass Weapp<\/code> \u7ee7\u627f\u4e8e\u62bd\u8c61\u7c7b TaroPlatformBase<\/code> \u7ee7\u627f\u4e8e\u62bd\u8c61\u7c7b TaroPlatform<\/code><\/li>\n<\/ul>\n\u5982\u56fe\u6240\u793a\uff1a
![\"extends.png\"](\"https:\/\/segmentfault.com\/img\/remote\/1460000046035476\" "\\"extends.png\\"")
<\/p>\n
\u5173\u4e8e\u62bd\u8c61\u7c7b\u548c\u66f4\u591a\u7c7b\u76f8\u5173\uff0c\u53ef\u4ee5\u53c2\u8003\uff1a
TypeScript \u5165\u95e8\u6559\u7a0b – \u7c7b<\/a><\/p>\n\u62bd\u8c61\u7c7b\uff08Abstract Class\uff09\uff1a\u62bd\u8c61\u7c7b\u662f\u4f9b\u5176\u4ed6\u7c7b\u7ee7\u627f\u7684\u57fa\u7c7b\uff0c\u62bd\u8c61\u7c7b\u4e0d\u5141\u8bb8\u88ab\u5b9e\u4f8b\u5316\u3002\u62bd\u8c61\u7c7b\u4e2d\u7684\u62bd\u8c61\u65b9\u6cd5\u5fc5\u987b\u5728\u5b50\u7c7b\u4e2d\u88ab\u5b9e\u73b0
Classes<\/a>(\u4e2d\u6587\u7248<\/a>)
ECMAScript 6 \u5165\u95e8 – Class<\/a><\/p><\/blockquote>\n\u8fd9\u6837\u62bd\u8c61\u7684\u597d\u5904\uff0c\u5728\u4e8e\u5176\u4ed6\u7aef\u5e73\u53f0\u63d2\u4ef6 \u6bd4\u5982\u5c0f\u7ea2\u4e66<\/a> \u57fa\u4e8e\u8fd9\u4e2a\u62bd\u8c61\u7c7b\u6269\u5c55\u7ee7\u627f\u5c31\u6bd4\u8f83\u65b9\u4fbf\u3002<\/p>\n5. TaroPlatform \u7aef\u5e73\u53f0\u63d2\u4ef6\u62bd\u8c61\u7c7b<\/h2>\n5.1 Transaction \u4e8b\u52a1<\/h3>\n\/\/ packages\/taro-service\/src\/platform-plugin-base\/platform.ts\ninterface IWrapper {\n init? (): void\n close? (): void\n}\n\nexport class Transaction<T = TaroPlatform> {\n wrappers: IWrapper[] = []\n\n async perform (fn: Func, scope: T, ...args: any[]) {\n this.initAll(scope)\n await fn.call(scope, ...args)\n this.closeAll(scope)\n }\n\n initAll (scope: T) {\n const wrappers = this.wrappers\n wrappers.forEach(wrapper => wrapper.init?.call(scope))\n }\n\n closeAll (scope: T) {\n const wrappers = this.wrappers\n wrappers.forEach(wrapper => wrapper.close?.call(scope))\n }\n\n addWrapper (wrapper: IWrapper) {\n this.wrappers.push(wrapper)\n }\n}\n<\/code><\/pre>\n\u8fd9\u6837\u7684\u597d\u5904\u5728\u4e8e\uff0c\u65b9\u4fbf\u6309\u987a\u5e8f\u6267\u884c init<\/code> perform<\/code> close<\/code> \u51fd\u6570\u3002\u6211\u4eec\u4e5f\u53ef\u4ee5\u5728\u5de5\u4f5c\u4e2d\u4f7f\u7528\u3002<\/p>\n\u6211\u4eec\u63a5\u7740\u6765\u770b class TaroPlatform<\/code>\u3002<\/p>\n\/\/ packages\/taro-service\/src\/platform-plugin-base\/platform.ts\nimport { PLATFORM_TYPE } from '@tarojs\/shared'\n\nimport type { Func } from '@tarojs\/taro\/types\/compile'\nimport type { IPluginContext, TConfig } from '..\/utils\/types'\n\nconst VALID_COMPILER = ['webpack5', 'vite']\nconst DEFAULT_COMPILER = 'webpack5'\n\nexport default abstract class TaroPlatform<T extends TConfig = TConfig> {\n protected ctx: IPluginContext\n protected config: T\n protected helper: IPluginContext['helper']\n protected compiler: string\n\n abstract platformType: PLATFORM_TYPE\n abstract platform: string\n abstract runtimePath: string | string[]\n\n protected setupTransaction = new Transaction<this>()\n protected buildTransaction = new Transaction<this>()\n\n constructor (ctx: IPluginContext, config: T) {\n this.ctx = ctx\n this.helper = ctx.helper\n this.config = config\n this.updateOutputPath(config)\n const _compiler = config.compiler\n this.compiler = typeof _compiler === 'object' ? _compiler.type : _compiler\n \/\/ Note: \u517c\u5bb9 webpack4 \u548c\u4e0d\u586b\u5199 compiler \u7684\u60c5\u51b5\uff0c\u9ed8\u8ba4\u4f7f\u7528 webpack5\n if (!VALID_COMPILER.includes(this.compiler)) {\n this.compiler = DEFAULT_COMPILER\n }\n }\n\/\/ \u62c6\u5f00\u4e0b\u65b9\n}<\/code><\/pre>\n5.2 emptyOutputDir \u6e05\u7a7a\u8f93\u51fa\u7684\u6587\u4ef6\u5939\u7b49<\/h3>\n\/\/ \u6e05\u7a7a\u8f93\u51fa\u7684\u6587\u4ef6\u5939\nprotected emptyOutputDir (excludes: Array<string | RegExp> = []) {\n const { outputPath } = this.ctx.paths\n this.helper.emptyDirectory(outputPath, { excludes })\n}\n\n\/**\n * \u5982\u679c\u5206\u7aef\u7f16\u8bd1\u8be6\u60c5 webpack \u914d\u7f6e\u4e86 output \u5219\u9700\u66f4\u65b0 outputPath \u4f4d\u7f6e\n *\/\nprivate updateOutputPath (config: TConfig) {\n const platformPath = config.output?.path\n if (platformPath) {\n this.ctx.paths.outputPath = platformPath\n }\n}\n\n\/**\n * \u8c03\u7528 runner \u5f00\u542f\u7f16\u8bd1\n *\/\nabstract start(): Promise<void><\/code><\/pre>\n\u6211\u4eec\u6765\u770b TaroPlatformBase<\/code> \u7684\u5b9e\u73b0<\/p>\n6. TaroPlatformBase \u7aef\u5e73\u53f0\u63d2\u4ef6\u57fa\u7840\u62bd\u8c61\u7c7b<\/h2>\n\/\/ packages\/taro-service\/src\/platform-plugin-base\/mini.ts\nimport * as path from 'node:path'\n\nimport { recursiveMerge, taroJsMiniComponentsPath } from '@tarojs\/helper'\nimport { isObject, PLATFORM_TYPE } from '@tarojs\/shared'\n\nimport { getPkgVersion } from '..\/utils\/package'\nimport TaroPlatform from '.\/platform'\n\nimport type { RecursiveTemplate, UnRecursiveTemplate } from '@tarojs\/shared\/dist\/template'\nimport type { TConfig } from '..\/utils\/types'\n\ninterface IFileType {\n templ: string\n style: string\n config: string\n script: string\n xs?: string\n}\n\nexport abstract class TaroPlatformBase<T extends TConfig = TConfig> extends TaroPlatform<T> {\n platformType = PLATFORM_TYPE.MINI\n\n abstract globalObject: string\n abstract fileType: IFileType\n abstract template: RecursiveTemplate | UnRecursiveTemplate\n \/\/ Note: \u7ed9\u6240\u6709\u7684\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u4e00\u4e2a\u9ed8\u8ba4\u7684 taroComponentsPath\n taroComponentsPath: string = taroJsMiniComponentsPath\n projectConfigJson?: string\n\n private projectConfigJsonOutputPath: string\n\n \/**\n * \u8c03\u7528 runner \u5f00\u542f\u7f16\u8bd1\n *\/\n public async start () {\n await this.setup()\n await this.build()\n }\n}\n<\/code><\/pre>\nstart<\/code> \u5b9e\u73b0\uff0csetup<\/code> \u518d\u6267\u884c build<\/code>\u3002\u6211\u4eec\u6765\u770b setup \u51fd\u6570\u3002<\/p>\n6.1 setup<\/h3>\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 *\/\nprivate async setup () {\n await this.setupTransaction.perform(this.setupImpl, this)\n this.ctx.onSetupClose?.(this)\n}\n<\/code><\/pre>\nprivate setupImpl () {\n const { output } = this.config\n \/\/ webpack5 \u539f\u751f\u652f\u6301 output.clean \u9009\u9879\uff0c\u4f46\u662f webpack4 \u4e0d\u652f\u6301\uff0c \u4e3a\u7edf\u4e00\u884c\u4e3a\uff0c\u8fd9\u91cc\u505a\u4e00\u4e0b\u517c\u5bb9\n \/\/ \uff08\u5728 packages\/taro-mini-runner\/src\/webpack\/chain.ts \u548c packages\/taro-webpack-runner\/src\/utils\/chain.ts \u7684 makeConfig \u4e2d\u5bf9 clean \u9009\u9879\u505a\u4e86\u8fc7\u6ee4\uff09\n \/\/ \u4ec5 output.clean \u4e3a false \u65f6\u4e0d\u6e05\u7a7a\u8f93\u51fa\u76ee\u5f55\n \/\/ eslint-disable-next-line eqeqeq\n if (output == undefined || output.clean == undefined || output.clean === true) {\n this.emptyOutputDir()\n } else if (isObject(output.clean)) {\n this.emptyOutputDir(output.clean.keep || [])\n }\n this.printDevelopmentTip(this.platform)\n if (this.projectConfigJson) {\n this.generateProjectConfig(this.projectConfigJson)\n }\n \/\/ \u7701\u7565\u4ee5\u4e0b\u8fd9\u4e24\u90e8\u5206\u7684\u4ee3\u7801\n \/\/ \u6253\u5370\u5f00\u53d1\u8005\u5de5\u5177-\u9879\u76ee\u76ee\u5f55\n \/\/ Webpack5 \u4ee3\u7801\u81ea\u52a8\u70ed\u91cd\u8f7d\n}<\/code><\/pre>\n<\/p>\n
\u6211\u4eec\u7ee7\u7eed\u6765\u770b build<\/code> \u51fd\u6570\u3002<\/p>\n6.2 build<\/h3>\n\/**\n * \u8c03\u7528 runner \u5f00\u59cb\u7f16\u8bd1\n * @param extraOptions \u9700\u8981\u989d\u5916\u4f20\u5165 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 }<\/code><\/pre>\nprivate async buildImpl (extraOptions = {}) {\n const runner = await this.getRunner()\n const options = this.getOptions(\n Object.assign(\n {\n runtimePath: this.runtimePath,\n taroComponentsPath: this.taroComponentsPath\n },\n extraOptions\n )\n )\n await runner(options)\n}<\/code><\/pre>\n\u6211\u4eec\u6765\u770b\u4e0b getRunner<\/code> \u7684\u5b9e\u73b0\uff1a<\/p>\n\/**\n * \u8fd4\u56de\u5f53\u524d\u9879\u76ee\u5185\u7684 runner \u5305\n *\/\nprotected async getRunner () {\n const { appPath } = this.ctx.paths\n const { npm } = this.helper\n\n const runnerPkg = this.compiler === 'vite' ? '@tarojs\/vite-runner' : '@tarojs\/webpack5-runner'\n\n const runner = await npm.getNpmPkg(runnerPkg, appPath)\n\n return runner.bind(null, appPath)\n}<\/code><\/pre>\nbuild<\/code> \u51fd\u6570\u6700\u540e\u8c03\u7528 runner<\/code> \u51fd\u6570\u3002appPath<\/code> \u9879\u76ee\u8def\u5f84\u662f\/Users\/ruochuan\/git-source\/github\/taro4-debug<\/code>\u3002<\/p>\n\u521d\u59cb\u5316\u9879\u76ee\u4f7f\u7528\u7684 webpack5<\/code> \u6240\u4ee5\u4f7f\u7528\u7684\u662f @tarojs\/webpack5-runner<\/code> \u6211\u4eec\u6765\u770b\u5b83\u7684\u5177\u4f53\u5b9e\u73b0\u3002<\/p>\n7. runner => @tarojs\/webpack5-runner<\/h2>\n
package.json<\/code> \u5c5e\u6027 “main”: “index.js” \u5165\u53e3\u6587\u4ef6 index.js<\/code><\/p>\nif (process.env.TARO_PLATFORM === 'web') {\n module.exports = require('.\/dist\/index.h5.js').default\n} else if (process.env.TARO_PLATFORM === 'harmony' || process.env.TARO_ENV === 'harmony') {\n module.exports = require('.\/dist\/index.harmony.js').default\n} else {\n module.exports = require('.\/dist\/index.mini.js').default\n}\n\nmodule.exports.default = module.exports<\/code><\/pre>\n\u672c\u6587\u4e2d\u6253\u5305\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\uff0c\u6839\u636e process.env.TARO_PLATFORM<\/code> \u548c process.env.TARO_ENV<\/code> \u8c03\u7528\u7684\u662f\u6253\u5305\u540e\u7684\u6587\u4ef6 dist\/index.mini.js<\/code>\uff0c\u6e90\u7801\u6587\u4ef6\u662f packages\/taro-webpack5-runner\/src\/index.mini.ts<\/code>\u3002<\/p>\n\/\/ packages\/taro-webpack5-runner\/src\/index.mini.ts\n\nimport webpack from 'webpack'\n\/\/ \u7701\u7565\u82e5\u5e72\u4ee3\u7801\nexport default async function build (appPath: string, rawConfig: IMiniBuildConfig): Promise<Stats | void> {\n const combination = new MiniCombination(appPath, rawConfig)\n await combination.make()\n \/\/ \u7701\u7565\u82e5\u5e72\u4ee3\u7801\n\n const webpackConfig = combination.chain.toConfig()\n const config = combination.config\n\n return new Promise<Stats | void>((resolve, reject) => {\n if (config.withoutBuild) return\n\n const compiler = webpack(webpackConfig)\n\n const callback = async (err: Error, stats: Stats) => {\n \/\/ \u7701\u7565\u82e5\u5e72\u4ee3\u7801\n onFinish(null, stats)\n resolve(stats)\n }\n\n if (config.isWatch) {\n compiler.watch({\n aggregateTimeout: 300,\n poll: undefined\n }, callback)\n } else {\n compiler.run((err: Error, stats: Stats) => {\n compiler.close(err2 => callback(err || err2, stats))\n })\n }\n })\n}\n<\/code><\/pre>\nconst compiler = webpack(webpackConfig)<\/code> \u4f7f\u7528 webpack<\/code> \u7f16\u8bd1\u3002\u8fd9\u90e8\u5206\u4ee3\u7801\u6bd4\u8f83\u591a\u3002\u540e\u7eed\u6709\u7a7a\u518d\u5199 webpack<\/code> \u7f16\u8bd1\u7684\u6587\u7ae0\u3002<\/p>\n8. \u603b\u7ed3<\/h2>\n
\u6211\u4eec\u5b66\u4e60\u4e86\u4e24\u79cd\u65b9\u5f0f\u5982\u4f55\u8c03\u8bd5 taro<\/code> build \u90e8\u5206\u7684\u6e90\u7801\u3002<\/p>\n\u6211\u4eec\u6765\u603b\u7ed3\u4e0b\uff0c\u6253\u5305\u6784\u5efa\u6d41\u7a0b\u7b80\u5355\u68b3\u7406\u3002<\/p>\n
\n- \u8c03\u7528 taro \u63d2\u4ef6 build<\/li>\n
- \u8c03\u7528\u7aef\u5e73\u53f0\u63d2\u4ef6 Weapp<\/li>\n
- \u5e73\u53f0\u63d2\u4ef6\u7ee7\u627f\u81ea TaroPlatformBase \u7aef\u5e73\u53f0\u63d2\u4ef6\u57fa\u7840\u62bd\u8c61\u7c7b<\/li>\n
- \u5e73\u53f0\u63d2\u4ef6\u7ee7\u627f\u81ea TaroPlatform \u7aef\u5e73\u53f0\u63d2\u4ef6\u62bd\u8c61\u7c7b<\/li>\n<\/ul>\n
\u7b80\u7248\u4ee3\u7801<\/p>\n
class Weapp extends TaroPlatformBase{}\nexport abstract class TaroPlatformBase extends TaroPlatform{\n public async start () {\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 await this.setup()\n \/**\n * \u8c03\u7528 runner \u5f00\u59cb\u7f16\u8bd1\n * @param extraOptions \u9700\u8981\u989d\u5916\u4f20\u5165 runner \u7684\u914d\u7f6e\u9879\n *\/\n await this.build()\n }\n}<\/code><\/pre>\nexport default (ctx: IPluginContext, options: IOptions) => {\nctx.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\u6700\u540e\u8c03\u7528\u7684\u662f @tarojs\/webpack5-runner<\/code>\uff0cwebpack<\/code> \u7f16\u8bd1\u6253\u5305\u751f\u6210\u9879\u76ee\u6587\u4ef6\u3002<\/p>\n\u5728 packages\/taro-service\/dist\/Kernel.js<\/code> \u7684 applyPlugins<\/code> \u65b9\u6cd5\u4e2d\uff0c\u6253\u5370\u51fa plugins-name<\/code> \uff0c\u8c03\u7528\u63d2\u4ef6\u7684\u4f9d\u6b21\u987a\u5e8f\u662f\uff1a
![\"plugins.png\"](\"https:\/\/segmentfault.com\/img\/remote\/1460000046035477\" "\\"plugins.png\\"")
\u4e5f\u662f\u5f00\u53d1\u8005\u5f00\u53d1\u63d2\u4ef6\u914d\u7f6e\u94a9\u5b50\u7684\u6267\u884c\u3002<\/p>\n\u66f4\u591a Taro<\/code> \u7aef\u5e73\u53f0\u63d2\u4ef6\u5b9e\u73b0\u7ec6\u8282\u53ef\u53c2\u8003Taro\u6587\u6863 – \u7aef\u5e73\u53f0\u63d2\u4ef6<\/a>\uff0c\u66f4\u591a Taro<\/code> \u5b9e\u73b0\u7ec6\u8282\u4e5f\u53ef\u4ee5\u53c2\u8003\u5b98\u65b9\u6587\u6863\uff1aTaro \u5b9e\u73b0\u7ec6\u8282<\/a>\u3002<\/p>\n
\n\u5982\u679c\u770b\u5b8c\u6709\u6536\u83b7\uff0c\u6b22\u8fce\u70b9\u8d5e\u3001\u8bc4\u8bba\u3001\u5206\u4eab\u3001\u6536\u85cf\u652f\u6301\u3002\u4f60\u7684\u652f\u6301\u548c\u80af\u5b9a\uff0c\u662f\u6211\u5199\u4f5c\u7684\u52a8\u529b\u3002\u4e5f\u6b22\u8fce\u63d0\u5efa\u8bae\u548c\u4ea4\u6d41\u8ba8\u8bba<\/strong>\u3002<\/p>\n