feat: use sfc-compiler instead of rollup

.babelrc

@@ -1,9 +1,9 @@
 {
-  "presets": [["es2015", { "modules": false }]],
+  "presets": [["env", { "modules": false, "loose": true }]],
-  "plugins": ["transform-vue-jsx", "transform-runtime"],
+  "plugins": ["transform-vue-jsx", "transform-runtime", "transform-object-rest-spread"],
   "env": {
-    "utils": {
+    "commonjs": {
-      "presets": [["es2015", { "modules": "commonjs" }]]
+      "presets": [["env", { "modules": "commonjs", "loose": true }]]
     }
   }
 }

build/bin/build-components.js

@@ -0,0 +1,37 @@
+const fs = require('fs-extra');
+const path = require('path');
+const compileVue = require('./compile-vue');
+const libDir = path.resolve(__dirname, '../../lib');
+const srcDir = path.resolve(__dirname, '../../packages');
+require('shelljs/global');
+
+fs.emptyDirSync(libDir);
+fs.copySync(srcDir, libDir);
+compileVueFiles(libDir);
+exec('cross-env BABEL_ENV=commonjs babel lib --out-dir lib');
+
+function compileVueFiles(dir) {
+  const files = fs.readdirSync(dir);
+
+  files.forEach(file => {
+    const absolutePath = path.resolve(dir, file);
+
+    if (file.indexOf('vant-css') !== -1) {
+      fs.removeSync(absolutePath);
+    } else if (isDir(absolutePath)) {
+      return compileVueFiles(absolutePath);
+    } else if (/\.vue$/.test(file)) {
+      const source = fs.readFileSync(absolutePath, 'utf-8');
+      fs.removeSync(absolutePath);
+
+      const outputVuePath = absolutePath + '.js';
+      const outputJsPath = absolutePath.replace('.vue', '.js');
+      const output = fs.existsSync(outputJsPath) ? outputVuePath : outputJsPath;
+      fs.outputFileSync(output, compileVue(source));
+    }
+  });
+}
+
+function isDir(dir) {
+  return fs.lstatSync(dir).isDirectory();
+}

build/bin/build-lib.js

@@ -7,8 +7,7 @@
  * 4. 构建每个组件对应的 [component].js
  * 5. 构建 vant-css
  * 6. 生成每个组件目录下的 style 入口
- * 7. 编译 utils
+ * 7. 打包 JS 文件：vant.js && vant.min.js
- * 8. 打包 JS 文件：vant.js && vant.min.js
  */
 
 const fs = require('fs');
@@ -17,32 +16,27 @@ const components = require('../../components.json');
 const chalk = require('chalk');
 require('shelljs/global');
 
-// 1. clean dir
+// 1. lint 
-log('Starting', 'clean');
+log('Starting', 'lint');
-exec('npm run clean --silent');
+exec('npm run lint --silent');
-log('Finished', 'clean');
+log('Finished', 'lint');
 
 // 2. build entry
 log('Starting', 'build:entry');
 exec('npm run build:file --silent');
 log('Finished', 'build:entry');
 
-// 3. lint 
+// 3. build [component].js
-log('Starting', 'lint');
-exec('npm run lint --silent');
-log('Finished', 'lint');
-
-// 4. build [component].js
 log('Starting', 'build:component');
 exec('npm run build:components --silent');
 log('Finished', 'build:component');
 
-// 5. build vant-css
+// 4. build vant-css
 log('Starting', 'build:vant-css');
 exec('npm run build:vant-css --silent');
 log('Finished', 'build:vant-css');
 
-// 6. build style entrys
+// 5. build style entrys
 log('Starting', 'build:style-entries');
 Object.keys(components).forEach((componentName) => {
   const dir = path.join(__dirname, '../../lib/', componentName, '/style');
@@ -57,18 +51,11 @@ Object.keys(components).forEach((componentName) => {
 });
 log('Finished', 'build:style-entries');
 
-// 7. build utils 
+// 6. build vant.js 
-log('Starting', 'build:utils');
-exec('cross-env BABEL_ENV=utils babel packages/utils --out-dir lib/utils');
-exec('cross-env BABEL_ENV=utils babel packages/mixins --out-dir lib/mixins');
-log('Finished', 'build:utils');
-
-// 8. build vant.js 
 log('Starting', 'build:vant');
 exec('npm run build:vant --silent');
 log('Finished', 'build:vant');
 
-
 // helpers
 function log(status, action, breakLine) {
   const now = new Date();

build/rollup.config.lib.js

@@ -1,65 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import vue from 'rollup-plugin-vue';
-import alias from 'zan-rollup-plugin-alias';
-import babel from 'rollup-plugin-babel';
-import resolve from 'rollup-plugin-node-resolve';
-import filesize from 'rollup-plugin-filesize';
-import commonjs from 'rollup-plugin-commonjs';
-import componentsConfig from '../components.json';
-
-const extensions = ['.js', '.vue'];
-
-// 打包时排除 mixins、utils、其他组件
-const utilsPath = path.resolve(__dirname, '../packages/utils/');
-const mixinsPath = path.resolve(__dirname, '../packages/mixins/');
-const external = [
-  ...fs.readdirSync(utilsPath).map(item => path.resolve(utilsPath, item)),
-  ...fs.readdirSync(mixinsPath).map(item => path.resolve(mixinsPath, item)),
-  ...Object.keys(componentsConfig).map(component =>
-    path.resolve(__dirname, '../packages', component, 'index.js')
-  )
-];
-
-export default Object.keys(componentsConfig).map(component => {
-  const config = {
-    entry: componentsConfig[component],
-    targets: [
-      {
-        dest: path.resolve(__dirname, `../lib/${component}/index.js`),
-        format: 'cjs'
-      }
-    ],
-    external: [
-      'vue',
-      'vue-lazyload',
-      path.resolve(__dirname, '../packages/mixins/popup/index.js'),
-      ...external
-    ],
-    plugins: [
-      vue(),
-      filesize(),
-      commonjs({
-        extensions
-      }),
-      resolve({
-        main: true,
-        jsnext: true,
-        extensions
-      }),
-      alias({
-        resolve: extensions,
-        packages: path.resolve(__dirname, '../packages')
-      })
-    ]
-  };
-
-  // button 使用 jsx，需要借助 babel
-  if (component === 'button') {
-    config.plugins.unshift(babel({
-      runtimeHelpers: true
-    }));
-  }
-
-  return config;
-});

package.json

@@ -14,7 +14,7 @@
     "bootstrap": "yarn || npm i && cd ./packages/vant-css/ && yarn || npm i && cd ../../",
     "dev": "npm run build:file && webpack-dev-server --inline --config build/webpack.config.dev.js --content-base ./",
     "build:file": "node build/bin/build-entry.js",
-    "build:components": "rollup -c ./build/rollup.config.lib.js --color",
+    "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",
     "deploy": "npm run deploy:docs && npm run deploy:cdn && gh-pages -d docs/dist --remote youzan && rimraf docs/dist",
@@ -41,7 +41,6 @@
   "license": "ISC",
   "dependencies": {
     "babel-runtime": "6.x",
-    "raf.js": "0.0.4",
     "vue-lazyload": "^1.0.6"
   },
   "peerDependencies": {
@@ -56,11 +55,11 @@
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-module-resolver": "^2.7.1",
     "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-plugin-transform-runtime": "^6.15.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
     "babel-polyfill": "^6.23.0",
-    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-env": "^1.6.0",
-    "babelrc-rollup": "^3.0.0",
     "chai": "^4.1.1",
     "cheerio": "^0.22.0",
     "codecov": "^2.2.0",
@@ -97,12 +96,6 @@
     "precss": "^2.0.0",
     "progress-bar-webpack-plugin": "^1.10.0",
     "rimraf": "^2.5.4",
-    "rollup": "^0.47.4",
-    "rollup-plugin-babel": "^3.0.1",
-    "rollup-plugin-commonjs": "^8.1.0",
-    "rollup-plugin-filesize": "^1.4.2",
-    "rollup-plugin-node-resolve": "^3.0.0",
-    "rollup-plugin-vue": "^2.4.1",
     "run-sequence": "^2.1.0",
     "sinon": "^2.4.1",
     "sinon-chai": "^2.12.0",

test/unit/get-webpack-conf.js

@@ -16,7 +16,7 @@ const webpackConfig = {
       minimize: true,
       options: {
         babel: {
-          presets: ['es2015'],
+          presets: ['env'],
           plugins: ['transform-runtime', 'transform-vue-jsx']
         },
         vue: {

test/unit/karma.conf.js

@@ -1,7 +1,7 @@
 require('babel-polyfill');
 
 require('babel-core/register')({
-  presets: [require('babel-preset-es2015')]
+  presets: [require('babel-preset-env')]
 });
 
 var webpackConfig = require('./get-webpack-conf');