@@ -14,30 +14,166 @@ pnpm build:h5
1414
1515## 小程序
1616
17- 使用下面的命令来打包：
17+ 以微信小程序为例， 使用下面的命令来打包：
1818
1919``` bash
20- # 微信小程序
2120pnpm build:mp-weixin
2221```
2322
2423产物位于 ` dist/build/mp-weixin ` , 使用微信开发者工具上传即可。
2524
2625::: tip
27- 如若想自动上传到微信小程序，可查看 [ 这里 ] ( https://juejin.cn/post/7272316909051346959 )
26+ 如果想自动上传到微信小程序，可直接使用 [ uni-mini-ci ] ( https://www.npmjs.com/package/uni-mini-ci ) ，或参考 [ 这篇文章 ] ( https:// juejin.cn/post/7272316909051346959) 自行配置。
2827:::
2928
30- ::: tip
31- 要发行其他小程序，执行 ` pnpm build:mp-<platform> ` 打包，并使用对应开发者工具上传即可，具体可查看 package.json 的 scripts 部分。
32- :::
29+ 要发行其他小程序，执行 ` pnpm build:mp-<platform> ` 打包，并使用对应开发者工具上传即可，具体可查看 ` package.json ` 的 ` scripts ` 部分。
3330
34- ## App
31+ ## APP
3532
3633### 离线打包
3734
3835- [ android] ( https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android.html )
3936- [ ios] ( https://nativesupport.dcloud.net.cn/AppDocs/usesdk/ios.html )
4037
4138::: warning
42- 你任然可以使用 HBuilderX 提供的"安心" 打包功能，但是由于这种方式强依赖 HBuilderX，故不做推荐
39+ 你仍然可以使用 HBuilderX 提供的“安心” 打包功能，但是由于这种方式强依赖 HBuilderX，故不做推荐。
4340:::
41+
42+ ## 兼容性
43+
44+ 默认情况下，你不需要调整兼容性相关的构建配置，这是因为较新的浏览器、手机、小程序运行环境提供了较好的兼容性支持。
45+
46+ 但理想很丰满，现实很骨感，总有用户不想换掉自己的旧设备、旧浏览器，而你恰好又需要关怀这些用户。这时候，你就需要调整兼容性相关的构建配置了。
47+
48+ ### VueCLI
49+
50+ 对于部分正在使用 VueCLI 的历史项目，请参考 [ 文档] ( https://cli.vuejs.org/zh/config/#transpiledependencies ) 设置 ` transpileDependencies ` ，VueCLI 会自动增加 JavaScript 和 CSS 的支持。
51+
52+ ### Vite
53+
54+ Vite 底层使用了 [ esbuild] ( https://esbuild.github.io/ ) ，你可以设置 ` build.target ` 和 ` build.cssTarget ` 来做兼容。
55+
56+ ``` ts
57+ import { defineConfig } from ' vite'
58+ import uni from ' @dcloudio/vite-plugin-uni'
59+
60+ export default defineConfig ({
61+ build: {
62+ // esbuild 最低支持 es6
63+ target: ' es6' // JavaScript 语法支持
64+ cssTarget: ' es6' // CSS 语法支持
65+ },
66+ plugins: [uni ()]
67+ })
68+
69+ ```
70+
71+ 但 esbuild 没有覆盖到所有需要兼容的情况。对于 JavaScript，esbuild 没有注入 [ Polyfills] ( https://developer.mozilla.org/en-US/docs/Glossary/Polyfill ) ，这也意味着部分 JavaScript API 不可用。遗憾的是，你无法直接使用 ` @vitejs/plugin-legacy ` 或 ` @vitejs/plugin-legacy-swc ` ，甚至设置 ` @dcloudio/vite-plugin-uni ` 中的 ` viteLegacyOptions ` 也 [ 只会在 H5 中 生效] ( https://github.com/dcloudio/uni-app/issues/3842 ) ，此时只可以使用 ` core-js ` 来手动注入。
72+
73+ ::: code-group
74+
75+ ``` ts [src/main.ts]
76+ /** #ifdef MP */
77+ // 只有构建小程序时手动注入 Polyfills
78+ // 可以按实际情况调整
79+ import ' core-js/actual/array/at'
80+ // ❌ 不要像下面这样做，会占用大量小程序体积且没有必要
81+ // import 'core-js/actual'
82+ /** #endif */
83+ import { createSSRApp } from ' vue'
84+ import { createPinia } from ' pinia'
85+ import App from ' ./App.vue'
86+
87+ const = createPinia ()
88+
89+ export function createApp() {
90+ const = createSSRApp (App ).use (pinia );
91+ return {
92+ app ,
93+ }
94+ }
95+ ```
96+
97+ ``` ts [vite.config.ts]
98+ import { defineConfig } from ' vite'
99+ import uni from ' @dcloudio/vite-plugin-uni'
100+ import { isH5 } from ' @uni-helper/uni-env'
101+ import legacy from ' vite-plugin-legacy'
102+ // 或者使用 vite-plugin-legacy-swc
103+ // import legacy from 'vite-plugin-legacy-swc'
104+
105+ export default defineConfig ({
106+ build: {
107+ // 最低支持 es6
108+ target: ' es6' // JavaScript 语法支持
109+ cssTarget: ' es6' // CSS 语法支持
110+ },
111+ plugins: [
112+ uni (),
113+ // 只有构建 H5 时应用插件自动注入 Polyfills
114+ // 可以按实际情况调整
115+ isH5 ? legacy () : null
116+ ]
117+ })
118+
119+ ```
120+
121+ :::
122+
123+ ::: tip
124+ 你可以使用 [ core-js-compat] ( https://github.com/zloirock/core-js/blob/master/packages/core-js-compat/README.md ) 来确定具体的 Polyfills。
125+ :::
126+
127+ 对于 CSS，可以使用 [ PostCSS] ( https://postcss.org/ ) 和 [ postcss-preset-env] ( https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env ) 。
128+
129+ ``` bash
130+ pnpm install postcss postcss-preset-env -D
131+ ```
132+
133+ ::: code-group
134+
135+ ``` ts [postcss.config.ts]
136+ import postcssPresetEnv from ' postcss-preset-env'
137+
138+ const = []
139+ if (process .env .NODE_ENV === ' production'
140+ plugins .push (
141+ postcssPresetEnv ({
142+ // 自定义相应目标
143+ // 微信小程序 2.11.2 开始支持 Vue3，对应 chrome53 和 ios10
144+ browsers: [' chrome>=53' ' ios>=10'
145+ })
146+ )
147+ }
148+
149+ export default {
150+ plugins
151+ }
152+ ```
153+
154+ ``` ts [vite.config.ts]
155+ import { defineConfig } from ' vite'
156+ import uni from ' @dcloudio/vite-plugin-uni'
157+ import postcssConfig from ' ./postcss.config'
158+
159+ export default defineConfig ({
160+ build: {
161+ cssTarget: ' chrome61'
162+ },
163+ css: {
164+ postcss: postcssConfig
165+ },
166+ plugins: [uni ()]
167+ })
168+
169+ ```
170+
171+ :::
172+
173+ ::: warning
174+ 你可以在 [ dcloudio/uni-app #3367 ] ( https://github.com/dcloudio/uni-app/issues/3367 ) 了解为什么要在 Vite 配置文件内设置 PostCSS。
175+ :::
176+
177+ ### 构建小程序
178+
179+ 对于小程序，你可以直接设置小程序最低基础库要求，以排除部分过于老旧的设备。
0 commit comments