chore: use rollup and babel for build instead of microbundle (#477)

clauderic · Jan 10, 2019 · 85ff6a93b78d5410f0334ba7be4d56e332096652 · 85ff6a9
1 parent 533ac82
commit 85ff6a93b78d5410f0334ba7be4d56e332096652
Unified Split

Showing with 713 additions and 1,412 deletions.

+19 −7 package.json

+83 −0 rollup.config.js

+611 −1,405 yarn.lock
diff --git a/package.json b/package.json
@@ -9,10 +9,11 @@
  "user": "clauderic",
  "homepage": "https://github.com/clauderic/react-sortable-hoc",
  "source": "src/index.js",
-  
-  "main": "dist/index.js",
-  
-  "umd:main": "dist/index.umd.js",
-  
-  "module": "dist/index.es.js",
-  
-  "jsnext:main": "dist/index.es.js",
+  
+  "main": "dist/react-sortable-hoc.js",
+  
+  "umd:main": "dist/react-sortable-hoc.umd.js",
+  
+  "browser": "dist/react-sortable-hoc.umd.js",
+  
+  "module": "dist/react-sortable-hoc.esm.js",
+  
+  "jsnext:main": "dist/react-sortable-hoc.esm.js",
  "types": "types/index.d.ts",
  "license": "MIT",
  "repository": {
@@ -38,7 +39,7 @@
  ],
  "scripts": {
    "start": "start-storybook -p 9001 -c .storybook",
-  
-    "build": "microbundle --name SortableHOC --no-compress --jsx React.createElement",
+  
+    "build": "rollup -c",
    "test": "eslint src/** --ext .js --quiet",
    "release": "standard-version --no-verify"
  },
@@ -48,7 +49,8 @@
    }
  },
  "dependencies": {
-  
-    "invariant": "^2.2.1",
+  
+    "@babel/runtime": "^7.2.0",
+  
+    "invariant": "^2.2.4",
    "prop-types": "^15.5.7"
  },
  "peerDependencies": {
@@ -57,10 +59,15 @@
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
+  
+    "@babel/plugin-proposal-class-properties": "^7.2.3",
+  
+    "@babel/plugin-transform-runtime": "^7.2.0",
+  
+    "@babel/preset-env": "^7.2.3",
+  
+    "@babel/preset-react": "^7.0.0",
    "@storybook/addon-options": "^4.1.4",
    "@storybook/react": "^4.1.4",
    "autoprefixer": "^6.3.6",
    "babel-loader": "^8.0.5",
+  
+    "babel-plugin-transform-async-to-promises": "^0.8.4",
    "classnames": "^2.2.5",
    "css-loader": "^2.1.0",
    "eslint": "^4.10.0",
@@ -69,7 +76,6 @@
    "html-webpack-plugin": "^2.16.1",
    "husky": "^1.3.1",
    "lodash": "^4.12.0",
-  
-    "microbundle": "^0.9.0",
    "node-sass": "^4.11.0",
    "postcss": "^7.0.7",
    "postcss-loader": "^3.0.0",
@@ -83,6 +89,12 @@
    "react-infinite": "^0.13.0",
    "react-tiny-virtual-list": "^2.0.1",
    "react-virtualized": "^9.2.2",
+  
+    "rollup": "^1.0.0",
+  
+    "rollup-plugin-babel": "^4.2.0",
+  
+    "rollup-plugin-commonjs": "^9.2.0",
+  
+    "rollup-plugin-filesize": "^6.0.0",
+  
+    "rollup-plugin-node-resolve": "^4.0.0",
+  
+    "rollup-plugin-uglify": "^6.0.0",
    "sass-loader": "^7.1.0",
    "standard-version": "^4.4.0",
    "style-loader": "^0.23.1"

diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,83 @@
+  
+import resolve from 'rollup-plugin-node-resolve';
+  
+import commonjs from 'rollup-plugin-commonjs';
+  
+import babel from 'rollup-plugin-babel';
+  
+import filesize from 'rollup-plugin-filesize';
+  
+import {uglify} from 'rollup-plugin-uglify';
+  
+import pkg from './package.json';
+  
+
+  
+const external = (id) => !id.startsWith('.') && !id.startsWith('/');
+  
+
+  
+const babelConfig = (
+  
+  {useESModules, targets} = {
+  
+    useESModules: true,
+  
+    targets: {browsers: 'last 2 versions'},
+  
+  },
+  
+) => ({
+  
+  comments: false,
+  
+  runtimeHelpers: true,
+  
+  presets: [
+  
+    '@babel/preset-react',
+  
+    [
+  
+      '@babel/preset-env',
+  
+      {
+  
+        targets,
+  
+      },
+  
+    ],
+  
+  ],
+  
+  plugins: [
+  
+    '@babel/plugin-proposal-class-properties',
+  
+    ['@babel/transform-runtime', {useESModules, regenerator: false}],
+  
+    ['babel-plugin-transform-async-to-promises', {inlineHelpers: true}],
+  
+  ],
+  
+  exclude: 'node_modules/**',
+  
+});
+  
+
+  
+const umdConfig = ({minify} = {}) => ({
+  
+  input: pkg.source,
+  
+  external: ['react', 'react-dom', 'prop-types'],
+  
+  output: {
+  
+    name: 'SortableHOC',
+  
+    file: minify ? pkg.browser.replace('.js', '.min.js') : pkg.browser,
+  
+    format: 'umd',
+  
+    globals: {
+  
+      react: 'React',
+  
+      'react-dom': 'ReactDOM',
+  
+      'prop-types': 'PropTypes',
+  
+    },
+  
+  },
+  
+  plugins: [
+  
+    resolve(),
+  
+    babel(
+  
+      babelConfig({
+  
+        targets: {browsers: ['last 2 versions', 'safari >= 7']},
+  
+      }),
+  
+    ),
+  
+    commonjs(),
+  
+    minify && uglify(),
+  
+    filesize(),
+  
+  ],
+  
+});
+  
+
+  
+const rollupConfig = [
+  
+  // Browser-friendly UMD builds
+  
+  umdConfig(),
+  
+  umdConfig({minify: true}),
+  
+
+  
+  // CommonJS
+  
+  {
+  
+    input: pkg.source,
+  
+    external,
+  
+    output: [{file: pkg.main, format: 'cjs'}],
+  
+    plugins: [resolve(), babel(babelConfig({useESModules: false})), filesize()],
+  
+  },
+  
+
+  
+  // ES module
+  
+  {
+  
+    input: pkg.source,
+  
+    external,
+  
+    output: [{file: pkg.module, format: 'esm'}],
+  
+    plugins: [resolve(), babel(babelConfig()), filesize()],
+  
+  },
+  
+];
+  
+
+  
+export default rollupConfig;