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-07-17<\/code>\uff09\uff0ctaro<\/code> \u6b63\u5f0f\u7248\u662f 3.6.34<\/code>\uff0cTaro 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\u6587\u7ae0\u63d0\u5230\u5c06\u4e8e 2024 \u5e74\u7b2c\u4e8c\u5b63\u5ea6\uff0c\u53d1\u5e03 4.x<\/code>\u3002\u76ee\u524d\u5df2\u7ecf\u53d1\u5e03 4.x<\/code>\u3002\u6240\u4ee5\u6211\u4eec\u76f4\u63a5\u5b66\u4e60 main<\/code> \u5206\u652f\u6700\u65b0\u7248\u672c\u662f 4.0.2<\/code>\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. taro init \u521d\u59cb\u5316\u9879\u76ee\uff0c\u80cc\u540e\u539f\u7406\u662f\u4ec0\u4e48\uff1f\n2. \u5982\u4f55\u8c03\u8bd5 taro cli init \u6e90\u7801\n3. nodejs \u5982\u4f55\u8c03\u7528 rust \u4ee3\u7801\uff1f\n4. \u5982\u4f55\u8c03\u8bd5 rust \u4ee3\u7801\n5. \u5982\u4f55\u4f7f\u7528 handlebars \u6a21\u677f\u5f15\u64ce\n\u7b49\u7b49<\/code><\/pre>\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
\u4f17\u6240\u5468\u77e5\uff0c\u6211\u4eec\u6700\u5f00\u59cb\u521d\u59cb\u5316\u9879\u76ee\u65f6\u90fd\u662f\u4f7f\u7528 taro init<\/code> \u547d\u4ee4\uff0c\u672c\u6587\u6211\u4eec\u7ee7\u7eed\u6765\u5b66\u4e60\u8fd9\u4e2a\u547d\u4ee4\u662f\u5982\u4f55\u5b9e\u73b0\u7684\u3002<\/p>\n\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 npm-dist-tag \u6587\u6863<\/a> \u547d\u4ee4\u6765\u67e5\u770b @tarojs\/cli<\/code> \u5305\u7684\u6240\u6709 tag<\/code> \u7248\u672c\u3002<\/p>\nnpm dist-tag @tarojs\/cli<\/code><\/pre>\n\u5982\u56fe\u6240\u793a\uff1a<\/p>\n
![\"taro-cli-npm-dist-tag.png\"](\"https:\/\/segmentfault.com\/img\/remote\/1460000046025876\" "\\"taro-cli-npm-dist-tag.png\\"")
<\/p>\n
\u76ee\u524d latest<\/code> \u6807\u7b7e\uff08\u9ed8\u8ba4\u7248\u672c\uff09\u662f 3.6.34<\/code>\uff0cnext<\/code> \u6807\u7b7e\u662f 4.0.0<\/code>\u3002\u540e\u7eed latest<\/code> \u6807\u7b7e\u4f1a\u8bbe\u7f6e\u4e3a 4.x<\/code> \u7248\u672c\u3002<\/p>\n\u6211\u4eec\u5148\u7528 @tarojs\/cli@next<\/code> \u521d\u59cb\u5316\u4e00\u4e2a\u9879\u76ee\u770b\u770b\u3002\u5168\u5c40\u5b89\u88c5\u76f8\u5bf9\u9ebb\u70e6\uff0c\u6211\u4eec\u4e0d\u5168\u5c40\u5b89\u88c5\uff0c\u4f7f\u7528 npx<\/code> \u6765\u8fd0\u884c next tag<\/code> \u7248\u672c\u3002<\/p>\nnpx @tarojs\/cli@next init taro4-next<\/code><\/pre>\n\u8fd9\u4e2a\u521d\u59cb\u5316\u5b8c\u6574\u7684\u8fc7\u7a0b\uff0c\u6211\u7528 GIPHY CAPTURE<\/a> \u5de5\u5177\u5f55\u5236\u4e86\u4e00\u4e2agif<\/code>\uff0c\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n![\"taro-init-gif-high.gif\"](\"https:\/\/segmentfault.com\/img\/remote\/1460000046025877\" "\\"taro-init-gif-high.gif\\"")
<\/p>\n
\u6211\u4eec\u63a5\u4e0b\u6765\u5c31\u662f\u4e00\u6b65\u6b65\u6765\u5206\u6790\u8fd9\u4e2a gif<\/code> \u4e2d\u7684\u6bcf\u4e00\u4e2a\u6b65\u9aa4\u7684\u5b9e\u73b0\u539f\u7406\u3002<\/p>\n2. \u8c03\u8bd5 taro init<\/h2>\n
\u6211\u4eec\u5728 .vscode\/launch.json<\/code> \u4e2d\u7684\u539f\u6709\u7684 CLI debug<\/code> \u547d\u4ee4\u884c\u8c03\u8bd5\u914d\u7f6e\uff0c\u6dfb\u52a0 init<\/code> \u914d\u7f6e\u5982\u4e0b\uff1a<\/p>\n\/\/ .vscode\/launch.json\n{\n "version": "0.2.0",\n "configurations": [{\n "type": "node",\n "request": "launch",\n "name": "CLI debug",\n "program": "${workspaceFolder}\/packages\/taro-cli\/bin\/taro",\n+ "console": "integratedTerminal",\n+ "args": [\n+ "init",\n+ "taro-init-test",\n+ ],\n \/\/ \u7701\u7565\u82e5\u5e72\u4ee3\u7801...\n "skipFiles": ["<node_internals>\/**"]\n }]\n}<\/code><\/pre>\n\u5176\u4e2d "console": "integratedTerminal",<\/code> \u914d\u7f6e\u662f\u4e3a\u4e86\u5728\u8c03\u8bd5\u65f6\uff0c\u53ef\u4ee5\u5728\u7ec8\u7aef\u8f93\u5165\u548c\u4ea4\u4e92\u3002<\/p>\n3. init \u547d\u4ee4\u884c fn \u51fd\u6570<\/h2>\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 init<\/code> \u521d\u59cb\u5316\u547d\u4ee4\uff0c\u6700\u7ec8\u8c03\u7528\u7684\u662f packages\/taro-cli\/src\/presets\/commands\/init.ts<\/code> \u6587\u4ef6\u4e2d\u7684 ctx.registerCommand<\/code> \u6ce8\u518c\u7684 init<\/code> \u547d\u4ee4\u884c\u7684 fn<\/code> \u51fd\u6570\u3002<\/p>\n\/\/ packages\/taro-cli\/src\/presets\/commands\/init.ts\nimport type { IPluginContext } from '@tarojs\/service'\n\nexport default (ctx: IPluginContext) => {\n ctx.registerCommand({\n name: 'init',\n optionsMap: {\n '--name [name]': '\u9879\u76ee\u540d\u79f0',\n '--description [description]': '\u9879\u76ee\u4ecb\u7ecd',\n '--typescript': '\u4f7f\u7528TypeScript',\n '--npm [npm]': '\u5305\u7ba1\u7406\u5de5\u5177',\n '--template-source [templateSource]': '\u9879\u76ee\u6a21\u677f\u6e90',\n '--clone [clone]': '\u62c9\u53d6\u8fdc\u7a0b\u6a21\u677f\u65f6\u4f7f\u7528git clone',\n '--template [template]': '\u9879\u76ee\u6a21\u677f',\n '--css [css]': 'CSS\u9884\u5904\u7406\u5668(sass\/less\/stylus\/none)',\n '-h, --help': 'output usage information'\n },\n async fn (opts) {\n \/\/ init project\n const { appPath } = ctx.paths\n const { options } = opts\n const { projectName, templateSource, clone, template, description, typescript, css, npm, framework, compiler, hideDefaultTemplate } = options\n const Project = require('..\/..\/create\/project').default\n const project = new Project({\n \/\/ \u7701\u7565\u82e5\u5e72\u53c2\u6570...\n })\n\n project.create()\n }\n })\n}\n<\/code><\/pre>\nfn<\/code> \u51fd\u6570\uff0c\u5176\u4e2d options<\/code> \u53c2\u6570\u662f init<\/code> \u547d\u4ee4\u884c\u4e2d\u7684\u6240\u6709\u53c2\u6570\u3002
\u4e3b\u8981\u505a\u4e86\u5982\u4e0b\u51e0\u4ef6\u4e8b\uff1a<\/p>\n\n- \u8bfb\u53d6\u7ec4\u5408\u5404\u79cd\u53c2\u6570\uff0c\u521d\u59cb\u5316
project<\/code> \u5bf9\u8c61\uff0c\u5e76\u8c03\u7528 create<\/code> \u65b9\u6cd5\u3002<\/li>\n<\/ul>\n\u6211\u4eec\u91cd\u70b9\u6765\u770b packages\/taro-cli\/src\/create\/project.ts<\/code> \u7684 Project<\/code> \u7c7b\u7684\u5b9e\u73b0\uff0c\u548c create<\/code> \u65b9\u6cd5\u3002<\/p>\n4. new Project \u6784\u9020\u51fd\u6570<\/h2>\n\/\/ packages\/taro-cli\/src\/create\/project.ts\nexport default class Project extends Creator {\n public rootPath: string\n public conf: IProjectConfOptions\n\n constructor (options: IProjectConfOptions) {\n super(options.sourceRoot)\n const unSupportedVer = semver.lt(process.version, 'v18.0.0')\n if (unSupportedVer) {\n throw new Error('Node.js \u7248\u672c\u8fc7\u4f4e\uff0c\u63a8\u8350\u5347\u7ea7 Node.js \u81f3 v18.0.0+')\n }\n this.rootPath = this._rootPath\n\n this.conf = Object.assign(\n {\n projectName: '',\n projectDir: '',\n template: '',\n description: '',\n npm: ''\n },\n options\n )\n }\n}<\/code><\/pre>\nProject<\/code> \u7ee7\u627f\u4e86 Creator<\/code> \u7c7b\u3002<\/p>\n\u6784\u9020\u51fd\u6570\u4e2d\uff0c\u4f7f\u7528 semver.lt<\/code> \u5224\u65ad\u5f53\u524d node<\/code> \u7248\u672c\u662f\u5426\u4f4e\u4e8e v18.0.0<\/code>\uff0c\u5982\u679c\u4f4e\u4e8e\u5219\u62a5\u9519\u3002
semver<\/a> \u662f\u4e00\u4e2a\u7248\u672c\u53f7\u6bd4\u8f83\u5e93\uff0c\u53ef\u4ee5\u7528\u6765\u5224\u65ad node<\/code> \u7248\u672c\u662f\u5426\u7b26\u5408\u8981\u6c42\u3002<\/p>\n\u5176\u6b21\u5c31\u662f\u521d\u59cb\u5316 this.rootPath<\/code> \u548c this.conf<\/code>\u3002<\/p>\n\u6211\u4eec\u7ee7\u7eed\u6765\u770b Creator<\/code> \u7c7b\uff0c\u6784\u9020\u51fd\u6570\u4e2d\u8c03\u7528\u4e86 init<\/code> \u65b9\u6cd5\u3002<\/p>\n\/\/ packages\/taro-cli\/src\/create\/creator.ts\nexport default class Creator {\n protected _rootPath: string\n public rootPath: string\n\n constructor (sourceRoot?: string) {\n this.rootPath = this.sourceRoot(sourceRoot || path.join(getRootPath()))\n this.init()\n }\n}<\/code><\/pre>\n\u6240\u4ee5\u7ee7\u7eed\u6765\u770b init<\/code> \u65b9\u6cd5\u3002<\/p>\n\/\/ packages\/taro-cli\/src\/create\/project.ts\ninit () {\n clearConsole()\n console.log(chalk.green('Taro \u5373\u5c06\u521b\u5efa\u4e00\u4e2a\u65b0\u9879\u76ee!'))\n console.log(`Need help? Go and open issue: ${chalk.blueBright('https:\/\/tls.jd.com\/taro-issue-helper')}`)\n console.log()\n}<\/code><\/pre>\n\u8c03\u8bd5\u622a\u56fe\u5982\u4e0b\uff1a<\/p>\n
![\"\u8c03\u8bd5\u622a\u56fe\"](\"https:\/\/segmentfault.com\/img\/remote\/1460000046025878\" "\\"\u8c03\u8bd5\u622a\u56fe\\"")
<\/p>\n
\u8f93\u51fa\u5c31\u662f\u8fd9\u4e2a\u56fe\uff1a<\/p>\n
![\"taro-init-0.png\"](\"https:\/\/segmentfault.com\/img\/remote\/1460000046025879\" "\\"taro-init-0.png\\"")
<\/p>\n
\u5176\u4e2d\ud83d\udc7d Taro v4.0.0<\/code> \u8f93\u51fa\u7684\u662f tarojs-cli\/package.json<\/code> \u7684\u7248\u672c\uff0c\u7b2c\u4e00\u7bc7\u6587\u7ae0 4. taro-cli\/src\/utils\/index.ts<\/a> \u4e2d\u6709\u8be6\u7ec6\u8bb2\u8ff0\uff0c\u8fd9\u91cc\u5c31\u4e0d\u518d\u8d58\u8ff0\u4e86\u3002<\/p>\n\u8f93\u51fa\u83b7\u53d6 taro \u5168\u5c40\u914d\u7f6e\u6210\u529f<\/code>\u662f\u6307\u83b7\u53d6 ~\/.taro-global-config\/index.json<\/code> \u6587\u4ef6\u7684\u63d2\u4ef6\u96c6 presets<\/code> \u548c\u63d2\u4ef6 plugins<\/code>\u3002\u7b2c\u4e00\u7bc7\u6587\u7ae0 6.2.2 config.initGlobalConfig \u521d\u59cb\u5316\u5168\u5c40\u914d\u7f6e<\/a>\u4e2d\u6709\u8be6\u7ec6\u8bb2\u8ff0\uff0cspinner.succeed('\u83b7\u53d6 taro \u5168\u5c40\u914d\u7f6e\u6210\u529f')<\/code> \u8fd9\u91cc\u5c31\u4e0d\u518d\u8d58\u8ff0\u4e86\u3002<\/p>\n\u770b\u5b8c\u4e86 Project<\/code> \u6784\u9020\u51fd\u6570\uff0c\u6211\u4eec\u6765\u770b Project<\/code> \u7c7b\u7684 create<\/code> \u65b9\u6cd5\u3002<\/p>\n4.1 project.create \u521b\u5efa\u9879\u76ee<\/h3>\n\/\/ packages\/taro-cli\/src\/create\/project.ts\nasync create () {\n try {\n const answers = await this.ask()\n const date = new Date()\n this.conf = Object.assign(this.conf, answers)\n this.conf.date = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`\n this.write()\n } catch (error) {\n console.log(chalk.red('\u521b\u5efa\u9879\u76ee\u5931\u8d25: ', error))\n }\n}<\/code><\/pre>\ncreate<\/code> \u51fd\u6570\u4e3b\u8981\u505a\u4e86\u4ee5\u4e0b\u51e0\u4ef6\u4e8b\uff1a<\/p>\n\n- \u8c03\u7528
ask<\/code> \u8be2\u95ee\u7528\u6237\u8f93\u5165\u9879\u76ee\u540d\u79f0\u3001\u63cf\u8ff0\u3001CSS\u9884\u5904\u7406\u5668\u3001\u5305\u7ba1\u7406\u5de5\u5177\u7b49\u3002<\/li>\n- \u628a\u7528\u6237\u53cd\u9988\u7684\u7ed3\u679c\u548c\u4e4b\u524d\u7684\u914d\u7f6e\u5408\u5e76\u8d77\u6765\uff0c\u5f97\u5230
this.conf<\/code>\u3002<\/li>\n- \u8c03\u7528
write<\/code> \u65b9\u6cd5\uff0c\u5199\u5165\u6587\u4ef6\uff0c\u521d\u59cb\u5316\u6a21\u677f\u9879\u76ee\u3002<\/li>\n<\/ul>\n\u8c03\u8bd5\u622a\u56fe\u5982\u4e0b\uff1a<\/p>\n
![\"taro-init-debugger-create.png\"](\"https:\/\/segmentfault.com\/img\/remote\/1460000046025880\" "\\"taro-init-debugger-create.png\\"")
<\/p>\n
this.conf<\/code> \u53c2\u6570\u7ed3\u679c\u5982\u4e0b\uff1a<\/p>\nconst conf = {\n projectName: "taro-init-test",\n projectDir: "\/Users\/ruochuan\/git-source\/github\/taro",\n template: "default",\n description: "taro",\n npm: "Yarn",\n templateSource: "direct:https:\/\/gitee.com\/o2team\/taro-project-templates.git#v4.0",\n clone: false,\n typescript: true,\n framework: "React",\n compiler: "Webpack5",\n hideDefaultTemplate: undefined,\n css: "Sass",\n date: "2024-7-12",\n}<\/code><\/pre>\n\u6211\u4eec\u6765\u770b ask<\/code> \u65b9\u6cd5\u3002<\/p>\n5. ask \u8be2\u95ee\u7528\u6237\u8f93\u5165\u9879\u76ee\u540d\u79f0\u3001\u63cf\u8ff0\u7b49<\/h2>\n\/\/ packages\/taro-cli\/src\/create\/project.ts\nasync ask () {\n let prompts: Record<string, unknown>[] = []\n const conf = this.conf\n\n this.askProjectName(conf, prompts)\n this.askDescription(conf, prompts)\n this.askFramework(conf, prompts)\n this.askTypescript(conf, prompts)\n this.askCSS(conf, prompts)\n this.askCompiler(conf, prompts)\n this.askNpm(conf, prompts)\n await this.askTemplateSource(conf, prompts)\n\n const answers = await inquirer.prompt<IProjectConf>(prompts)\n\n prompts = []\n const templates = await this.fetchTemplates(answers)\n await this.askTemplate(conf, prompts, templates)\n const templateChoiceAnswer = await inquirer.prompt<IProjectConf>(prompts)\n\n return {\n ...answers,\n ...templateChoiceAnswer\n }\n }<\/code><\/pre>\n