Skip to content

Commit f97bb54

Browse files
chenjiahanchenjiahan
authored
[new feature] support es module (youzan#875)
1 parent 6d74198 commit f97bb54

11 files changed

Lines changed: 55 additions & 29 deletions

File tree

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
es/
12
lib/
23
dist/
34
node_modules/

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
.idea
55
.vscode
66
packages/**/lib
7-
lib/
7+
es
8+
lib
89
node_modules
910
example/dist
1011
/docs/dist

‎README.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,14 @@ npm i babel-plugin-import -D
4242

4343
```js
4444
// set babel config in .babelrc or babel-loader
45+
// Note: Don't set libraryDirectory if you are using webpack 1.
4546
{
4647
"plugins": [
47-
["import", { "libraryName": "vant", "style": true }]
48+
["import", {
49+
"libraryName": "vant",
50+
"libraryDirectory": "es",
51+
"style": true
52+
}]
4853
]
4954
}
5055
```

‎README.zh-CN.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,14 @@ npm i babel-plugin-import -D
3939

4040
```js
4141
// 在 .babelrc 或 babel-loader 中添加插件配置
42+
// 注意：webpack 1 无需设置 libraryDirectory。
4243
{
4344
"plugins": [
44-
["import", { "libraryName": "vant", "style": true }]
45+
["import", {
46+
"libraryName": "vant",
47+
"libraryDirectory": "es",
48+
"style": true
49+
}]
4550
]
4651
}
4752
```

‎build/bin/build-components.js‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,33 @@
11
/**
2-
* 编译 components 到 lib 目录
2+
* Compile components
33
*/
44
const fs = require('fs-extra');
55
const path = require('path');
66
const compiler = require('vue-sfc-compiler');
7-
const libDir = path.resolve(__dirname, '../../lib');
8-
const srcDir = path.resolve(__dirname, '../../packages');
7+
const esDir = path.join(__dirname, '../../es');
8+
const libDir = path.join(__dirname, '../../lib');
9+
const srcDir = path.join(__dirname, '../../packages');
910
const babel = require('babel-core');
1011
const compilerOption = {
1112
babel: {
12-
extends: path.resolve(__dirname, '../../.babelrc')
13+
extends: path.join(__dirname, '../../.babelrc')
1314
}
1415
};
1516

16-
process.env.BABEL_ENV = 'commonjs';
17-
18-
// clear lib
17+
// clear dir
18+
fs.emptyDirSync(esDir);
1919
fs.emptyDirSync(libDir);
2020

2121
// copy packages
22-
fs.copySync(srcDir, libDir);
22+
fs.copySync(srcDir, esDir);
2323

24-
// 编译所有 .vue 文件到 .js
25-
compile(libDir);
24+
compile(esDir);
2625

27-
function compile(dir) {
26+
function compile(dir, jsOnly = false) {
2827
const files = fs.readdirSync(dir);
2928

3029
files.forEach(file => {
31-
const absolutePath = path.resolve(dir, file);
30+
const absolutePath = path.join(dir, file);
3231

3332
// 移除 vant-css
3433
if (file.indexOf('vant-css') !== -1) {
@@ -37,7 +36,7 @@ function compile(dir) {
3736
} else if (isDir(absolutePath)) {
3837
return compile(absolutePath);
3938
// 编译 .vue 文件
40-
} else if (/\.vue$/.test(file)) {
39+
} else if (/\.vue$/.test(file) && !jsOnly) {
4140
const source = fs.readFileSync(absolutePath, 'utf-8');
4241
fs.removeSync(absolutePath);
4342

@@ -58,6 +57,10 @@ function compile(dir) {
5857
});
5958
}
6059

60+
process.env.BABEL_ENV = 'commonjs';
61+
fs.copySync(esDir, libDir);
62+
compile(libDir);
63+
6164
function isDir(dir) {
6265
return fs.lstatSync(dir).isDirectory();
6366
}

‎build/bin/build-style-entry.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,33 +9,33 @@ const dependencyTree = require('dependency-tree');
99
const SEP = path.sep;
1010

1111
components.forEach(componentName => {
12-
const libDir = path.resolve(__dirname, '../../lib');
13-
const content = analyzeDependencies(componentName, libDir).map(component => `require('../../vant-css/${component}.css');`);
14-
fs.outputFileSync(path.join(libDir, componentName, './style/index.js'), content.join('\n'));
12+
const esDir = path.resolve(__dirname, '../../es');
13+
const content = analyzeDependencies(componentName, esDir).map(component => `import '../../vant-css/${component}.css';`);
14+
fs.outputFileSync(path.join(esDir, componentName, './style/index.js'), content.join('\n'));
1515
});
1616

1717
// Analyze component dependencies
18-
function analyzeDependencies(componentName, libDir) {
18+
function analyzeDependencies(componentName, esDir) {
1919
const checkList = ['base'];
2020
const whiteList = ['icon', 'loading', 'cell', 'button'];
2121
search(dependencyTree({
22-
directory: libDir,
23-
filename: path.resolve(libDir, componentName, 'index.js'),
24-
filter: path => path.indexOf(`vant${SEP}lib${SEP}`) !== -1
22+
directory: esDir,
23+
filename: path.resolve(esDir, componentName, 'index.js'),
24+
filter: path => path.indexOf(`vant${SEP}es${SEP}`) !== -1
2525
}), checkList, whiteList);
2626
return checkList.filter(component => checkComponentHasStyle(component));
2727
}
2828

2929
function search(tree, checkList, whiteList) {
3030
tree && Object.keys(tree).forEach(key => {
3131
search(tree[key], checkList, whiteList);
32-
const component = key.split(`${SEP}vant${SEP}lib${SEP}`)[1].replace(`${SEP}index.js`, '').replace(`mixins${SEP}`, '');
32+
const component = key.split(`${SEP}vant${SEP}es${SEP}`)[1].replace(`${SEP}index.js`, '').replace(`mixins${SEP}`, '');
3333
if (checkList.indexOf(component) === -1 && whiteList.indexOf(component) === -1) {
3434
checkList.push(component);
3535
}
3636
});
3737
}
3838

3939
function checkComponentHasStyle(componentName) {
40-
return fs.existsSync(path.join(__dirname, '../../lib/vant-css/', `${componentName}.css`));
40+
return fs.existsSync(path.join(__dirname, '../../es/vant-css/', `${componentName}.css`));
4141
}

‎build/webpack.build.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ module.exports = Object.assign({}, config, {
99
'vant': './packages/index.js'
1010
},
1111
output: {
12-
path: path.join(__dirname, '../lib'),
12+
path: path.join(__dirname, '../es'),
1313
library: 'vant',
1414
libraryTarget: 'umd',
1515
filename: isMinify ? '[name].min.js' : '[name].js',

‎docs/markdown/en-US/quickstart.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,14 @@ npm i babel-plugin-import -D
1616

1717
```js
1818
// set babel config in .babelrc or babel-loader
19+
// Note: Don't set libraryDirectory if you are using webpack 1.
1920
{
2021
"plugins": [
21-
["import", { "libraryName": "vant", "style": true }]
22+
["import", {
23+
"libraryName": "vant",
24+
"libraryDirectory": "es",
25+
"style": true
26+
}]
2227
]
2328
}
2429
```

‎docs/markdown/zh-CN/quickstart.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,14 @@ npm i babel-plugin-import -D
1616

1717
```js
1818
// 在 .babelrc 或 babel-loader 中添加插件配置
19+
// 注意：webpack 1 无需设置 libraryDirectory。
1920
{
2021
"plugins": [
21-
["import", { "libraryName": "vant", "style": true }]
22+
["import", {
23+
"libraryName": "vant",
24+
"libraryDirectory": "es",
25+
"style": true
26+
}]
2227
]
2328
}
2429
```

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"typings": "types/index.d.ts",
99
"files": [
1010
"lib",
11+
"es",
1112
"packages",
1213
"types"
1314
],

0 commit comments

Comments
 (0)