feat(cli): build package style entry

packages/vant-cli/package.json

@@ -32,6 +32,7 @@
     "@types/fs-extra": "^8.0.1",
     "@types/html-webpack-plugin": "^3.2.1",
     "@types/less": "^3.0.1",
+    "@types/lodash": "^4.14.149",
     "@types/postcss-load-config": "^2.0.0",
     "@types/sass": "^1.16.0",
     "@types/shelljs": "^0.8.6",
@@ -82,6 +83,7 @@
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
     "lint-staged": "^9.4.2",
+    "lodash": "^4.17.15",
     "portfinder": "^1.0.25",
     "postcss": "^7.0.21",
     "postcss-loader": "^3.0.0",

packages/vant-cli/site/desktop/App.vue

@@ -17,7 +17,7 @@ export default {
 
   data() {
     return {
-      config,
+      config: config.site,
       simulator: `mobile.html${location.hash}`
     };
   }

packages/vant-cli/site/desktop/components/Header.vue

@@ -10,9 +10,9 @@
         <search-input v-if="searchConfig" :lang="lang" :search-config="searchConfig" />
 
         <ul class="van-doc-header__top-nav">
-          <li v-for="item in config.iconLinks" class="van-doc-header__top-nav-item">
+          <li v-for="item in config.links" class="van-doc-header__top-nav-item">
             <a class="van-doc-header__logo-link" target="_blank" :href="item.url">
-              <img :src="item.image">
+              <img :src="item.logo">
             </a>
           </li>
 

packages/vant-cli/site/mobile/components/DemoHome.vue

@@ -26,7 +26,7 @@ export default {
 
   data() {
     return {
-      config
+      config: config.site
     };
   }
 };

packages/vant-cli/src/commands/dev.ts

@@ -2,11 +2,12 @@ import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import { getPort } from 'portfinder';
 import { clean } from '../commands/clean';
+import { buildESModuleOutputs } from './build';
 import { siteDevConfig } from '../config/webpack.site.dev';
 import { genPackageEntry } from '../compiler/gen-package-entry';
 import { genMobileEntry } from '../compiler/gen-mobile-entry';
 import { genDesktopEntry } from '../compiler/gen-desktop-entry';
-import { genStyleDepsMap } from '../compiler/gen-style-deps-map';
+import { genDepsMap } from '../compiler/gen-style-deps-map';
 
 function runWebpack() {
   const server = new WebpackDevServer(
@@ -33,9 +34,10 @@ function runWebpack() {
   );
 }
 
-export function dev() {
+export async function dev() {
-  clean();
+  await clean();
-  genStyleDepsMap();
+  await buildESModuleOutputs();
+  genDepsMap();
   genPackageEntry();
   genMobileEntry();
   genDesktopEntry();

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

@@ -5,7 +5,7 @@ export const ES_DIR = join(CWD, 'es');
 export const LIB_DIR = join(CWD, 'lib');
 export const SRC_DIR = join(CWD, 'src');
 export const DOCS_DIR = join(CWD, 'docs');
-export const CONFIG_FILE = join(CWD, 'components.config.js');
+export const CONFIG_FILE = join(CWD, 'vant.config.js');
 export const PACKAGE_JSON_FILE = join(CWD, 'package.json');
 export const WEBPACK_CONFIG_FILE = join(CWD, 'webpack.config.js');
 
@@ -13,6 +13,7 @@ export const DIST_DIR = join(__dirname, '../../dist');
 export const CONFIG_DIR = join(__dirname, '../config');
 
 export const PACKAGE_ENTRY_FILE = join(DIST_DIR, 'package-entry.js');
+export const PACKAGE_STYLE_FILE = join(DIST_DIR, 'package-style.css');
 export const MOBILE_ENTRY_FILE = join(DIST_DIR, 'mobile-entry.js');
 export const DESKTOP_ENTRY_FILE = join(DIST_DIR, 'desktop-entry.js');
 export const STYPE_DEPS_JSON_FILE = join(DIST_DIR, 'style-deps.json');
@@ -23,3 +24,6 @@ export const POSTCSS_CONFIG_FILE = join(CONFIG_DIR, 'postcss.config.js');
 export const JEST_TRANSFORM_FILE = join(CONFIG_DIR, 'jest.transform.js');
 export const JEST_FILE_MOCK_FILE = join(CONFIG_DIR, 'jest.file-mock.js');
 export const JEST_STYLE_MOCK_FILE = join(CONFIG_DIR, 'jest.style-mock.js');
+
+// eslint-disable-next-line
+export const CONFIG = require(CONFIG_FILE);

packages/vant-cli/src/compiler/gen-mobile-entry.ts

@@ -2,10 +2,10 @@ import { join, relative } from 'path';
 import { existsSync, ensureDirSync, writeFileSync } from 'fs-extra';
 import { decamelize, pascalize, removeExt, getComponents } from '../common';
 import {
+  CONFIG,
   SRC_DIR,
   DIST_DIR,
-  MOBILE_ENTRY_FILE,
+  MOBILE_ENTRY_FILE
-  CONFIG_FILE
 } from '../common/constant';
 
 type DemoItem = {
@@ -38,15 +38,14 @@ function genExports(demos: DemoItem[]) {
 
 function genConfig(demos: DemoItem[]) {
   // eslint-disable-next-line
-  const config = require(CONFIG_FILE);
   const demoNames = demos.map(item => decamelize(item.name, '-'));
 
-  config.nav = config.nav.filter((group: any) => {
+  CONFIG.site.nav = CONFIG.site.nav.filter((group: any) => {
     group.items = group.items.filter((item: any) => (demoNames.includes(item.path)));
     return group.items.length;
   });
 
-  return `export const config = ${JSON.stringify(config, null, 2)}`;
+  return `export const config = ${JSON.stringify(CONFIG, null, 2)}`;
 }
 
 function genCode(components: string[]) {

packages/vant-cli/src/compiler/gen-package-entry.ts

@@ -1,15 +1,21 @@
+import { get } from 'lodash';
 import { join, relative } from 'path';
 import { writeFileSync } from 'fs-extra';
-import { pascalize, getComponents } from '../common';
+import { pascalize, getComponents, replaceExt } from '../common';
 import {
+  CONFIG,
   SRC_DIR,
   DIST_DIR,
   PACKAGE_JSON_FILE,
-  PACKAGE_ENTRY_FILE
+  PACKAGE_ENTRY_FILE,
+  PACKAGE_STYLE_FILE,
+  STYPE_DEPS_JSON_FILE
 } from '../common/constant';
 
 // eslint-disable-next-line
 const packageJson = require(PACKAGE_JSON_FILE);
+// eslint-disable-next-line
+const styleDepsJson = require(STYPE_DEPS_JSON_FILE);
 const version = process.env.PACKAGE_VERSION || packageJson.version;
 
 function genImports(components: string[]): string {
@@ -25,7 +31,26 @@ function genExports(names: string[]): string {
   return names.map(name => `${name}`).join(',\n  ');
 }
 
-export function genPackageEntry() {
+function getStyleExt(): string {
+  const preprocessor = get(CONFIG, 'build.css.preprocessor', 'less');
+
+  if (preprocessor === 'sass') {
+    return '.scss';
+  }
+
+  return `.${preprocessor}`;
+}
+
+function genStyleEntry() {
+  const ext = getStyleExt();
+  const content = styleDepsJson.sequence
+    .map((item: string) => `@import "./${item}/index${ext}";`)
+    .join('\n');
+
+  writeFileSync(replaceExt(PACKAGE_STYLE_FILE, ext), content);
+}
+
+function genScriptEntry() {
   const components = getComponents();
   const names = components.map(item => pascalize(item));
 
@@ -64,3 +89,8 @@ export default {
 
   writeFileSync(PACKAGE_ENTRY_FILE, content);
 }
+
+export function genPackageEntry() {
+  genStyleEntry();
+  genScriptEntry();
+}

packages/vant-cli/src/config/webpack.package.ts

@@ -1,11 +1,9 @@
 import merge from 'webpack-merge';
 import { baseConfig } from './webpack.base';
 import { getWebpackConfig } from '../common';
-import { LIB_DIR, CONFIG_FILE, PACKAGE_ENTRY_FILE } from '../common/constant';
+import { LIB_DIR, CONFIG, PACKAGE_ENTRY_FILE } from '../common/constant';
 
-// eslint-disable-next-line
+const { name } = CONFIG;
-const config = require(CONFIG_FILE);
-const { name } = config;
 
 export function packageConfig(isMinify: boolean) {
   return merge(

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

@@ -2,12 +2,11 @@ import merge from 'webpack-merge';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { join } from 'path';
 import { baseConfig } from './webpack.base';
-import { CONFIG_FILE, MOBILE_ENTRY_FILE, DESKTOP_ENTRY_FILE } from '../common/constant';
+import { CONFIG, MOBILE_ENTRY_FILE, DESKTOP_ENTRY_FILE } from '../common/constant';
 import { getWebpackConfig } from '../common';
 
-// eslint-disable-next-line
+const siteConfig = CONFIG.site;
-const config = require(CONFIG_FILE);
+const title = `${siteConfig.title} - ${siteConfig.description}`;
-const title = `${config.title} - ${config.description}`;
 
 export const siteDevConfig = merge(
   baseConfig as any,
@@ -48,14 +47,14 @@ export const siteDevConfig = merge(
     plugins: [
       new HtmlWebpackPlugin({
         title,
-        logo: config.logo,
+        logo: siteConfig.logo,
         chunks: ['chunks', 'site-desktop'],
         template: join(__dirname, '../../site/desktop/index.html'),
         filename: 'index.html'
       }),
       new HtmlWebpackPlugin({
         title,
-        logo: config.logo,
+        logo: siteConfig.logo,
         chunks: ['chunks', 'site-mobile'],
         template: join(__dirname, '../../site/mobile/index.html'),
         filename: 'mobile.html'

packages/vant-cli/yarn.lock

@@ -1221,6 +1221,11 @@
   resolved "https://registry.npm.taobao.org/@types/less/download/@types/less-3.0.1.tgz#625694093c72f8356c4042754e222407e50d6b08"
   integrity sha1-YlaUCTxy+DVsQEJ1TiIkB+UNawg=
 
+"@types/lodash@^4.14.149":
+  version "4.14.149"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.149.tgz#1342d63d948c6062838fbf961012f74d4e638440"
+  integrity sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ==
+
 "@types/mime@*":
   version "2.0.1"
   resolved "https://registry.npm.taobao.org/@types/mime/download/@types/mime-2.0.1.tgz#dc488842312a7f075149312905b5e3c0b054c79d"