feat(@vant/cli): add site.htmlMeta option

2025-04-05 19:41:42 +08:00 · 2021-09-07 15:47:15 +08:00 · 2021-09-07 15:47:15 +08:00 · a2f4ceaace
commit a2f4ceaace
parent 2b7ad935ab
10 changed files with 72 additions and 76 deletions
--- a/package.json
+++ b/package.json
@ -15,7 +15,7 @@
    "*.{vue,css,less}": "stylelint --fix"
  },
  "devDependencies": {
-    "@vant/cli": "^4.0.0-beta.4",
+    "@vant/cli": "^4.0.0-beta.5",
    "@vue/compiler-sfc": "3.2.8",
    "vue": "3.2.8"
  }
--- a/packages/vant-cli/changelog.md
+++ b/packages/vant-cli/changelog.md
@ -1,24 +1,28 @@
 # 更新日志

-## v4.0.0-beta.3
+## v4.0.0-beta.6

 ### 不兼容更新

- 使用 vite 代替 webpack 进行构建
+- 使用 vite 代替 webpack 进行构建，移除了所有 webpack 相关依赖
 - 站点构建产物的目录由 `site` 调整为 `site-dist`
 - 不再支持 webpack.config.js 配置文件
- 不再支持 build 命令的 --watch 参数
- 不再内置 babel-plugin-import 插件
 - 不再支持 less import 语法中使用波浪号
- 不再内置 sass 依赖，如果使用 sass，需要手动安装：
+- 移除 build 命令的 --watch 参数
+- 移除内置的 babel-plugin-import 插件
+- 由于不再使用 html-webpack-plugin, 因此移除了 site.htmlPluginOptions 配置项
+- 为了减少依赖数量，移除了默认安装的 sass 依赖，使用 sass 时需要手动安装：

 ```bash
 yarn add sass
 ```

-## v4.0.0-beta.1
+### Features

-`2021-08-21`
+- 新增 site.htmlMeta 配置项
+- 新增 ESModule 格式的构建产物，分别为 `lib/[name].es.js` 和 `lib/[name].es.min.js`
+
+### 依赖升级

 对以下依赖进行了大版本升级：

@ -28,15 +32,9 @@ yarn add sass
 - postcss v8
 - clean-css v5
 - commander v8
- css-loader v6
 - babel-jest v27
- sass-loader v12
- less-loader v10
 - lint-staged v11
- style-loader v3
 - autoprefixer v10
- postcss-loader v6
- webpack-dev-server v4

 ## v3.11.2

