Skip to content

Commit f31e7cb

Browse files
liuzejialiuzejia
liuzejia
authored and
liuzejia
committed
feat: 更新模版
1 parent 6d11352 commit f31e7cb

File tree

2 files changed

+130
-44
lines changed

2 files changed

+130
-44
lines changed

‎docs/template.md‎

Lines changed: 65 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -83,21 +83,35 @@ zip 包解压出单文件夹，文件夹内包含若干模板。
8383

8484
很多情况下需要为模板加入一些逻辑，从而根据不同的环境生成不同的模板内容。
8585

86-
开发者可以在模板根目录加入 **template_creator.js** 文件，文件对外 exports 包含 handler 与 basePageFiles 字段的对象：
86+
开发者可以在模板根目录加入 **template_creator.js** 文件，文件对外 exports 包含 handler 、 basePageFiles 于 compiler 字段的对象：
8787

8888
```js {5,16} title="template_creator.js"
89-
function createWhenTs(params) {
89+
const path = require('path')
90+
91+
function normalizePath (path) {
92+
return path.replace(/\\/g, '/').replace(/\/{2,}/g, '/')
93+
}
94+
95+
function createWhenTs(err, params) {
9096
return params.typescript ? true : false
9197
}
98+
const SOURCE_ENTRY = '/src'
99+
const PAGES_ENTRY = '/src/pages'
92100

93101
const handler = {
94102
'/global.d.ts': createWhenTs,
95103
'/tsconfig.json': createWhenTs,
96-
'/src/pages/index/index.jsx'({ pageName }) {
97-
return { setPageName: `/src/pages/${pageName}/${pageName}.jsx` }
104+
'/src/pages/index/index.jsx' (err, { pageName = '', pageDir = '', subPkg = '' }) {
105+
return {
106+
setPageName: normalizePath(path.join(PAGES_ENTRY, pageDir, pageName, 'index.jsx')),
107+
setSubPkgName: normalizePath(path.join(SOURCE_ENTRY, subPkg, pageDir, pageName, 'index.jsx'))
108+
}
98109
},
99-
'/src/pages/index/index.css'({ pageName }) {
100-
return { setPageName: `/src/pages/${pageName}/${pageName}.css` }
110+
'/src/pages/index/index.css' (err, { pageName = '', pageDir = '', subPkg = '' }) {
111+
return {
112+
setPageName: normalizePath(path.join(PAGES_ENTRY, pageDir, pageName, 'index.css')),
113+
setSubPkgName: normalizePath(path.join(SOURCE_ENTRY, subPkg, pageDir, pageName, 'index.css'))
114+
}
101115
},
102116
}
103117

@@ -106,12 +120,13 @@ const basePageFiles = ['/src/pages/index/index.jsx', '/src/pages/index/index.css
106120
module.exports = {
107121
handler,
108122
basePageFiles,
123+
compiler: ['webpack5', 'webpack4', 'vite']
109124
}
110125
```
111126

112127
#### 模板语言
113128

