[new feature] support es module (#875)

.eslintignore

@@ -1,3 +1,4 @@
+es/
 lib/
 dist/
 node_modules/

.gitignore

@@ -4,7 +4,8 @@
 .idea
 .vscode
 packages/**/lib
-lib/
+es
+lib
 node_modules
 example/dist
 /docs/dist

README.md

@@ -42,9 +42,14 @@ npm i babel-plugin-import -D
 
 ```js
 // set babel config in .babelrc or babel-loader
+// Note: Don't set libraryDirectory if you are using webpack 1.
 {
   "plugins": [
-    ["import", { "libraryName": "vant", "style": true }]
+    ["import", {
+      "libraryName": "vant",
+      "libraryDirectory": "es",
+      "style": true
+    }]
   ]
 }
 ```

README.zh-CN.md

@@ -39,9 +39,14 @@ npm i babel-plugin-import -D
 
 ```js
 // 在 .babelrc 或 babel-loader 中添加插件配置
+// 注意：webpack 1 无需设置 libraryDirectory。
 {
   "plugins": [
-    ["import", { "libraryName": "vant", "style": true }]
+    ["import", {
+      "libraryName": "vant",
+      "libraryDirectory": "es",
+      "style": true
+    }]
   ]
 }
 ```

build/bin/build-components.js

@@ -1,34 +1,33 @@
 /**
- * 编译 components 到 lib 目录
+ * Compile components
  */
 const fs = require('fs-extra');
 const path = require('path');
 const compiler = require('vue-sfc-compiler');
-const libDir = path.resolve(__dirname, '../../lib');
-const srcDir = path.resolve(__dirname, '../../packages');
+const esDir = path.join(__dirname, '../../es');
+const libDir = path.join(__dirname, '../../lib');
+const srcDir = path.join(__dirname, '../../packages');
 const babel = require('babel-core');
 const compilerOption = {
   babel: {
-    extends: path.resolve(__dirname, '../../.babelrc')
+    extends: path.join(__dirname, '../../.babelrc')
   }
 };
 
-process.env.BABEL_ENV = 'commonjs';
-
-// clear lib
+// clear dir
+fs.emptyDirSync(esDir);
 fs.emptyDirSync(libDir);
 
 // copy packages
-fs.copySync(srcDir, libDir);
+fs.copySync(srcDir, esDir);
 
-// 编译所有 .vue 文件到 .js
-compile(libDir);
+compile(esDir);
 
-function compile(dir) {
+function compile(dir, jsOnly = false) {
   const files = fs.readdirSync(dir);
 
   files.forEach(file => {
-    const absolutePath = path.resolve(dir, file);
+    const absolutePath = path.join(dir, file);
 
     // 移除 vant-css
     if (file.indexOf('vant-css') !== -1) {
@@ -37,7 +36,7 @@ function compile(dir) {
     } else if (isDir(absolutePath)) {
       return compile(absolutePath);
       // 编译 .vue 文件
-    } else if (/\.vue$/.test(file)) {
+    } else if (/\.vue$/.test(file) && !jsOnly) {
       const source = fs.readFileSync(absolutePath, 'utf-8');
       fs.removeSync(absolutePath);
 
@@ -58,6 +57,10 @@ function compile(dir) {
   });
 }
 
+process.env.BABEL_ENV = 'commonjs';
+fs.copySync(esDir, libDir);
+compile(libDir);
+
 function isDir(dir) {
   return fs.lstatSync(dir).isDirectory();
 }

build/bin/build-style-entry.js

@@ -9,19 +9,19 @@ const dependencyTree = require('dependency-tree');
 const SEP = path.sep;
 
 components.forEach(componentName => {
-  const libDir = path.resolve(__dirname, '../../lib');
-  const content = analyzeDependencies(componentName, libDir).map(component => `require('../../vant-css/${component}.css');`);
-  fs.outputFileSync(path.join(libDir, componentName, './style/index.js'), content.join('\n'));
+  const esDir = path.resolve(__dirname, '../../es');
+  const content = analyzeDependencies(componentName, esDir).map(component => `import '../../vant-css/${component}.css';`);
+  fs.outputFileSync(path.join(esDir, componentName, './style/index.js'), content.join('\n'));
 });
 
 // Analyze component dependencies
-function analyzeDependencies(componentName, libDir) {
+function analyzeDependencies(componentName, esDir) {
   const checkList = ['base'];
   const whiteList = ['icon', 'loading', 'cell', 'button'];
   search(dependencyTree({
-    directory: libDir,
-    filename: path.resolve(libDir, componentName, 'index.js'),
-    filter: path => path.indexOf(`vant${SEP}lib${SEP}`) !== -1
+    directory: esDir,
+    filename: path.resolve(esDir, componentName, 'index.js'),
+    filter: path => path.indexOf(`vant${SEP}es${SEP}`) !== -1
   }), checkList, whiteList);
   return checkList.filter(component => checkComponentHasStyle(component));
 }
@@ -29,7 +29,7 @@ function analyzeDependencies(componentName, libDir) {
 function search(tree, checkList, whiteList) {
   tree && Object.keys(tree).forEach(key => {
     search(tree[key], checkList, whiteList);
-    const component = key.split(`${SEP}vant${SEP}lib${SEP}`)[1].replace(`${SEP}index.js`, '').replace(`mixins${SEP}`, '');
+    const component = key.split(`${SEP}vant${SEP}es${SEP}`)[1].replace(`${SEP}index.js`, '').replace(`mixins${SEP}`, '');
     if (checkList.indexOf(component) === -1 && whiteList.indexOf(component) === -1) {
       checkList.push(component);
     }
@@ -37,5 +37,5 @@ function search(tree, checkList, whiteList) {
 }
 
 function checkComponentHasStyle(componentName) {
-  return fs.existsSync(path.join(__dirname, '../../lib/vant-css/', `${componentName}.css`));
+  return fs.existsSync(path.join(__dirname, '../../es/vant-css/', `${componentName}.css`));
 }

build/webpack.build.js

@@ -9,7 +9,7 @@ module.exports = Object.assign({}, config, {
     'vant': './packages/index.js'
   },
   output: {
-    path: path.join(__dirname, '../lib'),
+    path: path.join(__dirname, '../es'),
     library: 'vant',
     libraryTarget: 'umd',
     filename: isMinify ? '[name].min.js' : '[name].js',

docs/markdown/en-US/quickstart.md

@@ -16,9 +16,14 @@ npm i babel-plugin-import -D
 
 ```js
 // set babel config in .babelrc or babel-loader
+// Note: Don't set libraryDirectory if you are using webpack 1.
 {
   "plugins": [
-    ["import", { "libraryName": "vant", "style": true }]
+    ["import", {
+      "libraryName": "vant",
+      "libraryDirectory": "es",
+      "style": true
+    }]
   ]
 }
 ```

docs/markdown/zh-CN/quickstart.md

@@ -16,9 +16,14 @@ npm i babel-plugin-import -D
 
 ```js
 // 在 .babelrc 或 babel-loader 中添加插件配置
+// 注意：webpack 1 无需设置 libraryDirectory。
 {
   "plugins": [
-    ["import", { "libraryName": "vant", "style": true }]
+    ["import", {
+      "libraryName": "vant",
+      "libraryDirectory": "es",
+      "style": true
+    }]
   ]
 }
 ```

package.json

@@ -8,6 +8,7 @@
   "typings": "types/index.d.ts",
   "files": [
     "lib",
+    "es",
     "packages",
     "types"
   ],

packages/vant-css/gulpfile.js

@@ -25,7 +25,7 @@ gulp.task('compile', () => {
 gulp.task('lib', ['compile'], () => {
   const ttf = glob.sync(resolve('./src/*.ttf'));
   ttf.forEach(ttf => fs.copy(ttf, './lib/' + path.parse(ttf).base));
-  fs.copy('./lib', '../../lib/vant-css');
+  fs.copy('./lib', '../../es/vant-css');
 });
 
 // extract svg from sketch