--- a/packages/vant-cli/docs/config.md
+++ b/packages/vant-cli/docs/config.md
@ -4,7 +4,7 @@
  - [vant.config.js](#vantconfigjs)
    - [name](#name)
    - [build.css](#buildcss)
-    - [build.site](#buildsite)
+    - [build.site.publicPath](#buildsitepublicpath)
    - [build.srcDir](#buildsrcdir)
    - [build.namedExport](#buildnamedexport)
    - [site.title](#sitetitle)
@ -16,7 +16,7 @@
    - [site.searchConfig](#sitesearchconfig)
    - [site.hideSimulator](#sitehidesimulator)
    - [site.simulator.url](#sitesimulatorurl)
-  - [Webpack](#webpack)
+    - [site.htmlMeta](#sitehtmlmeta)
  - [Babel](#babel)
    - [默认配置](#-1)
    - [依赖](#-2)
@ -95,14 +95,14 @@ module.exports = {
 };
 ```

-### build.site
+### build.site.publicPath

- Type: `object`
- Default: `{ publicPath: '/' }`
+- Type: `string`
+- Default: `/`

-`site.publicPath`等价于 webpack 的`output.publicPath`配置。
+等价于 vite 的 `build.outDir` 配置。

-一般来说，我们的文档网站会部署在一个域名的子路径上，如 `https://my.github.io/demo-ui/`，这时候`publicPath`需要跟子路径保持一致，即`/demo-ui/`。
+一般来说，我们的文档网站会部署在一个域名的子路径上，如 `https://my.github.io/demo-ui/`，这时候 `publicPath` 需要跟子路径保持一致，即 `/demo-ui/`。

 ```js
 module.exports = {
@ -253,26 +253,12 @@ module.exports = {

 自定义手机模拟器的 iframe URL 地址。

-### site.htmlPluginOptions
+### site.htmlMeta

- Type: `object`
+- Type: `Record<string, string>`
 - Default: `undefined`

-html-webpack-plugin 的配置项，详见 [Options](https://github.com/jantimon/html-webpack-plugin#options)。
-
-## Webpack
-
-通过根目录下的`webpack.config.js`文件可以修改 Webpack 配置，配置内容会通过 [webpack-merge](https://github.com/survivejs/webpack-merge) 合并到最终的配置中。
-
-比如修改 devServer 端口：
-
-```js
-module.exports = {
-  devServer: {
-    port: 9000,
-  },
-};
-```
+配置 HTML 中的 meta 标签，对象的 key 为 name，value 为 content。

 ## Babel

--- a/packages/vant-cli/site/index.html
+++ b/packages/vant-cli/site/index.html
@ -9,6 +9,7 @@
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
    />
+    <%- meta %>
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
--- a/packages/vant-cli/site/mobile.html
+++ b/packages/vant-cli/site/mobile.html
@ -9,6 +9,7 @@
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
    />
+    <%- meta %>
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
--- a/packages/vant-cli/src/compiler/compile-site.ts
+++ b/packages/vant-cli/src/compiler/compile-site.ts
@ -3,7 +3,35 @@ import {
  getViteConfigForSiteDev,
  getViteConfigForSiteProd,
 } from '../config/vite.site';
-import { genSiteEntry } from './vant-cli-site-plugin';
+import { replaceExt } from '../common';
+import { CSS_LANG } from '../common/css';
+import { genPackageEntry } from './gen-package-entry';
+import { genPackageStyle } from './gen-package-style';
+import { genSiteMobileShared } from './gen-site-mobile-shared';
+import { genSiteDesktopShared } from './gen-site-desktop-shared';
+import { genStyleDepsMap } from './gen-style-deps-map';
+import { PACKAGE_ENTRY_FILE, PACKAGE_STYLE_FILE } from '../common/constant';
+
+export async function genSiteEntry(): Promise<void> {
+  return new Promise((resolve, reject) => {
+    genStyleDepsMap()
+      .then(() => {
+        genPackageEntry({
+          outputPath: PACKAGE_ENTRY_FILE,
+        });
+        genPackageStyle({
+          outputPath: replaceExt(PACKAGE_STYLE_FILE, `.${CSS_LANG}`),
+        });
+        genSiteMobileShared();
+        genSiteDesktopShared();
+        resolve();
+      })
+      .catch((err) => {
+        console.log(err);
+        reject(err);
+      });
+  });
+}

 export async function compileSite(production = false) {
  await genSiteEntry();
--- a/packages/vant-cli/src/compiler/vant-cli-site-plugin.ts
+++ b/packages/vant-cli/src/compiler/vant-cli-site-plugin.ts
@ -1,29 +0,0 @@
-import { replaceExt } from '../common';
-import { CSS_LANG } from '../common/css';
-import { genPackageEntry } from './gen-package-entry';
-import { genPackageStyle } from './gen-package-style';
-import { genSiteMobileShared } from './gen-site-mobile-shared';
-import { genSiteDesktopShared } from './gen-site-desktop-shared';
-import { genStyleDepsMap } from './gen-style-deps-map';
-import { PACKAGE_ENTRY_FILE, PACKAGE_STYLE_FILE } from '../common/constant';
-
-export async function genSiteEntry(): Promise<void> {
-  return new Promise((resolve, reject) => {
-    genStyleDepsMap()
-      .then(() => {
-        genPackageEntry({
-          outputPath: PACKAGE_ENTRY_FILE,
-        });
-        genPackageStyle({
-          outputPath: replaceExt(PACKAGE_STYLE_FILE, `.${CSS_LANG}`),
-        });
-        genSiteMobileShared();
-        genSiteDesktopShared();
-        resolve();
-      })
-      .catch((err) => {
-        console.log(err);
-        reject(err);
-      });
-  });
-}
--- a/packages/vant-cli/src/config/vite.site.ts
+++ b/packages/vant-cli/src/config/vite.site.ts
@ -60,6 +60,18 @@ function getTitle(config: { title: string; description?: string }) {
  return title;
 }

+function getHTMLMeta(vantConfig: any) {
+  const meta = get(vantConfig, 'site.htmlMeta');
+
+  if (meta) {
+    return Object.keys(meta)
+      .map((key) => `<meta name="${key}" content="${meta[key]}">`)
+      .join('\n');
+  }
+
+  return '';
+}
+
 export function getViteConfigForSiteDev(): InlineConfig {
  setBuildTarget('package');

@ -98,6 +110,7 @@ export function getViteConfigForSiteDev(): InlineConfig {
          ...siteConfig,
          title,
          baiduAnalytics,
+          meta: getHTMLMeta(vantConfig),
        },
      }),
    ],
--- a/packages/vant/vant.config.js
+++ b/packages/vant/vant.config.js
@ -22,10 +22,8 @@ module.exports = {
    baiduAnalytics: {
      seed: 'ad6b5732c36321f2dafed737ac2da92f',
    },
-    htmlPluginOptions: {
-      meta: {
-        'docsearch:version': 'v3',
-      },
+    htmlMeta: {
+      'docsearch:version': 'v3',
    },
    locales: {
      'zh-CN': {
--- a/yarn.lock
+++ b/yarn.lock
@ -1728,10 +1728,10 @@
    "@typescript-eslint/types" "4.31.0"
    eslint-visitor-keys "^2.0.0"

-"@vant/cli@^4.0.0-beta.4":
-  version "4.0.0-beta.4"
-  resolved "https://registry.npmjs.org/@vant/cli/-/cli-4.0.0-beta.4.tgz#1e6b085674e8e849983a6a8dddf9c59d399b9f03"
-  integrity sha512-ortFKMTGDinKravnOjr0fO9MyhtJvXvj2fClBxA0vl+r84qfOma+xy3zmFdW/jFADzZoPVprwMibwyeLT0O5Hg==
+"@vant/cli@^4.0.0-beta.5":
+  version "4.0.0-beta.5"
+  resolved "https://registry.npmjs.org/@vant/cli/-/cli-4.0.0-beta.5.tgz#2fa981bf07ba6b25e8c36bf9ccd2b06c6a37d37c"
+  integrity sha512-RUSi1esG60KejzlrZ2sLQABvxKID8rXIkyDeai7/BZ6R6xU+/u68cyYcfoA6rejyBfZskXPRdaXqm/PBZV8Eag==
  dependencies:
    "@babel/core" "^7.15.0"
    "@babel/preset-env" "^7.15.0"