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

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"
   }

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
 

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`
+- Type: `string`
-- Default: `{ publicPath: '/' }`
+- 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)。
+配置 HTML 中的 meta 标签，对象的 key 为 name，value 为 content。
-
-## Webpack
-
-通过根目录下的`webpack.config.js`文件可以修改 Webpack 配置，配置内容会通过 [webpack-merge](https://github.com/survivejs/webpack-merge) 合并到最终的配置中。
-
-比如修改 devServer 端口：
-
-```js
-module.exports = {
-  devServer: {
-    port: 9000,
-  },
-};
-```
 
 ## Babel
 

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" />

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" />

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();

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);
-      });
-  });
-}

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),
         },
       }),
     ],

packages/vant/vant.config.js

@@ -22,10 +22,8 @@ module.exports = {
     baiduAnalytics: {
       seed: 'ad6b5732c36321f2dafed737ac2da92f',
     },
-    htmlPluginOptions: {
+    htmlMeta: {
-      meta: {
+      'docsearch:version': 'v3',
-        'docsearch:version': 'v3',
-      },
     },
     locales: {
       'zh-CN': {

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