114-
请使用 [ejs](https://ejs.co/) 作为模板语言，各模板文件都将接收到全局模板参数。
129+
请使用 [Handlebars](https://handlebarsjs.com/) 作为模板语言，各模板文件都将接收到全局模板参数。
115130

116131
##### 默认全局模板参数（模板中可直接使用的变量）
117132

@@ -121,22 +136,18 @@ module.exports = {
121136
| description | string | 项目描述 |
122137
| version | string | Taro CLI 版本 |
123138
| date | string | 模板创建时间戳 |
124-
| css | 'none' or 'sass' or 'stylus' or 'less' | 样式预处理工具 |
139+
| css | 'None' or 'Sass' or 'Stylus' or 'Less' | 样式预处理工具 |
125140
| cssExt | string | 样式文件后缀 |
126141
| typescript | boolean | 是否使用 TS |
127142
| pageName | string | `taro create` 时传入的页面名称，默认 'index' |
128143
| template | string | 模板名称 |
129-
144+
| framework | 'React' or 'Preact' or 'Vue' or 'Vue3' | 框架名称 |
145+
| compiler | 'Webpack4' or 'Webpack5' or 'Vite' | 编译模式名称 |
130146
##### 例子
131147

132-
```ejs title="index.js"
133-
<%if (typescript) {-%>
134-
import Taro, { Component, Config } from '@tarojs/taro'
135-
<%} else { -%>
136-
import Taro, { Component } from '@tarojs/taro'
137-
<%}-%>
138-
import { View, Text } from '@tarojs/components'
139-
import './<%= pageName %>.<%= cssExt %>'
148+
```handlebars
149+
import { defineConfig{{#if typescript }}, type UserConfigExport{{/if}} } from '@tarojs/cli'
150+
{{#if typescript }}import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'{{/if}}
140151
```
141152

142153
#### handler 字段
@@ -155,6 +166,12 @@ handler 用于控制是否生成某文件，或给文件传入特定参数。
155166

156167
params: object
157168

169+
:::info
170+
`params.pageDir` Taro v4.0.0+ 开始支持
171+
172+
`params.subPkg` Taro v4.0.0+ 开始支持
173+
:::
174+
158175
| 属性 | 类型 | 说明 |
159176
| :----------- | :------------------------------------- | :-------------------------------------------- |
160177
| projectName | string | 项目名 |
@@ -164,13 +181,19 @@ params: object
164181
| css | 'none' or 'sass' or 'stylus' or 'less' | 样式预处理工具 |
165182
| typescript | boolean | 是否使用 TS |
166183
| pageName | string | 页面名称 |
184+
| pageDir | string | 页面路径（相对于「页面目录」的相对路径） taro create 时 --dir 传入的值|
185+
| subPkg | string | 分包页面路径（相对于「src目录」的相对路径） taro create 时 --subpkg 传入的值|
167186
| template | string | 模板名称 |
168187
| templatePath | string | 模板路径 |
169188
| projectPath | string | 目标路径 |
170189
| period | 'createApp' or 'createPage' | `taro init` 创建项目或 `taro create` 创建页面 |
171190

172191
return: boolean/object
173192

193+
:::info
194+
`object.setSubPkgName` Taro v4.0.0+ 开始支持
195+
:::
196+
174197
返回值说明
175198

176199
| 取值 | 说明 |
@@ -191,7 +214,7 @@ return: boolean/object
191214
当用户选择了使用 typescript 时，才生成 **global.d.ts** 和 **tsconfig.json** 文件。
192215

193216
```js title="template_creator.js"
194-
function createWhenTs(params) {
217+
function createWhenTs(err, params) {
195218
return params.typescript ? true : false
196219
}
197220

@@ -214,12 +237,24 @@ basePageFiles 告诉 CLI，当用户使用 `taro create` 命令创建页面时
214237
当用户使用命令 `taro create --page=detail` 时，会创建 **/src/pages/detail/detail.jsx** 与 **/src/pages/detail/detail.css** 两个文件。
215238

216239
```js title="template_creator.js"
240+
const path = require('path')
241+
242+
function normalizePath (path) {
243+
return path.replace(/\\/g, '/').replace(/\/{2,}/g, '/')
244+
}
245+
217246
const handler = {
218-
'/src/pages/index/index.jsx'({ pageName }) {
219-
return { setPageName: `/src/pages/${pageName}/${pageName}.jsx` }
247+
'/src/pages/index/index.jsx' (err, { pageName = '', pageDir = '', subPkg = '' }) {
248+
return {
249+
setPageName: normalizePath(path.join(PAGES_ENTRY, pageDir, pageName, 'index.jsx')),
250+
setSubPkgName: normalizePath(path.join(SOURCE_ENTRY, subPkg, pageDir, pageName, 'index.jsx'))
251+
}
220252
},
221-
'/src/pages/index/index.css'({ pageName }) {
222-
return { setPageName: `/src/pages/${pageName}/${pageName}.css` }
253+
'/src/pages/index/index.css' (err, { pageName = '', pageDir = '', subPkg = '' }) {
254+
return {
255+
setPageName: normalizePath(path.join(PAGES_ENTRY, pageDir, pageName, 'index.css')),
256+
setSubPkgName: normalizePath(path.join(SOURCE_ENTRY, subPkg, pageDir, pageName, 'index.css'))
257+
}
223258
},
224259
}
225260

@@ -230,3 +265,11 @@ module.exports = {
230265
basePageFiles,
231266
}
232267
```
268+
269+
### compiler 字段
270+
271+
:::info
272+
Taro v4.0.0+ 开始支持
273+
:::
274+
275+
compiler 告诉 cli 当前模版支持的编译器类型，该值是一个 `string[]`，目前 taro 支持的编译器类型有 `webpack4、webpack5、vite`

‎versioned_docs/version-4.x/template.md‎

Lines changed: 65 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -83,21 +83,35 @@ zip 包解压出单文件夹，文件夹内包含若干模板。
8383

8484
很多情况下需要为模板加入一些逻辑，从而根据不同的环境生成不同的模板内容。
8585

86-
开发者可以在模板根目录加入 **template_creator.js** 文件，文件对外 exports 包含 handler 与 basePageFiles 字段的对象：
86+
开发者可以在模板根目录加入 **template_creator.js** 文件，文件对外 exports 包含 handler 、 basePageFiles 于 compiler 字段的对象：
8787

8888
```js {5,16} title="template_creator.js"
89-
function createWhenTs(params) {
89+
const path = require('path')
90+
91+
function normalizePath (path) {
92+
return path.replace(/\\/g, '/').replace(/\/{2,}/g, '/')
93+
}
94+
95+
function createWhenTs(err, params) {
9096
return params.typescript ? true : false
9197
}
98+
const SOURCE_ENTRY = '/src'
99+
const PAGES_ENTRY = '/src/pages'
92100

93101
const handler = {
94102
'/global.d.ts': createWhenTs,
95103
'/tsconfig.json': createWhenTs,
96-
'/src/pages/index/index.jsx'({ pageName }) {
97-
return { setPageName: `/src/pages/${pageName}/${pageName}.jsx` }
104+
'/src/pages/index/index.jsx' (err, { pageName = '', pageDir = '', subPkg = '' }) {
105+
return {
106+
setPageName: normalizePath(path.join(PAGES_ENTRY, pageDir, pageName, 'index.jsx')),
107+
setSubPkgName: normalizePath(path.join(SOURCE_ENTRY, subPkg, pageDir, pageName, 'index.jsx'))
108+
}
98109
},
99-
'/src/pages/index/index.css'({ pageName }) {
100-
return { setPageName: `/src/pages/${pageName}/${pageName}.css` }
110+
'/src/pages/index/index.css' (err, { pageName = '', pageDir = '', subPkg = '' }) {
111+
return {
112+
setPageName: normalizePath(path.join(PAGES_ENTRY, pageDir, pageName, 'index.css')),
113+
setSubPkgName: normalizePath(path.join(SOURCE_ENTRY, subPkg, pageDir, pageName, 'index.css'))
114+
}
101115
},
102116
}
103117

@@ -106,12 +120,13 @@ const basePageFiles = ['/src/pages/index/index.jsx', '/src/pages/index/index.css
106120
module.exports = {
107121
handler,
108122
basePageFiles,
123+
compiler: ['webpack5', 'webpack4', 'vite']
109124
}
110125
```
111126

112127
#### 模板语言
113128

114-
请使用 [ejs](https://ejs.co/) 作为模板语言，各模板文件都将接收到全局模板参数。
129+
请使用 [Handlebars](https://handlebarsjs.com/) 作为模板语言，各模板文件都将接收到全局模板参数。
115130

116131
##### 默认全局模板参数（模板中可直接使用的变量）
117132

@@ -121,22 +136,18 @@ module.exports = {
121136
| description | string | 项目描述 |
122137
| version | string | Taro CLI 版本 |
123138
| date | string | 模板创建时间戳 |
124-
| css | 'none' or 'sass' or 'stylus' or 'less' | 样式预处理工具 |
139+
| css | 'None' or 'Sass' or 'Stylus' or 'Less' | 样式预处理工具 |
125140
| cssExt | string | 样式文件后缀 |
126141
| typescript | boolean | 是否使用 TS |
127142
| pageName | string | `taro create` 时传入的页面名称，默认 'index' |
128143
| template | string | 模板名称 |
129-
144+
| framework | 'React' or 'Preact' or 'Vue' or 'Vue3' | 框架名称 |
145+
| compiler | 'Webpack4' or 'Webpack5' or 'Vite' | 编译模式名称 |
130146
##### 例子
131147

132-
```ejs title="index.js"
133-
<%if (typescript) {-%>
134-
import Taro, { Component, Config } from '@tarojs/taro'
135-
<%} else { -%>
136-
import Taro, { Component } from '@tarojs/taro'
137-
<%}-%>
138-
import { View, Text } from '@tarojs/components'
139-
import './<%= pageName %>.<%= cssExt %>'
148+
```handlebars
149+
import { defineConfig{{#if typescript }}, type UserConfigExport{{/if}} } from '@tarojs/cli'
150+
{{#if typescript }}import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'{{/if}}
140151
```
141152

142153
#### handler 字段
@@ -155,6 +166,12 @@ handler 用于控制是否生成某文件，或给文件传入特定参数。
155166

156167
params: object
157168

169+
:::info
170+
`params.pageDir` Taro v4.0.0+ 开始支持
171+
172+
`params.subPkg` Taro v4.0.0+ 开始支持
173+
:::
174+
158175
| 属性 | 类型 | 说明 |
159176
| :----------- | :------------------------------------- | :-------------------------------------------- |
160177
| projectName | string | 项目名 |
@@ -164,13 +181,19 @@ params: object
164181
| css | 'none' or 'sass' or 'stylus' or 'less' | 样式预处理工具 |
165182
| typescript | boolean | 是否使用 TS |
166183
| pageName | string | 页面名称 |
184+
| pageDir | string | 页面路径（相对于「页面目录」的相对路径） taro create 时 --dir 传入的值|
185+
| subPkg | string | 分包页面路径（相对于「src目录」的相对路径） taro create 时 --subpkg 传入的值|
167186
| template | string | 模板名称 |
168187
| templatePath | string | 模板路径 |
169188
| projectPath | string | 目标路径 |
170189
| period | 'createApp' or 'createPage' | `taro init` 创建项目或 `taro create` 创建页面 |
171190

172191
return: boolean/object
173192

193+
:::info
194+
`object.setSubPkgName` Taro v4.0.0+ 开始支持
195+
:::
196+
174197
返回值说明
175198

176199
| 取值 | 说明 |
@@ -191,7 +214,7 @@ return: boolean/object
191214
当用户选择了使用 typescript 时，才生成 **global.d.ts** 和 **tsconfig.json** 文件。
192215

193216
```js title="template_creator.js"
194-
function createWhenTs(params) {
217+
function createWhenTs(err, params) {
195218
return params.typescript ? true : false
196219
}
197220

@@ -214,12 +237,24 @@ basePageFiles 告诉 CLI，当用户使用 `taro create` 命令创建页面时
214237
当用户使用命令 `taro create --page=detail` 时，会创建 **/src/pages/detail/detail.jsx** 与 **/src/pages/detail/detail.css** 两个文件。
215238

216239
```js title="template_creator.js"
240+
const path = require('path')
241+
242+
function normalizePath (path) {
243+
return path.replace(/\\/g, '/').replace(/\/{2,}/g, '/')
244+
}
245+
217246
const handler = {
218-
'/src/pages/index/index.jsx'({ pageName }) {
219-
return { setPageName: `/src/pages/${pageName}/${pageName}.jsx` }
247+
'/src/pages/index/index.jsx' (err, { pageName = '', pageDir = '', subPkg = '' }) {
248+
return {
249+
setPageName: normalizePath(path.join(PAGES_ENTRY, pageDir, pageName, 'index.jsx')),
250+
setSubPkgName: normalizePath(path.join(SOURCE_ENTRY, subPkg, pageDir, pageName, 'index.jsx'))
251+
}
220252
},
221-
'/src/pages/index/index.css'({ pageName }) {
222-
return { setPageName: `/src/pages/${pageName}/${pageName}.css` }
253+
'/src/pages/index/index.css' (err, { pageName = '', pageDir = '', subPkg = '' }) {
254+
return {
255+
setPageName: normalizePath(path.join(PAGES_ENTRY, pageDir, pageName, 'index.css')),
256+
setSubPkgName: normalizePath(path.join(SOURCE_ENTRY, subPkg, pageDir, pageName, 'index.css'))
257+
}
223258
},
224259
}
225260

@@ -230,3 +265,11 @@ module.exports = {
230265
basePageFiles,
231266
}
232267
```
268+
269+
### compiler 字段
270+
271+
:::info
272+
Taro v4.0.0+ 开始支持
273+
:::
274+
275+
compiler 告诉 cli 当前模版支持的编译器类型，该值是一个 `string[]`，目前 taro 支持的编译器类型有 `webpack4、webpack5、vite`

0 commit comments

Comments
 (0)