[Build] use vue-cli to build site (#3734)

build/build-lib.js

@@ -12,8 +12,8 @@ const tasks = [
   'node build/build-components.js --color',
   'node build/build-style.js',
   'node build/build-style-entry.js',
-  'cross-env NODE_ENV=production webpack --color --config build/webpack.build.js',
+  'cross-env NODE_ENV=production webpack --color --config build/webpack.config.js',
-  'cross-env NODE_ENV=production webpack -p --color --config build/webpack.build.js'
+  'cross-env NODE_ENV=production webpack -p --color --config build/webpack.config.js'
 ];
 
 tasks.forEach(task => {

build/webpack.config.js

@@ -1,11 +1,8 @@
 const path = require('path');
-const config = require('./webpack.dev.js');
 
 const isMinify = process.argv.indexOf('-p') !== -1;
 
-delete config.serve;
+module.exports = {
-
-module.exports = Object.assign(config, {
   mode: 'production',
   entry: {
     vant: './es/index.js'
@@ -26,8 +23,19 @@ module.exports = Object.assign(config, {
       amd: 'vue'
     }
   },
-  performance: false,
   optimization: {
     minimize: isMinify
+  },
+  resolve: {
+    extensions: ['.js', '.ts', '.tsx']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: 'babel-loader'
+      }
+    ]
   }
-});
+};

build/webpack.dev.js

@@ -1,91 +0,0 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ProgressBarPlugin = require('progress-bar-webpack-plugin');
-const { VueLoaderPlugin } = require('vue-loader');
-
-module.exports = {
-  mode: 'development',
-  entry: {
-    'vant-docs': './docs/site/index.js',
-    'vant-mobile': './docs/site/mobile.js'
-  },
-  output: {
-    path: path.join(__dirname, '../docs/dist'),
-    publicPath: '/',
-    chunkFilename: 'async_[name].js'
-  },
-  stats: {
-    modules: false,
-    children: false
-  },
-  devServer: {
-    open: true,
-    host: '0.0.0.0',
-    stats: 'errors-only',
-    clientLogLevel: 'warning'
-  },
-  resolve: {
-    extensions: ['.js', '.ts', '.tsx', '.vue', '.css']
-  },
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        use: [
-          {
-            loader: 'vue-loader',
-            options: {
-              compilerOptions: {
-                preserveWhitespace: false
-              }
-            }
-          }
-        ]
-      },
-      {
-        test: /\.(js|ts|tsx)$/,
-        exclude: /node_modules/,
-        use: 'babel-loader'
-      },
-      {
-        test: /\.less$/,
-        sideEffects: true,
-        use: [
-          'style-loader',
-          'css-loader',
-          'postcss-loader',
-          {
-            loader: 'less-loader',
-            options: {
-              paths: [path.resolve(__dirname, 'node_modules')]
-            }
-          }
-        ]
-      },
-      {
-        test: /\.md$/,
-        use: ['vue-loader', '@vant/markdown-loader']
-      },
-      {
-        test: /\.(ttf|svg)$/,
-        loader: 'url-loader'
-      }
-    ]
-  },
-  plugins: [
-    new VueLoaderPlugin(),
-    new ProgressBarPlugin(),
-    new HtmlWebpackPlugin({
-      chunks: ['vant-docs'],
-      template: 'docs/site/index.tpl',
-      filename: 'index.html',
-      inject: true
-    }),
-    new HtmlWebpackPlugin({
-      chunks: ['vant-mobile'],
-      template: 'docs/site/index.tpl',
-      filename: 'mobile.html',
-      inject: true
-    })
-  ]
-};

build/webpack.doc.js

@@ -1,14 +0,0 @@
-const path = require('path');
-const config = require('./webpack.dev.js');
-
-delete config.serve;
-
-module.exports = Object.assign(config, {
-  mode: 'production',
-  output: {
-    path: path.join(__dirname, '../docs/dist'),
-    publicPath: 'https://youzan.github.io/vant/',
-    filename: '[name].[hash:8].js',
-    chunkFilename: 'async_[name].[chunkhash:8].js'
-  }
-});

docs/site/DocsApp.vue

