Merge branch '2.x' into dev

packages/vant-cli/changelog.md

@@ -29,6 +29,11 @@
 - 升级 ESLint 7
 - 升级 TypeScript 4
 
+## v2.7.0
+
+- 支持通过 `site.htmlPluginOptions` 来配置 html-webpack-plugin
+- 修复组件内部引用 `.vue` 文件时 build 结果不正确的问题
+
 ## v2.6.2
 
 `2020-11-15`

packages/vant-cli/docs/config.md

@@ -222,6 +222,13 @@ module.exports = {
 
 配置内容参见 [docsearch](https://docsearch.algolia.com/docs/behavior)。
 
+### site.htmlPluginOptions
+
+- Type: `object`
+- 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) 合并到最终的配置中。

packages/vant-cli/src/common/css.ts

@@ -38,7 +38,7 @@ export function getCssBaseFile() {
 const IMPORT_STYLE_RE = /import\s+?(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g;
 
 // "import 'a.less';" => "import 'a.css';"
-export function replaceCssImport(code: string) {
+export function replaceCssImportExt(code: string) {
   return code.replace(IMPORT_STYLE_RE, str =>
     str.replace(`.${CSS_LANG}`, '.css')
   );

packages/vant-cli/src/compiler/compile-js.ts

@@ -1,16 +1,18 @@
 import { transformAsync } from '@babel/core';
 import { readFileSync, removeSync, outputFileSync } from 'fs-extra';
 import { replaceExt } from '../common';
-import { replaceCssImport } from '../common/css';
+import { replaceCssImportExt } from '../common/css';
+import { replaceScriptImportExt } from './get-deps';
 
 export function compileJs(filePath: string): Promise<void> {
   return new Promise((resolve, reject) => {
     let code = readFileSync(filePath, 'utf-8');
 
-    code = replaceCssImport(code);
+    code = replaceCssImportExt(code);
+    code = replaceScriptImportExt(code, '.vue', '');
 
     transformAsync(code, { filename: filePath })
-      .then(result => {
+      .then((result) => {
         if (result) {
           const jsFilePath = replaceExt(filePath, '.js');
 

packages/vant-cli/src/compiler/get-deps.ts

@@ -6,7 +6,7 @@ let depsMap: Record<string, string[]> = {};
 let existsCache: Record<string, boolean> = {};
 
 // https://regexr.com/47jlq
-const IMPORT_RE = /import\s+?(?:(?:(?:[\w*\s{},]*)\s+from\s+?)|)(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g;
+const IMPORT_RE = /import\s+?(?:(?:(?:[\w*\s{},]*)\s+from(\s+)?)|)(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g;
 
 function matchImports(code: string): string[] {
   return code.match(IMPORT_RE) || [];
@@ -71,3 +71,15 @@ export function getDeps(filePath: string) {
 
   return paths;
 }
+
+// "import App from 'App.vue';" => "import App from 'App.xxx';"
+export function replaceScriptImportExt(code: string, from: string, to: string) {
+  const importLines = matchImports(code);
+
+  importLines.forEach(importLine => {
+    const result = importLine.replace(from, to);
+    code = code.replace(importLine, result);
+  });
+
+  return code;
+}

packages/vant-cli/src/config/webpack.site.dev.ts

@@ -39,6 +39,7 @@ export function getSiteDevBaseConfig(): WebpackConfig {
 
   const siteConfig = getSiteConfig();
   const title = getTitle(siteConfig);
+  const { htmlPluginOptions } = vantConfig.site;
 
   return merge(baseConfig as any, {
     entry: {
@@ -88,6 +89,7 @@ export function getSiteDevBaseConfig(): WebpackConfig {
         template: join(__dirname, '../../site/desktop/index.html'),
         filename: 'index.html',
         baiduAnalytics,
+        ...htmlPluginOptions,
       }),
       new HtmlWebpackPlugin({
         title,
@@ -97,6 +99,7 @@ export function getSiteDevBaseConfig(): WebpackConfig {
         template: join(__dirname, '../../site/mobile/index.html'),
         filename: 'mobile.html',
         baiduAnalytics,
+        ...htmlPluginOptions,
       }),
     ],
   });

vant.config.js

@@ -22,6 +22,11 @@ module.exports = {
     baiduAnalytics: {
       seed: 'ad6b5732c36321f2dafed737ac2da92f',
     },
+    htmlPluginOptions: {
+      meta: {
+        'docsearch:version': '3.x',
+      },
+    },
     locales: {
       'zh-CN': {
         title: 'Vant',