Browse Source

feat: 添加打包是否启动`cdn`替换本地库配置,默认`false`不启动

i18n
xiaoxian521 2 years ago
parent
commit
49cdcf216f
  1. 3
      .env.production
  2. 3
      .env.staging
  3. 67
      build/cdn.ts
  4. 3
      build/index.ts
  5. 8
      build/plugins.ts
  6. 1
      package.json
  7. 39
      pnpm-lock.yaml
  8. 1
      types/global.d.ts
  9. 3
      vite.config.ts

3
.env.production

@ -9,3 +9,6 @@ VITE_PROXY_DOMAIN_REAL = ""
# 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false # 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false
VITE_LEGACY = false VITE_LEGACY = false
# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
VITE_CDN = false

3
.env.staging

@ -12,3 +12,6 @@ VITE_PROXY_DOMAIN_REAL = ""
# 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false # 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false
VITE_LEGACY = false VITE_LEGACY = false
# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
VITE_CDN = false

67
build/cdn.ts

@ -0,0 +1,67 @@
import { Plugin as importToCDN } from "vite-plugin-cdn-import";
/**
* @description `cdn`使cdn模式 .env.production VITE_CDN true
* cdnhttps://www.bootcdn.cn,当然你也可以选择 https://unpkg.com 或者 https://www.jsdelivr.com
* mockjs不能用cdn模式引入mockjs使
* 使jscss文件cdn
*/
export const cdn = importToCDN({
//(prodUrl解释: name: 对应下面modules的name,version: 自动读取本地package.json中dependencies依赖中对应包的版本号,path: 对应下面modules的path)
prodUrl: "https://cdn.bootcdn.net/ajax/libs/{name}/{version}/{path}",
modules: [
{
name: "vue",
var: "Vue",
path: "vue.global.prod.min.js"
},
{
name: "vue-router",
var: "VueRouter",
path: "vue-router.global.min.js"
},
{
name: "vue-i18n",
var: "VueI18n",
path: "vue-i18n.runtime.global.prod.min.js"
},
// 项目中没有直接安装vue-demi,但是pinia用到了,所以需要在引入pinia前引入vue-demi(https://github.com/vuejs/pinia/blob/v2/packages/pinia/package.json#L77)
{
name: "vue-demi",
var: "VueDemi",
path: "index.iife.min.js"
},
{
name: "pinia",
var: "Pinia",
path: "pinia.iife.min.js"
},
{
name: "element-plus",
var: "ElementPlus",
path: "index.full.min.js",
css: "index.min.css"
},
{
name: "axios",
var: "axios",
path: "axios.min.js"
},
{
name: "dayjs",
var: "dayjs",
path: "dayjs.min.js"
},
{
name: "echarts",
var: "echarts",
path: "echarts.min.js"
},
{
name: "lodash",
var: "lodash",
// 可写`完整路径`,会替换`prodUrl`
path: "https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"
}
]
});

3
build/index.ts

@ -7,7 +7,8 @@ const warpperEnv = (envConf: Recordable): ViteEnv => {
VITE_PROXY_DOMAIN: "", VITE_PROXY_DOMAIN: "",
VITE_PROXY_DOMAIN_REAL: "", VITE_PROXY_DOMAIN_REAL: "",
VITE_ROUTER_HISTORY: "", VITE_ROUTER_HISTORY: "",
VITE_LEGACY: false
VITE_LEGACY: false,
VITE_CDN: false
}; };
for (const envName of Object.keys(envConf)) { for (const envName of Object.keys(envConf)) {

8
build/plugins.ts

@ -1,3 +1,4 @@
import { cdn } from "./cdn";
import { resolve } from "path"; import { resolve } from "path";
import vue from "@vitejs/plugin-vue"; import vue from "@vitejs/plugin-vue";
import { viteBuildInfo } from "./info"; import { viteBuildInfo } from "./info";
@ -13,7 +14,11 @@ import themePreprocessorPlugin from "@pureadmin/theme";
import { genScssMultipleScopeVars } from "/@/layout/theme"; import { genScssMultipleScopeVars } from "/@/layout/theme";
import DefineOptions from "unplugin-vue-define-options/vite"; import DefineOptions from "unplugin-vue-define-options/vite";
export function getPluginsList(command, VITE_LEGACY) {
export function getPluginsList(
command: string,
VITE_LEGACY: boolean,
VITE_CDN: boolean
) {
const prodMock = true; const prodMock = true;
const lifecycle = process.env.npm_lifecycle_event; const lifecycle = process.env.npm_lifecycle_event;
return [ return [
@ -26,6 +31,7 @@ export function getPluginsList(command, VITE_LEGACY) {
}), }),
// jsx、tsx语法支持 // jsx、tsx语法支持
vueJsx(), vueJsx(),
VITE_CDN ? cdn : null,
DefineOptions(), DefineOptions(),
// 线上环境删除console // 线上环境删除console
removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }), removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),

1
package.json

