依赖更新 && 构建调整 (#60)

* upgrade dependencies

* 更改所有 saladcss 写法

* fix: 升级依赖导致的样式错误

* fix: build vant css

* use es module when pack && webpack scope hoisting

* fix: vue module version

* delete unused npm script

* fix: build:vant script not work

* fix: webpack config format

* fix: build minify vant.js

* fix: captain ui relative link

build/bin/build-entry.js

@@ -3,18 +3,23 @@ var fs = require('fs');
 var render = require('json-templater/string');
 var uppercamelcase = require('uppercamelcase');
 var path = require('path');
-var chalk = require('chalk');
 
 var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
 var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
-var ISNTALL_COMPONENT_TEMPLATE = '  Vue.component({{name}}.name, {{name}});';
+var ISNTALL_COMPONENT_TEMPLATE = '  {{name}}';
 var MAIN_TEMPLATE = `{{include}}
 
+const version = '{{version}}';
+const components = [
+{{components}}
+];
+
 const install = function(Vue) {
-  /* istanbul ignore if */
   if (install.installed) return;
 
-{{install}}
+  components.forEach(component => {
+    Vue.component(component.name, component);
+  });
 };
 
 /* istanbul ignore if */
@@ -22,9 +27,14 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 
-module.exports = {
+export {
   install,
-  version: '{{version}}',
+  version,
+{{list}}
+};
+export default {
+  install,
+  version,
 {{list}}
 };
 `;
@@ -66,11 +76,11 @@ ComponentNames.forEach(name => {
 
 var template = render(MAIN_TEMPLATE, {
   include: includeComponentTemplate.join('\n'),
-  install: installTemplate.join('\n'),
-  version: process.env.VERSION || require('../../package.json').version,
-  list: listTemplate.join(',\n')
+  list: listTemplate.join(',\n'),
+  components: installTemplate.join(',\n') || ' ',
+  version: process.env.VERSION || require('../../package.json').version
 });
 
 fs.writeFileSync(OUTPUT_PATH, template);
-console.log(chalk.green('[build entry] DONE:' + OUTPUT_PATH));
+console.log('[build entry] DONE:' + OUTPUT_PATH);
 

build/genExamples.js

@@ -11,8 +11,6 @@ function extract(watch = false) {
   });
 }
 
-extract();
-
-module.exports = function watch() {
-  extract(true);
+module.exports = function watch(isProduction) {
+  extract(!isProduction);
 };

build/strip-tags.js

@@ -1,34 +0,0 @@
-/*!
- * strip-tags <https://github.com/jonschlinkert/strip-tags>
- *
- * Copyright (c) 2015 Jon Schlinkert, contributors.
- * Licensed under the MIT license.
- */
-
-'use strict';
-
-var cheerio = require('cheerio');
-
-exports.strip = function(str, tags) {
-  var $ = cheerio.load(str, {decodeEntities: false});
-
-  if (!tags || tags.length === 0) {
-    return str;
-  }
-
-  tags = !Array.isArray(tags) ? [tags] : tags;
-  var len = tags.length;
-
-  while (len--) {
-    $(tags[len]).remove();
-  }
-
-  return $.html();
-};
-
-exports.fetch = function(str, tag) {
-  var $ = cheerio.load(str, {decodeEntities: false});
-  if (!tag) return str;
-
-  return $(tag).html();
-};

build/utils/postcss_pipe.js

@@ -1,29 +0,0 @@
-var config = {
-    'bem': {
-        'shortcuts': {'component': 'b', 'modifier': 'm', 'descendent': 'e'},
-        'separators': {'descendent': '__', 'modifier': '--'}
-    }
-};
-
-// https://github.com/trysound/postcss-easy-import
-var partialImport = require('postcss-easy-import')();
-
-// 这不是bem，虽然名字叫bem，其实它是suit
-// https://github.com/saladcss/saladcss-bem
-var bem = require('saladcss-bem')(config.bem);
-
-// https://github.com/jonathantneal/precss
-var precss = require('precss')();
-
-// https://github.com/postcss/autoprefixer
-var autoprefixer = require('autoprefixer')();
-
-module.exports = function (webpack) {
-  // 顺序很重要
-  return [
-    partialImport,
-    bem,
-    precss,
-    autoprefixer
-  ];
-};

build/webpack.build.js

@@ -1,13 +1,13 @@
-var webpack = require('webpack');
-var getPostcssPlugin = require('./utils/postcss_pipe');
-var config = require('./webpack.config.dev.js');
+const webpack = require('webpack');
+const config = require('./webpack.config.dev.js');
+const isMinify = process.argv.indexOf('-p') !== -1;
 
 config.entry = {
   'vant': './src/index.js'
 };
 
 config.output = {
-  filename: './lib/[name].js',
+  filename: isMinify ? './lib/[name].min.js' : './lib/[name].js',
   library: 'vant',
   libraryTarget: 'umd',
   umdNamedDefine: true
@@ -30,18 +30,13 @@ config.plugins = [
     minimize: true,
     debug: false,
     options: {
-      postcss: getPostcssPlugin,
-      babel: {
-        presets: ['es2015'],
-        plugins: ['transform-runtime', 'transform-vue-jsx']
-      },
       vue: {
         autoprefixer: false,
-        preserveWhitespace: false,
-        postcss: getPostcssPlugin
+        preserveWhitespace: false
       }
     }
-  })
+  }),
+  new webpack.optimize.ModuleConcatenationPlugin()
 ];
 
 delete config.devtool;

