support es module

Author: wangtao0101

.babelrc

@@ -10,15 +10,40 @@
 			  	}
 			]
 		],
+        "transform-runtime"
 	],
-    "presets": [
-        "es2015",
-        "react",
-        "stage-0",
-    ],
     "env": {
         "development": {
             "sourceMaps" : "inline",
+            "presets": [
+                ["env", {
+                    "targets": {
+                        "browsers": ["last 2 versions", "ie >= 9"]
+                    }
+                }],
+                "react",
+            ],
+        },
+        "commonjs": {
+            "presets": [
+                ["env", {
+                    "targets": {
+                        "browsers": ["last 2 versions", "ie >= 9"]
+                    }
+                }],
+                "react",
+            ],
+        },
+        "es": {
+            "presets": [
+                ["env", {
+                    "targets": {
+                        "browsers": ["last 2 versions", "ie >= 9"]
+                    },
+                    "modules": false
+                }],
+                "react",
+            ],
         },
     }
 }

.gitignore

@@ -6,3 +6,5 @@ npm-debug.*
 lib/
 coverage/
 storybook-static
+es/
+css/

README.md

@@ -11,7 +11,8 @@ To develop fast, some code and file maybe come from antd, thank to the great pro
 Example: https://wangtao0101.github.io/react-virtualized-transfer/
 
 ## Break Change
-use css.js and less.js to help import css or less ！！
+use css.js and less.js to help import css or less !!
+support es version !!
 
 ## Motivation
 We should handle more than 10 thousands of data, but the transfer component in antd is very slow when the number comes to 1000
@@ -30,12 +31,18 @@ yarn add react-virtualized-transfer
 Use css version
 ```
 import Transfer from 'react-virtualized-transfer';
+
 require('react-virtualized-transfer/lib/css')
+// or
+require('react-virtualized-transfer/es/css')
 ```
 Use less version, then you can [modify less variable](https://ant.design/docs/react/customize-theme-cn)
 ```
 import Transfer from 'react-virtualized-transfer';
+
 require('react-virtualized-transfer/lib/less')
+// or
+require('react-virtualized-transfer/es/less')
 ```
 
 ## API (not support means antd support but react-virtualized-transfer not support)

package.json

@@ -3,6 +3,7 @@
   "version": "1.1.0",
   "description": "react-virtualized-transfer",
   "main": "lib/index.js",
+  "module": "es/index.js",
   "scripts": {
     "lint": "eslint src/*.js src/test/*.js",
     "test": "jest",
@@ -11,10 +12,12 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "build:css": "node ./scripts/buildless.js",
-    "less": "node node_modules/.bin/lessc --npm-import='prefix=~' src/transfer.less > lib/transfer.css",
-    "clean": "npm run clean:commonjs && npm run clean:demo && npm run clean:es && npm run clean:umd",
+    "clean": "rimraf lib && rimraf es",
+    "less": "node node_modules/.bin/lessc --npm-import='prefix=~' src/transfer.less > css/transfer.css",
     "deploy": "gh-pages -d storybook-static",
-    "build": "cross-env NODE_ENV=production babel src -d lib --ignore test && npm run build:css && copyfiles -f src/transfer.less lib"
+    "build": "npm run clean && npm run build:css && npm run build:commonjs && npm run build:es",
+    "build:commonjs": "cross-env NODE_ENV=production BABEL_ENV=commonjs babel src -d lib --ignore test && copyfiles -f src/transfer.less lib",
+    "build:es": "cross-env NODE_ENV=production BABEL_ENV=es babel src -d es --ignore test && copyfiles -f src/transfer.less es"
   },
   "repository": {
     "type": "git",
@@ -32,6 +35,9 @@
   },
   "homepage": "https://github.com/wangtao0101/react-virtualized-transfer#readme",
   "dependencies": {
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "1.6.1",
+    "babel-preset-es2015-rollup": "^3.0.0",
     "classnames": "^2.2.5",
     "invariant": "^2.2.2",
     "lodash": "^4.17.4",
@@ -51,14 +57,9 @@
     "babel-loader": "^6.4.1",
     "babel-plugin-import": "^1.1.1",
     "babel-plugin-lodash": "^3.2.11",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
-    "babel-polyfill": "^6.23.0",
-    "babel-preset-es2015": "^6.24.0",
-    "babel-preset-es2016": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.22.0",
     "copyfiles": "^1.2.0",
-    "cross-env": "^4.0.0",
+    "cross-env": "^5.1.1",
     "css-loader": "^0.26.4",
     "enzyme": "^2.8.2",
     "eslint": "^3.19.0",
@@ -81,10 +82,11 @@
     "react-test-renderer": "^15.5.4",
     "redux": "^3.6.0",
     "redux-saga": "^0.14.5",
+    "rimraf": "^2.6.2",
     "webpack": "^1.12.0"
   },
   "peerDependencies": {
-    "antd": "^2.x",
+    "antd": "^2.x || ^3.x",
     "react": "^15.3.0 || ^16.0.0-alpha",
     "react-dom": "^15.3.0 || ^16.0.0-alpha"
   },

scripts/buildless.js

@@ -6,10 +6,13 @@ const path = require('path');
 const options = { plugins: [new NpmImportPlugin({ prefix: '~' })] };
 
 if (fs.existsSync(path.join(__dirname, '../src/transfer.less'))) {
+    if (!fs.existsSync(path.join(process.cwd(), 'css'))) {
+        fs.mkdir(path.join(process.cwd(), 'css'));
+    }
     const lessFile = fs.readFileSync(path.join(__dirname, '../src/transfer.less')).toString();
     less.render(lessFile, options)
     .then((output) => {
-        fs.writeFileSync(path.join(process.cwd(), 'lib', 'transfer.css'), output.css);
+        fs.writeFileSync(path.join(process.cwd(), 'css', 'transfer.css'), output.css);
     })
     .catch((err) => {
         // eslint-disable-next-line

src/css.js

@@ -2,4 +2,4 @@ import 'antd/lib/checkbox/style/index.css';
 import 'antd/lib/button/style/index.css';
 import 'antd/lib/icon/style/css';
 import 'antd/lib/input/style/index.css';
-import './transfer.css'; // eslint-disable-line
+import './../css/transfer.css'; // eslint-disable-line