Merge pull request #115 from chenjiahan/dev

Build: analyzes component dependencies when build style entries

build/bin/build-lib.js

@@ -1,18 +1,14 @@
 /**
  * Build npm lib
  * Steps:
- * 1. 清理目录
+ * 1. 代码格式校验
  * 2. 构建 JS 入口文件
- * 3. 代码格式校验
  * 4. 构建每个组件对应的 [component].js
- * 5. 构建 vant-css
+ * 4. 构建 vant-css
+ * 5. 打包 JS 文件：vant.js && vant.min.js
  * 6. 生成每个组件目录下的 style 入口
- * 7. 打包 JS 文件：vant.js && vant.min.js
  */
 
-const fs = require('fs');
-const path = require('path');
-const components = require('./get-components')();
 const chalk = require('chalk');
 require('shelljs/global');
 
@@ -36,26 +32,16 @@ log('Starting', 'build:vant-css');
 exec('npm run build:vant-css --silent');
 log('Finished', 'build:vant-css');
 
-// 5. build style entrys
+// 5. build vant.js 
-log('Starting', 'build:style-entries');
-components.forEach((componentName) => {
-  const dir = path.join(__dirname, '../../lib/', componentName, '/style');
-  const file = path.join(dir, 'index.js');
-  const cssPath = path.join(__dirname, '../../lib/vant-css/', `${componentName}.css`);
-  const content = [`require('../../vant-css/base.css');`];
-  if (fs.existsSync(cssPath)) {
-    content.push(`require('../../vant-css/${componentName}.css');`);
-  }
-  mkdir(dir);
-  writeFile(file, content.join('\n'));
-});
-log('Finished', 'build:style-entries');
-
-// 6. build vant.js 
 log('Starting', 'build:vant');
 exec('npm run build:vant --silent');
 log('Finished', 'build:vant');
 
+// 6. build style entrys
+log('Starting', 'build:style-entries');
+exec('npm run build:style-entry --silent');
+log('Finished', 'build:style-entries');
+
 // helpers
 function log(status, action, breakLine) {
   const now = new Date();
@@ -66,16 +52,3 @@ function log(status, action, breakLine) {
 function padZero(num) {
   return (num < 10 ? '0' : '') + num;
 }
-
-function writeFile(pathname, content) {
-  if (!fs.existsSync(pathname)) {
-    fs.closeSync(fs.openSync(pathname, 'w'));
-  }
-  fs.writeFileSync(pathname, content, { encoding: 'utf8' });
-}
-
-function mkdir(pathname) {
-  if (!fs.existsSync(pathname)) {
-    fs.mkdirSync(pathname);
-  }
-}

build/bin/build-style-entry.js

@@ -0,0 +1,48 @@
+/**
+ * 生成每个组件目录下的 style 入口
+ */
+
+const fs = require('fs-extra');
+const path = require('path');
+const components = require('./get-components')();
+const source = require('../../lib/vant');
+
+components.forEach(componentName => {
+  const dependencies = analyzeDependencies(componentName);
+  const styleDir = path.join(__dirname, '../../lib/', componentName, '/style');
+  const content = dependencies.map(component => `require('../../vant-css/${component}.css');`);
+  fs.outputFileSync(path.join(styleDir, './index.js'), content.join('\n'));
+});
+
+// 递归分析组件依赖
+// 样式引入顺序：基础样式, 组件依赖样式，组件本身样式
+function analyzeDependencies(componentName) {
+  const checkList = ['base'];
+  const search = component => {
+    const componentSource = source[toPascal(component)];  
+    if (componentSource && componentSource.components) {
+      Object.keys(componentSource.components).forEach(name => {
+        name = name.replace('van-', '');
+        if (checkList.indexOf(name) === -1) {
+          search(name);
+        }
+      });
+    }
+    if (checkList.indexOf(component) === -1) {
+      checkList.push(component);
+    }
+  }
+
+  search(componentName);
+  return checkList.filter(component => checkComponentHasStyle(component));
+}
+
+// 判断组件是否有样式
+function checkComponentHasStyle(componentName) {
+  const cssPath = path.join(__dirname, '../../lib/vant-css/', `${componentName}.css`);
+  return fs.existsSync(cssPath);
+}
+
+function toPascal(str) {
+  return ('_' + str).replace(/[_.-](\w|$)/g, (_, x) => x.toUpperCase());
+}

package.json

@@ -17,6 +17,7 @@
     "build:components": "node build/bin/build-components.js --color",
     "build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js --color && mkdir lib/vant-css && cp -R packages/vant-css/lib/ lib/vant-css",
     "build:vant": "cross-env NODE_ENV=production webpack --progress --hide-modules --color --config build/webpack.build.js && cross-env NODE_ENV=production webpack -p --progress --hide-modules --color --config build/webpack.build.js",
+    "build:style-entry": "VUE_ENV=server node build/bin/build-style-entry.js",
     "deploy": "npm run deploy:docs && npm run deploy:cdn && gh-pages -d docs/dist --remote youzan && rimraf docs/dist",
     "deploy:cdn": "superman cdn /zanui/vue docs/dist/*.js docs/dist/*.css",
     "deploy:docs": "rimraf docs/dist && cross-env NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.prod.js",