build/webpack.build.min.js

@@ -1,20 +0,0 @@
-var webpack = require('webpack');
-var config = require('./webpack.build.js');
-
-config.entry = {
-  'index': './src/index.js'
-};
-
-config.plugins = config.plugins.concat([
-  new webpack.optimize.UglifyJsPlugin({
-    compress: {
-      warnings: false
-    },
-    output: {
-      comments: false
-    },
-    sourceMap: false
-  })
-]);
-
-module.exports = config;

build/webpack.components.js

@@ -1,6 +1,7 @@
-var path = require('path');
-var Components = require('../components.json');
-var config = require('./webpack.build.js');
+const path = require('path');
+const Components = require('../components.json');
+const config = require('./webpack.build.js');
+const webpack = require('webpack');
 
 delete config.devtool;
 

build/webpack.config.dev.js

@@ -1,44 +1,20 @@
-var webpack = require('webpack');
-var path = require('path');
-var slugify = require('transliteration').slugify;
-var striptags = require('./strip-tags');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var getPostcssPlugin = require('./utils/postcss_pipe');
-var ProgressBarPlugin = require('progress-bar-webpack-plugin');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const webpack = require('webpack');
+const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 const isProduction = process.env.NODE_ENV === 'production';
-const watchExample = require('./genExamples');
-
-if (!isProduction) {
-  watchExample();  
-}
-
-var StyleExtractPlugin;
-if (process.env.NODE_ENV === 'production') {
-  StyleExtractPlugin = new ExtractTextPlugin('[name].[hash:8].css');
-} else {
-  StyleExtractPlugin = new ExtractTextPlugin('[name].css');
-}
-
-function convert(str) {
-  str = str.replace(/(&#x)(\w{4});/gi, function($0) {
-    return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
-  });
-  return str;
-}
-
-function wrap(render) {
-  return function() {
-    return render.apply(this, arguments)
-      .replace(/\<code v-pre class=\"/, '<code v-pre class="hljs ');
-  };
-};
+const styleLoaders = [
+  { loader: 'css-loader' },
+  { loader: 'postcss-loader', options: { sourceMap: true } }
+];
+require('./genExamples')(isProduction);
 
 module.exports = {
   entry: {
-    'vendor': ['vue', 'vue-router', 'zan-doc'],
+    vendor: ['vue', 'vue-router', 'zan-doc'],
     'vant-docs': './docs/src/index.js',
     'vant-examples': './docs/src/examples.js'
   },
@@ -54,37 +30,41 @@ module.exports = {
         { from: /^\/zanui\/vue\/examples/, to: '/examples.html' },
         { from: /^\/zanui\/vue/, to: '/index.html' }
       ]
-    }
+    },
+    stats: 'errors-only'
   },
   resolve: {
-    modules: [
-      path.join(__dirname, '../node_modules'),
-      'node_modules'
-    ],
+    modules: [path.join(__dirname, '../node_modules'), 'node_modules'],
     extensions: ['.js', '.vue', '.css'],
     alias: {
-      'vue$': 'vue/dist/vue.runtime.common.js',
-      'src': path.join(__dirname, '../src'),
-      'packages': path.join(__dirname, '../packages'),
-      'lib': path.join(__dirname, '../lib'),
-      'components': path.join(__dirname, '../docs/src/components')
+      vue$: 'vue/dist/vue.esm.js',
+      src: path.join(__dirname, '../src'),
+      packages: path.join(__dirname, '../packages'),
+      lib: path.join(__dirname, '../lib'),
+      components: path.join(__dirname, '../docs/src/components')
     }
   },
   module: {
     loaders: [
       {
         test: /\.vue$/,
-        use: [{
-          loader: 'vue-loader',
-          options: {
-            loaders: {
-              css: ExtractTextPlugin.extract({
-                use: 'css-loader!postcss-loader',
-                fallback: 'vue-style-loader'
-              })
+        use: [
+          {
+            loader: 'vue-loader',
+            options: {
+              loaders: {
+                postcss: ExtractTextPlugin.extract({
+                  use: styleLoaders,
+                  fallback: 'vue-style-loader'
+                }),
+                css: ExtractTextPlugin.extract({
+                  use: styleLoaders,
+                  fallback: 'vue-style-loader'
+                })
+              }
             }
           }
-        }]
+        ]
       },
       {
         test: /\.js$/,
@@ -93,9 +73,7 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          use: 'css-loader!postcss-loader'
-        })
+        use: ExtractTextPlugin.extract({ use: styleLoaders })
       },
       {
         test: /\.md/,
@@ -113,34 +91,29 @@ module.exports = {
     new webpack.LoaderOptionsPlugin({
       minimize: true,
       options: {
-        postcss: getPostcssPlugin,
-        babel: {
-          presets: ['es2015'],
-          plugins: ['transform-runtime', 'transform-vue-jsx']
-        },
         vue: {
-          autoprefixer: false,
-          postcss: getPostcssPlugin
+          autoprefixer: false
         },
         vueMarkdown: {
           use: [
-            [require('markdown-it-container'), 'demo', {
-              validate: function(params) {
-                return params.trim().match(/^demo\s*(.*)$/);
-              },
+            [
+              require('markdown-it-container'),
+              'demo',
+              {
+                validate: function(params) {
+                  return params.trim().match(/^demo\s*(.*)$/);
+                },
 
-              render: function(tokens, idx) {
-                if (tokens[idx].nesting === 1) {
-                  return `<demo-block class="demo-box"><div class="highlight" slot="highlight">`;
+                render: function(tokens, idx) {
+                    return tokens[idx].nesting === 1 
+                      ? `<demo-block class="demo-box"><div class="highlight" slot="highlight"å>`
+                      :`</div></demo-block>\n`;
                 }
-                return `</div></demo-block>\n`;
               }
-            }]
+            ]
           ],
           preprocess: function(MarkdownIt, source) {
-            MarkdownIt.renderer.rules.table_open = function() {
-              return '<table class="zan-doc-table">';
-            };
+            MarkdownIt.renderer.rules.table_open = () => '<table class="zan-doc-table">';
             return source;
           }
         }
@@ -160,7 +133,10 @@ module.exports = {
     }),
     new webpack.HotModuleReplacementPlugin(),
     new OptimizeCssAssetsPlugin(),
-    StyleExtractPlugin,
+    new ExtractTextPlugin({
+      filename: isProduction ? '[name].[hash:8].css' : '[name].css',
+      allChunks: true
+    }),
     new FriendlyErrorsPlugin()
   ]
 };