[Doc] optimize document site (#1013)

build/bin/build-entry.js

@@ -28,6 +28,7 @@ const install = Vue => {
   });
 };
 
+/* istanbul ignore if */
 if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
@@ -55,26 +56,7 @@ function buildDemoEntry() {
     .map(name => `'${name}': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/${name}'), '${name}')), '${name}'))`);
 
   const content = `${tips}
-import './common';
+import { asyncWrapper, componentWrapper } from './common';
-
-import progress from 'nprogress';
-
-function asyncWrapper(component) {
-  return function(r) {
-    progress.start();
-    component(r).then(() => {
-      progress.done();
-    }).catch(() => {
-      progress.done();
-    });
-  };
-}
-
-function componentWrapper(component, name) {
-  component = component.default;
-  component.name = 'demo-' + name;
-  return component;
-}
 
 export default {
   ${demos.join(',\n  ')}

build/webpack.config.dev.js

@@ -1,6 +1,5 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const isProduction = process.env.NODE_ENV === 'production';
 const { VueLoaderPlugin } = require('vue-loader')
@@ -56,7 +55,7 @@ module.exports = {
       {
         test: /\.(css|postcss)$/,
         use: [
-          MiniCssExtractPlugin.loader,
+          'style-loader',
           'css-loader',
           'postcss-loader'
         ]
@@ -88,9 +87,6 @@ module.exports = {
       template: 'docs/src/index.tpl',
       filename: 'examples.html',
       inject: true
-    }),
-    new MiniCssExtractPlugin({
-      filename: isProduction ? '[name].[hash:8].css' : '[name].css'
     })
   ]
 };

docs/demos/common.js

@@ -3,31 +3,28 @@
  */
 
 import Vue from 'vue';
-import i18n from 'packages/mixins/i18n';
+import progress from 'nprogress';
-import { Locale, Toast, Dialog } from 'packages';
+import i18n from '../../packages/mixins/i18n';
-import { DemoBlock, DemoSection } from 'vant-doc';
+import Vant, { Lazyload } from '../../packages';
-import { camelize } from 'packages/utils';
+import VantDoc, { DemoBlock, DemoSection } from 'vant-doc';
+import VueRouter from 'vue-router';
+import { Locale, Toast, Dialog } from '../../packages';
+import { camelize } from '../../packages/utils';
 
-const demoBaseMixin = {
+Vue
-  beforeCreate() {
+  .use(Vant)
-    const { name, i18n } = this.$options;
+  .use(VantDoc)
-    if (name && i18n) {
+  .use(VueRouter)
-      const formattedI18n = {};
+  .use(Lazyload, {
-      const camelizedName = camelize(name);
+    lazyComponent: true
-      Object.keys(i18n).forEach(key => {
+  });
-        formattedI18n[key] = { [camelizedName]: i18n[key] };
+
-      });
+Vue.component('demo-block', DemoBlock);
-      Locale.add(formattedI18n);
+Vue.component('demo-section', DemoSection);
-    }
-  }
-};
 
 window.Toast = Toast;
 window.Dialog = Dialog;
 Vue.mixin(i18n);
-Vue.mixin(demoBaseMixin);
-Vue.component('demo-block', DemoBlock);
-Vue.component('demo-section', DemoSection);
 
 Locale.add({
   'zh-CN': {
@@ -85,3 +82,30 @@ Locale.add({
     passwordPlaceholder: 'Password'
   }
 });
+
+export function asyncWrapper(component) {
+  return function(r) {
+    progress.start();
+    component(r).then(() => {
+      progress.done();
+    }).catch(() => {
+      progress.done();
+    });
+  };
+}
+
+export function componentWrapper(component, name) {
+  component = component.default;
+  name = 'demo-' + name;
+  component.name = name;
+  const { i18n } = component;
+  if (i18n) {
+    const formattedI18n = {};
+    const camelizedName = camelize(name);
+    Object.keys(i18n).forEach(key => {
+      formattedI18n[key] = { [camelizedName]: i18n[key] };
+    });
+    Locale.add(formattedI18n);
+  }
+  return component;
+}

docs/demos/index.js

@@ -1,24 +1,5 @@
 // This file is auto gererated by build/bin/build-entry.js
-import './common';
+import { asyncWrapper, componentWrapper } from './common';
-
-import progress from 'nprogress';
-
-function asyncWrapper(component) {
-  return function(r) {
-    progress.start();
-    component(r).then(() => {
-      progress.done();
-    }).catch(() => {
-      progress.done();
-    });
-  };
-}
-
-function componentWrapper(component, name) {
-  component = component.default;
-  component.name = 'demo-' + name;
-  return component;
-}
 
 export default {
   'actionsheet': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/actionsheet'), 'actionsheet')), 'actionsheet')),

docs/src/mobile.js

@@ -2,21 +2,11 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './WapApp';
 import routes from './router';
-import Vant, { Lazyload } from 'packages';
+import '../../packages/vant-css/src/index.css';
-import VantDoc from 'vant-doc';
+import '../../packages/vant-css/src/icon-local.css';
-import 'packages/vant-css/src/index.css';
-import 'packages/vant-css/src/icon-local.css';
 import 'vant-doc/src/helper/touch-simulator';
 import './components/nprogress.css';
 
-Vue
-  .use(Vant)
-  .use(VantDoc)
-  .use(VueRouter)
-  .use(Lazyload, {
-    lazyComponent: true
-  });
-
 const router = new VueRouter({
   mode: 'hash',
   base: '/zanui/vant/examples',

package.json

@@ -90,7 +90,6 @@
     "karma-spec-reporter": "^0.0.32",
     "karma-webpack": "3.0.0",
     "lint-staged": "^7.0.4",
-    "mini-css-extract-plugin": "^0.4.0",
     "mocha": "^5.1.1",
     "postcss": "^6.0.21",
     "postcss-calc": "^6.0.0",

packages/index.js

@@ -144,6 +144,7 @@ const install = Vue => {
   });
 };
 
+/* istanbul ignore if */
 if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }

yarn.lock

@@ -5653,13 +5653,6 @@ mimic-response@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.0.tgz#df3d3652a73fded6b9b0b24146e6fd052353458e"
 
-mini-css-extract-plugin@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.0.tgz#ff3bf08bee96e618e177c16ca6131bfecef707f9"
-  dependencies:
-    loader-utils "^1.1.0"
-    webpack-sources "^1.1.0"
-
 minimalistic-assert@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"