Merge pull request #20 from environment-agency-austria/chore/migrate-to-rollup

Chore/migrate to rollup

Author: maschino

.babelrc

@@ -2,3 +2,4 @@
 /build
 yarn-error.log
 /coverage
+.rpt2_cache

.gitignore

@@ -13,7 +13,7 @@ jobs:
       name: "Produce coverage"
     - stage: Build
       node_js: "8"
-      name: "Webpack build"
+      name: "Rollup build"
       script: "yarn build"
       deploy:
         provider: npm

.travis.yml

@@ -1,6 +1,9 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [2.0.3] - 2018-12-16
+- Migrated to rollup to improve package size and tree shaking
+
 ## [2.0.2] - 2018-12-01
 - Moved `@types/react-intl` to peerDependencies due to hoisting issues
 - Made production package size smaller

CHANGELOG.MD

@@ -10,11 +10,6 @@ module.exports = {
     '<rootDir>/src/**/*.{ts,tsx}',
     '!<rootDir>/src/test-utils/**',
   ],
-  globals: {
-    'ts-jest': {
-      tsConfig: '<rootDir>/config/jest/tsconfig.jest.json',
-    },
-  },
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
   },

config/jest/tsconfig.jest.json

@@ -1,17 +1,18 @@
 {
   "name": "react-ocean-forms-react-intl",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Library that adds react-intl support to react-ocean-forms.",
   "main": "build/index.js",
+  "module": "build/index.es.js",
   "typings": "build/index.d.ts",
   "private": false,
   "sideEffects": false,
   "scripts": {
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "start": "webpack --watch --mode development",
-    "build": "webpack -p",
+    "start": "rollup -c -w",
+    "build": "rollup -c",
     "lint": "tslint -t stylish --project ."
   },
   "dependencies": { },
@@ -23,40 +24,38 @@
     "react-ocean-forms": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.2.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
-    "@babel/plugin-transform-react-jsx": "^7.2.0",
-    "@babel/preset-env": "^7.2.0",
     "@types/enzyme": "^3.1.15",
     "@types/enzyme-adapter-react-16": "^1.0.3",
     "@types/jest": "^23.3.10",
-    "@types/react": "^16.7.13",
+    "@types/react": "^16.7.17",
     "@types/react-intl": "^2.3.14",
-    "babel-loader": "^8.0.4",
-    "babel-preset-react-app": "^6.1.0",
-    "case-sensitive-paths-webpack-plugin": "^2.1.2",
-    "clean-webpack-plugin": "^1.0.0",
     "coveralls": "^3.0.2",
-    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.7.0",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
     "jest": "^23.6.0",
     "prop-types": "^15.6.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-intl": "^2.7.2",
-    "react-ocean-forms": "^2.1.3",
+    "react-ocean-forms": "^2.1.5",
+    "rollup": "^0.68.0",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-filesize": "^5.0.1",
+    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-typescript2": "^0.18.1",    
     "ts-jest": "^23.10.5",
     "ts-loader": "^5.3.1",
     "tslint": "^5.11.0",
     "tslint-consistent-codestyle": "^1.14.1",
     "tslint-eaa-contrib": "^0.1.5",
     "tslint-microsoft-contrib": "^6.0.0",
     "tslint-react": "^3.6.0",
-    "typescript": "^3.2.1",
-    "webpack": "^4.27.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.10"
+    "typescript": "^3.2.2"
   },
+  "resolutions": {
+    "@types/react": "16.7.17",
+    "@types/enzyme": "^3.1.15"
+  },  
   "files": [
     "build/"
   ],

jest.config.js

@@ -0,0 +1,79 @@
+import typescript from 'rollup-plugin-typescript2';
+import nodeResolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import filesize from 'rollup-plugin-filesize';
+
+const path = require('path');
+const basePath = process.cwd();
+const packageJson = require(path.resolve(basePath, './package.json'));
+
+const externalDependencies = [
+  ...Object.keys(packageJson.dependencies || {}),
+  ...Object.keys(packageJson.peerDependencies || {})
+];
+
+const getBaseConfig = (showFilesize = false, noTsDeclaration = false) => {
+  const tsconfigOverride = noTsDeclaration ? { 
+    compilerOptions: { 
+      declaration: false, 
+      declarationMap: false 
+    } 
+  } : undefined;
+
+  return {
+    input: "src/index.ts",
+    plugins: [
+      nodeResolve({ 
+        preferBuiltins: true, 
+        browser: true 
+      }),    
+      typescript({
+        clean: false,
+        tsconfig: 'tsconfig.build.json',
+        tsconfigOverride,
+      }),      
+      commonjs({
+        namedExports: {
+          'moment': [
+            'locale',
+          ],
+        },
+      }),
+      showFilesize ? filesize() : null,
+    ],
+    external: (id) => {
+      return externalDependencies.some(dep => id.indexOf(dep) === 0);
+    },
+  };
+};
+
+export default (commands) => {
+  const cjsConfig = {
+    ...getBaseConfig(true),
+    output: {
+      file: packageJson.main,
+      format: "cjs",
+      exports: "named",
+      sourcemap: true,
+    },   
+  };
+
+  const esConfig = {
+    ...getBaseConfig(false, true),
+    output: {
+      file: packageJson.module,
+      format: "es",
+      exports: "named",
+      sourcemap: true,
+    }  
+  };
+
+  if (commands.watch === true) {
+    return esConfig;
+  } else {
+    return [
+      cjsConfig,
+      esConfig,
+    ];
+  }
+};

package.json

@@ -3,12 +3,9 @@
   /*
    * This file is used for the build process.
    */
-
-  "compilerOptions": {
-    // Don't generate the declaration files for now...
+   "compilerOptions": {
     "declaration": true,
-    "allowJs": false,
-    "checkJs": false,
+    "declarationDir": "build"
   },
   "exclude": [
     // Make sure that all the test files are excluded from the build

rollup.config.js

@@ -7,15 +7,14 @@
     // Output stuff
     "outDir": "build",
     "jsx": "react",
-    "declaration": true,
-    "sourceMap": true,
+    "declaration": false,
+    "sourceMap": false,
     // Which libraries should be included
     "lib": [
-      "es2017.object",
-      "es2016",
-      "dom"
+      "es5",
+      "dom",
     ],
-    "target": "es2015", // we target es2015. babel will do the rest
+    "target": "es5",
     "moduleResolution": "node",
     // Some style guidelines
     "noImplicitAny": true,
@@ -26,5 +25,7 @@
     // disable javascript for now. The js sources are transpiled with webpack anyway
     "allowJs": false,
     "checkJs": false,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,          
   }
 }