fix: Fix rollup.config.js to handling CommonJS, ESM, ESM for Browser,…

… UMD correctly. (#433) Summary: FIX issue from previous PR: #413 Pull Request resolved: #433 Reviewed By: drarmstr Differential Revision: D22419761 Pulled By: mondaychen fbshipit-source-id: c9f86304dfc33abd755db249ea9b3d2c30d16ff8
facebookexperimental · Jul 10, 2020 · 5ca385a · 5ca385a
1 parent 2cd9c8d
commit 5ca385a
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 71 deletions.
diff --git a/.gitignore b/.gitignore
@@ -85,7 +85,9 @@ typings/
 # Nuxt.js build / generate output
 .nuxt
 dist
-esm
+es
+lib
+/index.d.ts
 
 # Gatsby files
 .cache/

diff --git a/package.json b/package.json
@@ -2,11 +2,14 @@
   "name": "recoil",
   "version": "0.0.10",
   "description": "Recoil - A state management library for React",
-  "main": "dist/index.js",
-  "module": "esm/index.js",
+  "main": "lib/recoil.js",
+  "module": "es/recoil.js",
+  "unpkg": "dist/recoil.js",
   "files": [
     "dist",
-    "esm"
+    "es",
+    "lib",
+    "index.d.ts"
   ],
   "repository": "https://github.com/facebookexperimental/recoil.git",
   "license": "MIT",

diff --git a/rollup.config.js b/rollup.config.js
@@ -4,53 +4,113 @@ import commonjs from '@rollup/plugin-commonjs';
 import replace from '@rollup/plugin-replace';
 import {terser} from 'rollup-plugin-terser';
 
-const modes = ['development', 'production'];
+const inputFile = 'src/Recoil_index.js';
+const externalLibs = ['react', 'react-dom'];
 
-const config = modes.map(mode => ({
-  input: 'src/Recoil_index.js',
-  output: [
-    {
-      file: `esm/recoil.${mode}.js`,
+const commonPlugins = [
+  babel({
+    presets: ['@babel/preset-react', '@babel/preset-flow'],
+    plugins: [
+      'babel-preset-fbjs/plugins/dev-expression',
+      '@babel/plugin-proposal-class-properties',
+      '@babel/plugin-proposal-nullish-coalescing-operator',
+      '@babel/plugin-proposal-optional-chaining',
+      '@babel/transform-flow-strip-types',
+    ],
+    babelHelpers: 'bundled',
+  }),
+  {
+    resolveId: source => {
+      if (source === 'React') {
+        return {id: 'react', external: true};
+      }
+      if (source === 'ReactDOM') {
+        return {id: 'react-dom', external: true};
+      }
+      return null;
+    },
+  },
+  nodeResolve(),
+  commonjs(),
+];
+
+const developmentPlugins = [
+  ...commonPlugins,
+  replace({
+    'process.env.NODE_ENV': JSON.stringify('development'),
+  }),
+];
+
+const productionPlugins = [
+  ...commonPlugins,
+  replace({
+    'process.env.NODE_ENV': JSON.stringify('production'),
+  }),
+  terser({mangle: false}),
+];
+
+const configs = [
+  // CommonJS
+  {
+    input: inputFile,
+    output: {
+      file: `lib/recoil.js`,
+      format: 'cjs',
+      exports: 'named',
+    },
+    external: externalLibs,
+    plugins: commonPlugins,
+  },
+
+  // ES
+  {
+    input: inputFile,
+    output: {
+      file: `es/recoil.js`,
       format: 'es',
       exports: 'named',
     },
-    {
-      file: `dist/recoil.${mode}.js`,
-      format: 'cjs',
+    external: externalLibs,
+    plugins: commonPlugins,
+  },
+
+  // ES for Browsers
+  {
+    input: inputFile,
+    output: {
+      file: `es/recoil.mjs`,
+      format: 'es',
+      exports: 'named',
+    },
+    external: externalLibs,
+    plugins: productionPlugins,
+  },
+
+  // UMD Development
+  {
+    input: inputFile,
+    output: {
+      file: `dist/recoil.js`,
+      format: 'umd',
+      name: 'Recoil',
       exports: 'named',
     },
-  ],
-  external: ['react', 'react-dom'],
-  plugins: [
-    babel({
-      presets: ['@babel/preset-react', '@babel/preset-flow'],
-      plugins: [
-        'babel-preset-fbjs/plugins/dev-expression',
-        '@babel/plugin-proposal-class-properties',
-        '@babel/plugin-proposal-nullish-coalescing-operator',
-        '@babel/plugin-proposal-optional-chaining',
-        '@babel/transform-flow-strip-types',
-      ],
-      babelHelpers: 'bundled',
-    }),
-    {
-      resolveId: source => {
-        if (source === 'React') {
-          return {id: 'react', external: true};
-        }
-        if (source === 'ReactDOM') {
-          return {id: 'react-dom', external: true};
-        }
-        return null;
-      },
+    external: externalLibs,
+    plugins: developmentPlugins,
+  },
+
+  // UMD Production
+  {
+    input: inputFile,
+    output: {
+      file: `dist/recoil.min.js`,
+      format: 'umd',
+      name: 'Recoil',
+      exports: 'named',
     },
-    nodeResolve(),
-    commonjs(),
-    replace({
-      'process.env.NODE_ENV': JSON.stringify(mode),
-    }),
-    mode === 'development' ? undefined : terser({mangle: false}),
-  ],
-}));
-
-export default config;
+    external: externalLibs,
+    plugins: productionPlugins,
+  },
+];
+
+export default configs;
diff --git a/scripts/npm/index.js b/scripts/npm/index.js
diff --git a/scripts/postbuild.js b/scripts/postbuild.js
@@ -6,9 +6,5 @@ function logErrors(err) {
   }
 }
 
-// For CommonJS
-fs.copyFile('./scripts/npm/index.js', './dist/index.js', logErrors);
-fs.copyFile('./typescript/index.d.ts', './dist/index.d.ts', logErrors);
-// For ESM
-fs.copyFile('./scripts/npm/index.js', './esm/index.js', logErrors);
-fs.copyFile('./typescript/index.d.ts', './esm/index.d.ts', logErrors);
+// Copying index.d.ts
+fs.copyFile('./typescript/index.d.ts', './index.d.ts', logErrors);