@ -116,6 +116,7 @@
"typescript": "^4.7.4", "typescript": "^4.7.4",
"unplugin-vue-define-options": "0.7.3", "unplugin-vue-define-options": "0.7.3",
"vite": "^3.1.8", "vite": "^3.1.8",
"vite-plugin-cdn-import": "^0.3.5",
"vite-plugin-mock": "^2.9.6", "vite-plugin-mock": "^2.9.6",
"vite-plugin-remove-console": "^1.1.0", "vite-plugin-remove-console": "^1.1.0",
"vite-svg-loader": "^3.6.0", "vite-svg-loader": "^3.6.0",

39
pnpm-lock.yaml

@ -81,6 +81,7 @@ specifiers:
typescript: ^4.7.4 typescript: ^4.7.4
unplugin-vue-define-options: 0.7.3 unplugin-vue-define-options: 0.7.3
vite: ^3.1.8 vite: ^3.1.8
vite-plugin-cdn-import: ^0.3.5
vite-plugin-mock: ^2.9.6 vite-plugin-mock: ^2.9.6
vite-plugin-remove-console: ^1.1.0 vite-plugin-remove-console: ^1.1.0
vite-svg-loader: ^3.6.0 vite-svg-loader: ^3.6.0
@ -182,6 +183,7 @@ devDependencies:
typescript: 4.8.4 typescript: 4.8.4
unplugin-vue-define-options: 0.7.3_vite@3.1.8+vue@3.2.41 unplugin-vue-define-options: 0.7.3_vite@3.1.8+vue@3.2.41
vite: 3.1.8_sass@1.55.0+terser@5.15.1 vite: 3.1.8_sass@1.55.0+terser@5.15.1
vite-plugin-cdn-import: 0.3.5
vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@3.1.8 vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@3.1.8
vite-plugin-remove-console: 1.1.0 vite-plugin-remove-console: 1.1.0
vite-svg-loader: 3.6.0 vite-svg-loader: 3.6.0
@ -4670,6 +4672,15 @@ packages:
} }
engines: { node: ">=0.10.0" } engines: { node: ">=0.10.0" }
/is-reference/1.2.1:
resolution:
{
integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==
}
dependencies:
"@types/estree": 0.0.39
dev: true
/is-regexp/1.0.0: /is-regexp/1.0.0:
resolution: resolution:
{ {
@ -6524,6 +6535,23 @@ packages:
glob: 7.2.3 glob: 7.2.3
dev: true dev: true
/rollup-plugin-external-globals/0.6.1:
resolution:
{
integrity: sha512-mlp3KNa5sE4Sp9UUR2rjBrxjG79OyZAh/QC18RHIjM+iYkbBwNXSo8DHRMZWtzJTrH8GxQ+SJvCTN3i14uMXIA==
}
peerDependencies:
rollup: ^2.25.0
peerDependenciesMeta:
rollup:
optional: true
dependencies:
"@rollup/pluginutils": 4.2.1
estree-walker: 2.0.2
is-reference: 1.2.1
magic-string: 0.25.9
dev: true
/rollup-plugin-visualizer/5.8.3: /rollup-plugin-visualizer/5.8.3:
resolution: resolution:
{ {
@ -7499,6 +7527,17 @@ packages:
spdx-expression-parse: 3.0.1 spdx-expression-parse: 3.0.1
dev: true dev: true
/vite-plugin-cdn-import/0.3.5:
resolution:
{
integrity: sha512-e1raoalfBiIhv+hnMeSp1UNjloDDBhHpeFxkwRRdPBmTdDRqdEEn8owUmT5u8UBSVCs4xN3n/od4a91vXEhXPQ==
}
dependencies:
rollup-plugin-external-globals: 0.6.1
transitivePeerDependencies:
- rollup
dev: true
/vite-plugin-mock/2.9.6_mockjs@1.1.0+vite@3.1.8: /vite-plugin-mock/2.9.6_mockjs@1.1.0+vite@3.1.8:
resolution: resolution:
{ {

1
types/global.d.ts

@ -81,6 +81,7 @@ declare global {
VITE_PROXY_DOMAIN_REAL: string; VITE_PROXY_DOMAIN_REAL: string;
VITE_ROUTER_HISTORY: string; VITE_ROUTER_HISTORY: string;
VITE_LEGACY: boolean; VITE_LEGACY: boolean;
VITE_CDN: boolean;
} }
declare interface ServerConfigs { declare interface ServerConfigs {

3
vite.config.ts

@ -27,6 +27,7 @@ const __APP_INFO__ = {
export default ({ command, mode }: ConfigEnv): UserConfigExport => { export default ({ command, mode }: ConfigEnv): UserConfigExport => {
const { const {
VITE_CDN,
VITE_PORT, VITE_PORT,
VITE_LEGACY, VITE_LEGACY,
VITE_PUBLIC_PATH, VITE_PUBLIC_PATH,
@ -59,7 +60,7 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
} }
: null : null
}, },
plugins: getPluginsList(command, VITE_LEGACY),
plugins: getPluginsList(command, VITE_LEGACY, VITE_CDN),
optimizeDeps: { optimizeDeps: {
include: ["pinia", "vue-i18n", "lodash-es", "@vueuse/core", "dayjs"], include: ["pinia", "vue-i18n", "lodash-es", "@vueuse/core", "dayjs"],
exclude: ["@pureadmin/theme/dist/browser-utils"] exclude: ["@pureadmin/theme/dist/browser-utils"]

Loading…
Cancel
Save