@@ -1,166 +0,0 @@
-<template>
-  <div class="app">
-    <van-doc
-      :base="base"
-      :config="config"
-      :lang="$vantLang"
-      :github="github"
-      :versions="versions"
-      :simulators="simulators"
-      :search-config="searchConfig"
-      :current-simulator="currentSimulator"
-      @switch-version="onSwitchVersion"
-    >
-      <router-view @changeDemoURL="onChangeDemoURL" />
-    </van-doc>
-  </div>
-</template>
-
-<script>
-import pkgJson from '../../package.json';
-import docConfig, { github, versions, searchConfig } from './doc.config';
-
-export default {
-  data() {
-    this.github = github;
-    this.versions = versions;
-    this.searchConfig = searchConfig;
-
-    return {
-      simulators: [`mobile.html${location.hash}`],
-      demoURL: ''
-    };
-  },
-
-  computed: {
-    base() {
-      return `/${this.$vantLang}`;
-    },
-
-    config() {
-      return docConfig[this.$vantLang];
-    },
-
-    currentSimulator() {
-      const { name } = this.$route;
-      return name && name.indexOf('demo') !== -1 ? 1 : 0;
-    }
-  },
-
-  mounted() {
-    this.showVersionTip();
-  },
-
-  methods: {
-    showVersionTip() {
-      const tip = window.localStorage.getItem('vantVersionTip');
-
-      if (!tip && this.$vantLang === 'zh-CN') {
-        const version = document.querySelector('.van-doc-header__version');
-        version.insertAdjacentHTML('beforeend', `
-          <div class="doc-version-tip">
-            提示：你当前访问的是 Vant 2.0 版本文档，点此切换至旧版文档
-            <div style="text-align: right;">
-              <button class="doc-version-tip__button">好哒</button>
-            </div>
-          </div>
-        `);
-
-        const tip = document.querySelector('.doc-version-tip');
-        const removeTip = event => {
-          event.stopPropagation();
-          tip.parentNode.removeChild(tip);
-        };
-
-        tip.addEventListener('click', removeTip);
-        version.addEventListener('click', removeTip);
-
-        window.localStorage.setItem('vantVersionTip', 1);
-      }
-    },
-
-    onChangeDemoURL(url) {
-      this.simulators = [this.simulators[0], url];
-    },
-
-    onSwitchVersion(version) {
-      if (version !== pkgJson.version) {
-        location.href = `https://youzan.github.io/vant/${version}`;
-      }
-    }
-  }
-};
-</script>
-
-<style lang="less">
-.van-doc-intro {
-  padding-top: 20px;
-  font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
-  text-align: center;
-
-  p {
-    margin-bottom: 20px;
-  }
-}
-
-.doc-version-tip {
-  position: absolute;
-  top: 35px;
-  left: 50%;
-  z-index: 100;
-  box-sizing: border-box;
-  width: 300px;
-  margin-left: -150px;
-  padding: 15px;
-  color: #333;
-  text-align: left;
-  background-color: #fff;
-  border-radius: 6px;
-  box-shadow: 0 4px 12px #ebedf0;
-  transform-origin: top;
-  cursor: default;
-  animation: version-tip .25s cubic-bezier(0.175, 0.885, 0.32, 1.375);
-
-  &::before {
-    position: absolute;
-    top: -4px;
-    left: 50%;
-    margin-left: -3px;
-    border: 6px solid;
-    border-color: transparent transparent white white;
-    transform: rotate(135deg);
-    content: '';
-  }
-
-  &__button {
-    width: 60px;
-    color: #fff;
-    font-size: 12px;
-    line-height: 24px;
-    background: #1889f9;
-    border: none;
-    border-radius: 15px;
-    cursor: pointer;
-
-    &:hover {
-      background: darken(#1889f9, 10%);
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  @keyframes version-tip {
-    from {
-      transform: scaleY(0);
-      opacity: 0;
-    }
-
-    to {
-      transform: scaleY(1);
-      opacity: 1;
-    }
-  }
-}
-</style>

docs/site/index.tpl

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
-  <meta http-Equiv="Cache-Control" Content="no-cache" />
-  <meta http-Equiv="Pragma" Content="no-cache" />
-  <meta http-Equiv="Expires" Content="0" />
-  <link rel="shortcut icon" href="https://img.yzcdn.cn/zanui/vant/vant-2017-12-18.ico">
-  <title>Vant - 轻量、可靠的移动端 Vue 组件库</title>
-  <script>window.Promise || document.write('<script src="//img.yzcdn.cn/huiyi/build/h5/js/pinkie.min.js"><\/script>');</script>
-</head>
-<body ontouchstart>
-
-<div id="app"></div>
-
-</body>
-</html>

package.json

@@ -14,12 +14,12 @@
   ],
   "scripts": {
     "bootstrap": "yarn || npm i",
-    "dev": "npm run build:entry && webpack-dev-server --config build/webpack.dev.js",
+    "dev": "npm run build:entry && cd site && yarn serve",
     "lint": "eslint ./src --ext .js,.vue,.ts,.tsx && stylelint \"src/**/*.less\" --fix",
     "build:entry": "node build/build-entry.js",
     "build:changelog": "vant-doc changelog ./docs/markdown/changelog.generated.md --tag 2.0.0",
     "build:lib": "node build/build-lib.js",
-    "build:site": "rm -rf docs/dist && cross-env NODE_ENV=production webpack --config build/webpack.doc.js && gh-pages -d docs/dist --add",
+    "build:site": "rm -rf site/dist && cd site && npm run build && gh-pages -d dist --add",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:clear-cache": "jest --clearCache",
@@ -89,7 +89,6 @@
     "eslint": "^6.0.1",
     "fast-glob": "^3.0.3",
     "gh-pages": "^2.0.1",
-    "html-webpack-plugin": "3.2.0",
     "husky": "^3.0.0",
     "jest": "^24.8.0",
     "jest-serializer-vue": "^2.0.2",
@@ -98,7 +97,6 @@
     "lint-staged": "^9.0.0",
     "postcss": "^7.0.17",
     "postcss-loader": "^3.0.0",
-    "progress-bar-webpack-plugin": "^1.12.1",
     "shelljs": "^0.8.3",
     "signale": "^1.4.0",
     "style-loader": "^0.23.1",
@@ -118,8 +116,7 @@
     "vue-template-compiler": "2.6.10",
     "vue-template-es2015-compiler": "^1.9.1",
     "webpack": "4.35.2",
-    "webpack-cli": "^3.3.5",
+    "webpack-cli": "^3.3.5"
-    "webpack-dev-server": "3.7.2"
   },
   "sideEffects": [
     "es/**/style/*",

site/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/app']
+};

site/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@vant/site",
+  "version": "1.0.0",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "yarn && vue-cli-service build"
+  },
+  "dependencies": {
+    "core-js": "^2.6.5",
+    "register-service-worker": "^1.6.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.1.1",
+    "@vue/cli-plugin-typescript": "^3.8.1",
+    "@vue/cli-service": "^3.1.4"
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

site/public/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
+    <link rel="shortcut icon" href="https://img.yzcdn.cn/zanui/vant/vant-2017-12-18.ico">
+    <title>Vant - 轻量、可靠的移动端 Vue 组件库</title>
+  </head>
+  <body ontouchstart>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

site/src/desktop/App.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="app">
+    <van-doc
+      :base="base"
+      :config="config"
+      :lang="$vantLang"
+      :github="github"
+      :versions="versions"
+      :simulators="simulators"
+      :search-config="searchConfig"
+      :current-simulator="currentSimulator"
+      @switch-version="onSwitchVersion"
+    >
+      <router-view @changeDemoURL="onChangeDemoURL" />
+    </van-doc>
+  </div>
+</template>
+
+<script>
+import pkgJson from '../../package.json';
+import docConfig, { github, versions, searchConfig } from '../doc.config';
+
+export default {
+  data() {
+    this.github = github;
+    this.versions = versions;
+    this.searchConfig = searchConfig;
+
+    return {
+      simulators: [`mobile.html${location.hash}`],
+      demoURL: ''
+    };
+  },
+
+  computed: {
+    base() {
+      return `/${this.$vantLang}`;
+    },
+
+    config() {
+      return docConfig[this.$vantLang];
+    },
+
+    currentSimulator() {
+      const { name } = this.$route;
+      return name && name.indexOf('demo') !== -1 ? 1 : 0;
+    }
+  },
+
+  methods: {
+    onChangeDemoURL(url) {
+      this.simulators = [this.simulators[0], url];
+    },
+
+    onSwitchVersion(version) {
+      if (version !== pkgJson.version) {
+        location.href = `https://youzan.github.io/vant/${version}`;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.van-doc-intro {
+  padding-top: 20px;
+  font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+  text-align: center;
+
+  p {
+    margin-bottom: 20px;
+  }
+}
+</style>

site/src/desktop/main.js

@@ -1,9 +1,10 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import VantDoc from '@vant/doc';
-import App from './DocsApp';
+import routes from '../router';
-import routes from './router';
+import App from './App';
-import { isMobile, importAll } from './utils';
+import { isMobile, importAll } from '../utils';
+import '../sw';
 
 if (isMobile) {
   location.replace('mobile.html' + location.hash);
@@ -12,8 +13,8 @@ if (isMobile) {
 Vue.use(VueRouter).use(VantDoc);
 
 const docs = {};
-const docsFromMarkdown = require.context('../markdown', false, /(en-US|zh-CN)\.md$/);
+const docsFromMarkdown = require.context('../../../docs/markdown', false, /(en-US|zh-CN)\.md$/);
-const docsFromPackages = require.context('../../src', true, /README(\.zh-CN)?\.md$/);
+const docsFromPackages = require.context('../../../src', true, /README(\.zh-CN)?\.md$/);
 
 importAll(docs, docsFromMarkdown);
 importAll(docs, docsFromPackages);

site/src/mobile/App.vue

@@ -50,7 +50,7 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../src/style/var';
+@import '../../../src/style/var';
 
 body {
   color: @text-color;

site/src/mobile/demo-common.js

@@ -5,9 +5,9 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import VantDoc, { DemoBlock, DemoSection } from '@vant/doc';
-import i18n from './utils/i18n';
+import i18n from '../utils/i18n';
-import Vant, { Lazyload, Locale } from '../../src';
+import Vant, { Lazyload, Locale } from '../../../src';
-import { camelize } from '../../src/utils/format/string';
+import { camelize } from '../../../src/utils/format/string';
 
 Vue
   .use(Vant)

site/src/mobile/main.js

@@ -1,13 +1,14 @@
-import '../../src/index.less';
+import '../../../src/index.less';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import App from './WapApp';
+import App from './App';
-import routes from './router';
+import routes from '../router';
-import { importAll } from './utils';
+import { importAll } from '../utils';
 import '@vant/touch-emulator';
+import '../sw';
 
 const componentMap = {};
-const context = require.context('../../src', true, /demo\/index.vue$/);
+const context = require.context('../../../src', true, /demo\/index.vue$/);
 
 importAll(componentMap, context);
 

site/src/router.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import docConfig from './doc.config';
 import DemoList from './components/DemoList';
 import DemoPages from './components/DemoPages';
-import { demoWrapper } from './demo-common';
+import { demoWrapper } from './mobile/demo-common';
 import { initIframeRouter } from './utils/iframe-router';
 
 initIframeRouter();

site/src/sw.js

@@ -0,0 +1,7 @@
+/* eslint-disable no-console */
+
+import { register } from 'register-service-worker';
+
+if (process.env.NODE_ENV === 'production') {
+  register(`${process.env.BASE_URL}service-worker.js`, {});
+}

site/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "include": [
+    "../types/**/*",
+    "../src/**/*"
+  ]
+}

site/vue.config.js

@@ -0,0 +1,35 @@
+const path = require('path');
+
+module.exports = {
+  publicPath: process.env.NODE_ENV === 'production' ? '/vant/' : '/',
+  pages: {
+    index: {
+      entry: 'src/desktop/main.js',
+      template: 'public/index.html',
+      filename: 'index.html'
+    },
+    mobile: {
+      entry: 'src/mobile/main.js',
+      template: 'public/index.html',
+      filename: 'mobile.html'
+    }
+  },
+  chainWebpack: config => config.resolve.extensions.prepend('.md'),
+  configureWebpack: {
+    module: {
+      rules: [
+        {
+          test: /\.md$/,
+          use: ['vue-loader', '@vant/markdown-loader']
+        }
+      ]
+    }
+  },
+  css: {
+    loaderOptions: {
+      less: {
+        paths: [path.resolve(__dirname, '../node_modules')]
+      }
+    }
+  }
+};

test/demo-test.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import '../docs/site/demo-common';
+import '../site/src/mobile/demo-common';
 import Locale from '../src/locale';
 import { mount, later } from './utils';