feat(react): add support for rollup in bundles (#5185)

* feat(react): add support for rollup in bundles * fix(react): update rollup config to exclude prop-types Co-authored-by: TJ Egan <[email protected]>
carbon-design-system · Jan 28, 2020 · 5408899 · 5408899
1 parent d3ebfac
commit 5408899
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 122 deletions.
diff --git a/.yarn/offline-mirror/magic-string-0.25.4.tgz b/.yarn/offline-mirror/magic-string-0.25.4.tgz
diff --git a/.yarn/offline-mirror/rollup-plugin-strip-banner-1.0.0.tgz b/.yarn/offline-mirror/rollup-plugin-strip-banner-1.0.0.tgz
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -24,7 +24,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "yarn clean && node scripts/build.js",
+    "build": "yarn clean && node scripts/build.js && rollup -c",
     "build-storybook": "cross-env NODE_ENV=production build-storybook",
     "clean": "rimraf es lib umd storybook-static build react-docgen.json",
     "prepublish": "yarn build",
@@ -107,6 +107,7 @@
     "rollup-plugin-node-resolve": "^4.2.3",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-sizes": "^0.5.0",
+    "rollup-plugin-strip-banner": "^1.0.0",
     "rollup-plugin-terser": "^4.0.0",
     "rtlcss": "^2.4.0",
     "sass-loader": "^8.0.2",

diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js
@@ -0,0 +1,146 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const babel = require('rollup-plugin-babel');
+const commonjs = require('rollup-plugin-commonjs');
+const resolve = require('rollup-plugin-node-resolve');
+const replace = require('rollup-plugin-replace');
+const stripBanner = require('rollup-plugin-strip-banner');
+const { terser } = require('rollup-plugin-terser');
+const packageJson = require('./package.json');
+
+const baseConfig = {
+  input: './src/index.js',
+  external: [
+    ...Object.keys(packageJson.peerDependencies),
+    ...Object.keys(packageJson.dependencies),
+    'prop-types',
+  ],
+  plugins: [
+    resolve(),
+    commonjs({
+      include: /node_modules/,
+      namedExports: {
+        'react/index.js': [
+          'Children',
+          'Component',
+          'PureComponent',
+          'Fragment',
+          'PropTypes',
+          'createElement',
+        ],
+        'react-dom/index.js': ['render'],
+        'react-is/index.js': ['isForwardRef'],
+      },
+    }),
+    babel({
+      babelrc: false,
+      exclude: ['node_modules/**'],
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            modules: false,
+            targets: {
+              browsers: ['extends browserslist-config-carbon'],
+            },
+          },
+        ],
+        '@babel/preset-react',
+      ],
+      plugins: [
+        'dev-expression',
+        '@babel/plugin-syntax-dynamic-import',
+        '@babel/plugin-syntax-import-meta',
+        '@babel/plugin-proposal-class-properties',
+        '@babel/plugin-proposal-export-namespace-from',
+        '@babel/plugin-proposal-export-default-from',
+      ],
+    }),
+    stripBanner(),
+  ],
+};
+
+const umdExternalDependencies = Object.keys(
+  packageJson.peerDependencies
+).filter(dependency => dependency !== 'carbon-components');
+
+const umdBundleConfig = {
+  input: baseConfig.input,
+  external: [...umdExternalDependencies, 'prop-types'],
+  output: {
+    name: 'CarbonComponentsReact',
+    format: 'umd',
+    globals: {
+      classnames: 'classNames',
+      'prop-types': 'PropTypes',
+      react: 'React',
+      'react-dom': 'ReactDOM',
+      'carbon-icons': 'CarbonIcons',
+    },
+  },
+};
+
+module.exports = [
+  // Generates the following bundles:
+  // ESM:       es/index.js
+  // CommonJS: lib/index.js
+  {
+    ...baseConfig,
+    plugins: [
+      ...baseConfig.plugins,
+      replace({
+        'process.env.NODE_ENV': JSON.stringify('development'),
+      }),
+    ],
+    output: [
+      {
+        format: 'esm',
+        file: 'es/index.js',
+      },
+      {
+        format: 'cjs',
+        file: 'lib/index.js',
+      },
+    ],
+  },
+
+  // Generate the development UMD bundle:
+  // UMD: umd/carbon-components-react.js
+  {
+    ...umdBundleConfig,
+    plugins: [
+      ...baseConfig.plugins,
+      replace({
+        'process.env.NODE_ENV': JSON.stringify('development'),
+      }),
+    ],
+    output: {
+      ...umdBundleConfig.output,
+      file: 'umd/carbon-components-react.js',
+    },
+  },
+
+  // Generate the production UMD bundle:
+  // UMD: umd/carbon-components-react.min.js
+  {
+    ...umdBundleConfig,
+    plugins: [
+      ...baseConfig.plugins,
+      replace({
+        'process.env.NODE_ENV': JSON.stringify('production'),
+      }),
+      terser(),
+    ],
+    output: {
+      ...umdBundleConfig.output,
+      file: 'umd/carbon-components-react.min.js',
+    },
+  },
+];
diff --git a/packages/react/scripts/build.js b/packages/react/scripts/build.js
@@ -13,9 +13,6 @@ if (inInstall()) {
 const babelPath = path
   .resolve(__dirname, '../node_modules/.bin/babel')
   .replace(/ /g, '\\ ');
-const rollupPath = path
-  .resolve(__dirname, '../node_modules/.bin/rollup')
-  .replace(/ /g, '\\ ');
 
 const exec = (command, extraEnv) =>
   execSync(command, {
@@ -43,19 +40,6 @@ try {
     'react-docgen.json',
     JSON.stringify(mapValues(require(`../build/docgen`), '__docgenInfo'))
   );
-
-  exec(
-    `${rollupPath} -c scripts/rollup.config.js -o umd/carbon-components-react.js`,
-    {
-      NODE_ENV: 'development',
-    }
-  );
-  exec(
-    `${rollupPath} -c scripts/rollup.config.js -o umd/carbon-components-react.min.js`,
-    {
-      NODE_ENV: 'production',
-    }
-  );
 } catch (error) {
   console.error('One of the commands failed:', error.stack); // eslint-disable-line no-console
   process.exit(1);

diff --git a/packages/react/scripts/rollup.config.js b/packages/react/scripts/rollup.config.js
diff --git a/yarn.lock b/yarn.lock
@@ -14665,6 +14665,13 @@ [email protected]:
   dependencies:
     vlq "^0.2.1"
 
+[email protected]:
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.4.tgz#325b8a0a79fc423db109b77fd5a19183b7ba5143"
+  integrity sha512-oycWO9nEVAP2RVPbIoDoA4Y7LFIJ3xRYov93gAyJhZkET1tNuB0u7uWkZS2LpBWTJUWnmau/To8ECWRC+jKNfw==
+  dependencies:
+    sourcemap-codec "^1.4.4"
+
 magic-string@^0.25.2:
   version "0.25.6"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.6.tgz#5586387d1242f919c6d223579cc938bf1420795e"
@@ -19504,6 +19511,15 @@ rollup-plugin-strip-banner@^0.2.0:
     magic-string "0.19.1"
     rollup-pluginutils "2.0.1"
 
+rollup-plugin-strip-banner@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-strip-banner/-/rollup-plugin-strip-banner-1.0.0.tgz#28ddfb74e7b9c1fe3e612124fa83e571b914e893"
+  integrity sha512-hatiuCbYCM7db/JmogCn5a4/Un5dLnAIT4ixXmH9qNCbzXJqd0/jnVd/8ZDA3fF7WmmVh7D18GAzha0MMmRpSQ==
+  dependencies:
+    extract-banner "0.1.2"
+    magic-string "0.25.4"
+    rollup-pluginutils "2.8.2"
+
 rollup-plugin-terser@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-4.0.4.tgz#6f661ef284fa7c27963d242601691dc3d23f994e"
@@ -19527,6 +19543,13 @@ [email protected]:
     estree-walker "^0.3.0"
     micromatch "^2.3.11"
 
+[email protected]:
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
+  integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
+  dependencies:
+    estree-walker "^0.6.1"
+
 rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.8.1:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"