From 2dd7e853d6241942fccf87f0dfb70da4fb684a8e Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Tue, 7 Sep 2021 11:59:12 +0800 Subject: [PATCH] feat(@vant/cli): using vite to build site --- .gitignore | 2 +- .../generators/vue2/package.json.tpl | 2 +- .../generators/vue3/package.json.tpl | 2 +- packages/vant-cli/changelog.md | 1 + packages/vant-cli/site/desktop/App.vue | 6 ++-- packages/vant-cli/src/common/constant.ts | 3 +- .../vant-cli/src/compiler/compile-site.ts | 11 +++---- packages/vant-cli/src/config/vite.site.ts | 29 +++++++++++++++++-- packages/vant/package.json | 2 +- packages/vant/src/uploader/demo/index.vue | 4 +-- 10 files changed, 45 insertions(+), 17 deletions(-) diff --git a/.gitignore b/.gitignore index 598d74a40..d289e8711 100644 --- a/.gitignore +++ b/.gitignore @@ -16,5 +16,5 @@ es lib dist vetur -./site +**/site changelog.generated.md diff --git a/packages/create-vant-cli-app/generators/vue2/package.json.tpl b/packages/create-vant-cli-app/generators/vue2/package.json.tpl index 1257aeb7c..d9f68c53e 100644 --- a/packages/create-vant-cli-app/generators/vue2/package.json.tpl +++ b/packages/create-vant-cli-app/generators/vue2/package.json.tpl @@ -15,7 +15,7 @@ "build": "vant-cli build", "release": "vant-cli release", "test:coverage": "open test/coverage/index.html", - "build-site": "vant-cli build-site && gh-pages -d site" + "build-site": "vant-cli build-site && gh-pages -d site-dist" }, "author": "", "license": "MIT", diff --git a/packages/create-vant-cli-app/generators/vue3/package.json.tpl b/packages/create-vant-cli-app/generators/vue3/package.json.tpl index 8bcba4dc1..c667d4c71 100644 --- a/packages/create-vant-cli-app/generators/vue3/package.json.tpl +++ b/packages/create-vant-cli-app/generators/vue3/package.json.tpl @@ -16,7 +16,7 @@ "prepare": "husky install", "release": "vant-cli release", "test:coverage": "open test/coverage/index.html", - "build-site": "vant-cli build-site && gh-pages -d site" + "build-site": "vant-cli build-site && gh-pages -d site-dist" }, "author": "", "license": "MIT", diff --git a/packages/vant-cli/changelog.md b/packages/vant-cli/changelog.md index 98ae0e015..5a492d912 100644 --- a/packages/vant-cli/changelog.md +++ b/packages/vant-cli/changelog.md @@ -5,6 +5,7 @@ ### 不兼容更新 - 使用 vite 代替 webpack 进行构建 +- 站点构建产物的目录由 `site` 调整为 `site-dist` - 不再支持 webpack.config.js 配置文件 - 不再内置 babel-plugin-import 插件 diff --git a/packages/vant-cli/site/desktop/App.vue b/packages/vant-cli/site/desktop/App.vue index 24c99a808..15592bc90 100644 --- a/packages/vant-cli/site/desktop/App.vue +++ b/packages/vant-cli/site/desktop/App.vue @@ -108,9 +108,9 @@ export default { [] ); - const current = navItems.find((item) => { - return item.path === this.$route.meta.name; - }); + const current = navItems.find( + (item) => item.path === this.$route.meta.name + ); if (current && current.title) { title = current.title + ' - ' + title; diff --git a/packages/vant-cli/src/common/constant.ts b/packages/vant-cli/src/common/constant.ts index 5eacce296..e97c5f191 100644 --- a/packages/vant-cli/src/common/constant.ts +++ b/packages/vant-cli/src/common/constant.ts @@ -25,7 +25,7 @@ export const ES_DIR = join(ROOT, 'es'); export const LIB_DIR = join(ROOT, 'lib'); export const DOCS_DIR = join(ROOT, 'docs'); export const VETUR_DIR = join(ROOT, 'vetur'); -export const SITE_DIST_DIR = join(ROOT, 'site'); +export const SITE_DIST_DIR = join(ROOT, 'site-dist'); export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.js'); export const PACKAGE_JSON_FILE = join(ROOT, 'package.json'); export const ROOT_POSTCSS_CONFIG_FILE = join(ROOT, 'postcss.config.js'); @@ -34,6 +34,7 @@ export const CACHE_DIR = join(ROOT, 'node_modules/.cache'); // Relative paths export const DIST_DIR = join(__dirname, '../../dist'); export const CONFIG_DIR = join(__dirname, '../config'); +export const SITE_SRC_DIR = join(__dirname, '../../site'); // Dist files export const PACKAGE_ENTRY_FILE = join(DIST_DIR, 'package-entry.js'); diff --git a/packages/vant-cli/src/compiler/compile-site.ts b/packages/vant-cli/src/compiler/compile-site.ts index 4e904042e..83b707688 100644 --- a/packages/vant-cli/src/compiler/compile-site.ts +++ b/packages/vant-cli/src/compiler/compile-site.ts @@ -1,13 +1,14 @@ -import { createServer } from 'vite'; -import { getViteConfigForSiteDev } from '../config/vite.site'; +import { createServer, build } from 'vite'; +import { + getViteConfigForSiteDev, + getViteConfigForSiteProd, +} from '../config/vite.site'; import { genSiteEntry } from './vant-cli-site-plugin'; -async function build() {} - export async function compileSite(production = false) { await genSiteEntry(); if (production) { - await build(); + await build(getViteConfigForSiteProd()); } else { const server = await createServer(getViteConfigForSiteDev()); await server.listen(); diff --git a/packages/vant-cli/src/config/vite.site.ts b/packages/vant-cli/src/config/vite.site.ts index c4f6a0c57..4e758712a 100644 --- a/packages/vant-cli/src/config/vite.site.ts +++ b/packages/vant-cli/src/config/vite.site.ts @@ -6,8 +6,10 @@ import vitePluginVue from '@vitejs/plugin-vue'; import vitePluginJsx from '@vitejs/plugin-vue-jsx'; import { setBuildTarget, getVantConfig } from '../common'; import { - SITE_DESKTOP_SHARED_FILE, + SITE_DIST_DIR, SITE_MOBILE_SHARED_FILE, + SITE_DESKTOP_SHARED_FILE, + SITE_SRC_DIR, } from '../common/constant'; import { injectHtml } from 'vite-plugin-html'; import type { InlineConfig } from 'vite'; @@ -67,7 +69,7 @@ export function getViteConfigForSiteDev(): InlineConfig { const baiduAnalytics = get(vantConfig, 'site.baiduAnalytics'); return { - root: join(__dirname, '../../site'), + root: SITE_SRC_DIR, plugins: [ vitePluginVue({ @@ -112,3 +114,26 @@ export function getViteConfigForSiteDev(): InlineConfig { }, }; } + +export function getViteConfigForSiteProd(): InlineConfig { + const devConfig = getViteConfigForSiteDev(); + const vantConfig = getVantConfig(); + const outDir = get(vantConfig, 'build.site.outputDir', SITE_DIST_DIR); + const publicPath = get(vantConfig, 'build.site.publicPath', '/'); + + return { + ...devConfig, + base: publicPath, + build: { + outDir, + brotliSize: false, + emptyOutDir: true, + rollupOptions: { + input: { + main: join(SITE_SRC_DIR, 'index.html'), + nested: join(SITE_SRC_DIR, 'mobile.html'), + }, + }, + }, + }; +} diff --git a/packages/vant/package.json b/packages/vant/package.json index 33cfc86fa..decc260e2 100644 --- a/packages/vant/package.json +++ b/packages/vant/package.json @@ -21,7 +21,7 @@ "build": "vant-cli build", "build:site": "vant-cli build-site", "release": "vant-cli release --tag next", - "release:site": "yarn build:site && gh-pages -d site --add --dest v3", + "release:site": "yarn build:site && gh-pages -d site-dist --add --dest v3", "test:watch": "vant-cli test --watch", "test:coverage": "open test/coverage/index.html" }, diff --git a/packages/vant/src/uploader/demo/index.vue b/packages/vant/src/uploader/demo/index.vue index 76c29c6ad..580ecd028 100644 --- a/packages/vant/src/uploader/demo/index.vue +++ b/packages/vant/src/uploader/demo/index.vue @@ -73,7 +73,7 @@ const fileList5 = ref([ }, ]); -const statusFileList = [ +const statusFileList = ref([ { url: 'https://img.yzcdn.cn/vant/leaf.jpg', status: 'uploading', @@ -84,7 +84,7 @@ const statusFileList = [ status: 'failed', message: t('failed'), }, -]; +]); const previewCoverFiles = ref([ {