fix(build): Add externals for libraries

Author: nanovazquez

package.json

@@ -38,7 +38,7 @@
     "@typescript-eslint/eslint-plugin": "^2.27.0",
     "@typescript-eslint/parser": "^2.27.0",
     "copy-webpack-plugin": "^5.1.1",
-    "cross-spawn": "^7.0.2",
+    "cross-spawn": "7.0.3",
     "css-loader": "^3.4.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
@@ -67,7 +67,7 @@
   },
   "devDependencies": {
     "@types/copy-webpack-plugin": "^5.0.0",
-    "@types/cross-spawn": "^6.0.1",
+    "@types/cross-spawn": "^6.0.2",
     "@types/eslint": "^7.2.0",
     "@types/jest": "^25.2.1",
     "@types/mini-css-extract-plugin": "^0.9.1",

src/common/paths.ts

@@ -1,10 +1,11 @@
 import path from "path";
 
 const ROOT_PATH = path.resolve(process.cwd());
+const NODE_MODULES_PATH = path.resolve(ROOT_PATH, "node_modules");
 const CONFIG_PATH = path.resolve(ROOT_PATH, "config");
 const SOURCE_PATH = path.resolve(ROOT_PATH, "src");
 const ASSETS_PATH = path.resolve(ROOT_PATH, "public");
 const OUTPUT_PATH = path.resolve(ROOT_PATH, "dist");
 const OUTPUT_PUBLIC_PATH = "/";
 
-export { ROOT_PATH, CONFIG_PATH, SOURCE_PATH, ASSETS_PATH, OUTPUT_PATH, OUTPUT_PUBLIC_PATH };
+export { ROOT_PATH, NODE_MODULES_PATH, CONFIG_PATH, SOURCE_PATH, ASSETS_PATH, OUTPUT_PATH, OUTPUT_PUBLIC_PATH };

src/webpack/resolveExternals.ts

@@ -1,8 +1,22 @@
 import type webpack from "webpack";
 
-export default (isDevelopment: boolean, isLibrary?: true): webpack.ExternalsElement => {
-  if (isDevelopment || isLibrary) {
-    return {};
+export default (isLibrary: boolean): webpack.ExternalsElement => {
+  if (isLibrary) {
+    // UMD only supports an object
+    return {
+      react: {
+        amd: "react",
+        commonjs: "react",
+        commonjs2: "react",
+        root: "React",
+      },
+      "react-dom": {
+        amd: "react-dom",
+        commonjs: "react-dom",
+        commonjs2: "react-dom",
+        root: "ReactDOM",
+      },
+    };
   }
 
   return {

src/webpack/resolveModuleRules.ts

@@ -2,7 +2,7 @@ import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import { SOURCE_PATH } from "../common/paths";
 import type webpack from "webpack";
 
-const getCssLoaders = (isDevelopment: boolean): (string | webpack.RuleSetLoader)[] => {
+const getCssLoaders = (isDevelopment: boolean, isLibrary: boolean): (string | webpack.RuleSetLoader)[] => {
   const styleLoader = "style-loader";
   const miniCssExtractPluginLoader = MiniCssExtractPlugin.loader;
   const typingsCssModulesLoader = {
@@ -27,18 +27,22 @@ const getCssLoaders = (isDevelopment: boolean): (string | webpack.RuleSetLoader)
     },
   };
 
+  if (isLibrary) {
+    return isDevelopment ? [styleLoader, typingsCssModulesLoader, cssLoader] : [styleLoader, cssLoader];
+  }
+
   return isDevelopment ? [styleLoader, typingsCssModulesLoader, cssLoader] : [miniCssExtractPluginLoader, cssLoader];
 };
 
-export default (isDevelopment: boolean): webpack.RuleSetRule[] => [
+export default (isDevelopment: boolean, isLibrary: boolean): webpack.RuleSetRule[] => [
   // All .ts and .tsx files will be loaded with ts-loader
   { test: /\.ts(x?)$/, include: SOURCE_PATH, use: [{ loader: "ts-loader" }] },
   // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
   { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
   {
     test: /\.scss$/,
     use: [
-      ...getCssLoaders(isDevelopment),
+      ...getCssLoaders(isDevelopment, isLibrary),
       {
         loader: "sass-loader",
         options: {
@@ -49,7 +53,7 @@ export default (isDevelopment: boolean): webpack.RuleSetRule[] => [
   },
   {
     test: /\.css$/,
-    use: [...getCssLoaders(isDevelopment)],
+    use: [...getCssLoaders(isDevelopment, isLibrary)],
   },
   { test: /\.svg$/, use: ["@svgr/webpack", "url-loader"] },
 ];

src/webpack/resolvePlugins.ts

@@ -5,11 +5,7 @@ import HtmlWebpackPlugin from "html-webpack-plugin";
 import CopyWebpackPlugin from "copy-webpack-plugin";
 import { ASSETS_PATH, OUTPUT_PATH, OUTPUT_PUBLIC_PATH } from "../common/paths";
 
-// TODO: move this to the main file and convert the webpack to a function
-import getArgumentValue from "../common/getArgumentValue";
-const isLibrary = getArgumentValue(process.argv, "type").toLowerCase() === "library";
-
-export default (isDevelopment: boolean, version: string): webpack.Plugin[] => {
+export default (isDevelopment: boolean, isLibrary: boolean, version: string): webpack.Plugin[] => {
   const noOpFunction = (): undefined => undefined;
   const miniCssExtractPlugin = new MiniCssExtractPlugin({
     filename: isDevelopment ? "styles.css" : "styles.[hash:5].css",
@@ -29,11 +25,11 @@ export default (isDevelopment: boolean, version: string): webpack.Plugin[] => {
   const watchIgnorePlugin = new webpack.WatchIgnorePlugin([/scss\.d\.ts$/]);
   const hotModuleReplacementPlugin = new webpack.HotModuleReplacementPlugin();
 
-  return [
-    miniCssExtractPlugin,
-    !isLibrary ? copyWebpackPlugin : noOpFunction,
-    !isLibrary ? htmlWebpackPlugin : noOpFunction,
-    watchIgnorePlugin,
-    isDevelopment ? hotModuleReplacementPlugin : noOpFunction,
-  ];
+  if (isLibrary) {
+    return isDevelopment ? [watchIgnorePlugin, hotModuleReplacementPlugin] : [watchIgnorePlugin];
+  }
+
+  return isDevelopment
+    ? [miniCssExtractPlugin, copyWebpackPlugin, htmlWebpackPlugin, watchIgnorePlugin, hotModuleReplacementPlugin]
+    : [miniCssExtractPlugin, copyWebpackPlugin, htmlWebpackPlugin, watchIgnorePlugin];
 };

src/webpack/webpack.config.app.ts

@@ -1,52 +1,53 @@
 import path from "path";
+import { ROOT_PATH, OUTPUT_PATH, OUTPUT_PUBLIC_PATH } from "../common/paths";
+import resolveAliases from "./resolveAliases";
 import resolveExternals from "./resolveExternals";
 import resolveModuleRules from "./resolveModuleRules";
 import resolvePlugins from "./resolvePlugins";
 import resolveVersion from "./resolveVersion";
-import { ROOT_PATH, OUTPUT_PATH, OUTPUT_PUBLIC_PATH } from "../common/paths";
+
 import type webpack from "webpack";
 
 const isDevelopment = process.env.NODE_ENV === "development" || process.env.NODE_ENV === "dev";
 const version = resolveVersion(isDevelopment);
 
 const webpackConfig: webpack.Configuration = {
+  devServer: isDevelopment
+    ? {
+        https: true,
+        inline: true,
+        hot: true,
+        contentBase: [OUTPUT_PATH, ROOT_PATH],
+        publicPath: OUTPUT_PUBLIC_PATH,
+        historyApiFallback: true,
+      }
+    : undefined,
+
+  // See https://webpack.js.org/configuration/devtool/
+  devtool: isDevelopment ? "cheap-module-eval-source-map" : "source-map",
+
+  externals: resolveExternals(false),
+
   mode: isDevelopment ? "development" : "production",
 
   entry: path.resolve(ROOT_PATH, "./src/index.tsx"),
+
   output: {
     filename: "bundle.[hash:5].min.js",
     path: OUTPUT_PATH,
     publicPath: OUTPUT_PUBLIC_PATH,
   },
 
-  devServer: {
-    https: true,
-    inline: true,
-    hot: true,
-    contentBase: [OUTPUT_PATH, ROOT_PATH],
-    publicPath: OUTPUT_PUBLIC_PATH,
-    historyApiFallback: true,
-  },
-
-  // See https://webpack.js.org/configuration/devtool/
-  devtool: isDevelopment ? "cheap-module-eval-source-map" : "source-map",
-
   resolve: {
-    // Add resolvable extensions.
+    alias: resolveAliases(),
     extensions: [".ts", ".tsx", ".scss", ".js", ".jsx", ".json"],
   },
 
-  // When importing a module whose path matches one of the following, just
-  // assume a corresponding global variable exists and use that instead.
-  // This is important because it allows us to avoid bundling all of our
-  // dependencies, which allows browsers to cache those libraries between builds.
-  externals: resolveExternals(isDevelopment),
-
   module: {
-    rules: resolveModuleRules(isDevelopment),
+    rules: resolveModuleRules(isDevelopment, false),
   },
 
-  plugins: resolvePlugins(isDevelopment, version),
+  plugins: resolvePlugins(isDevelopment, false, version),
 };
 
 export default webpackConfig;

src/webpack/webpack.config.library.ts

@@ -1,42 +1,41 @@
 import path from "path";
+import { ROOT_PATH, OUTPUT_PATH } from "../common/paths";
+import resolveAliases from "./resolveAliases";
 import resolveExternals from "./resolveExternals";
 import resolveModuleRules from "./resolveModuleRules";
 import resolvePlugins from "./resolvePlugins";
 import resolveVersion from "./resolveVersion";
-import { ROOT_PATH, OUTPUT_PATH } from "../common/paths";
 import type webpack from "webpack";
 
 const isDevelopment = process.env.NODE_ENV === "development" || process.env.NODE_ENV === "dev";
 const version = resolveVersion(isDevelopment);
 
 const webpackConfig: webpack.Configuration = {
+  // See https://webpack.js.org/configuration/devtool/
+  devtool: isDevelopment ? "cheap-module-eval-source-map" : "source-map",
+
+  externals: resolveExternals(true),
+
   mode: isDevelopment ? "development" : "production",
 
   entry: path.resolve(ROOT_PATH, "./src/index.tsx"),
+
   output: {
     filename: "index.min.js",
     path: OUTPUT_PATH,
+    libraryTarget: "commonjs2",
   },
 
-  // See https://webpack.js.org/configuration/devtool/
-  devtool: isDevelopment ? "cheap-module-eval-source-map" : "source-map",
-
   resolve: {
-    // Add resolvable extensions.
+    alias: resolveAliases(),
     extensions: [".ts", ".tsx", ".scss", ".js", ".jsx", ".json"],
   },
 
-  // When importing a module whose path matches one of the following, just
-  // assume a corresponding global variable exists and use that instead.
-  // This is important because it allows us to avoid bundling all of our
-  // dependencies, which allows browsers to cache those libraries between builds.
-  externals: resolveExternals(isDevelopment, true),
-
   module: {
-    rules: resolveModuleRules(isDevelopment),
+    rules: resolveModuleRules(isDevelopment, true),
   },
 
-  plugins: resolvePlugins(isDevelopment, version),
+  plugins: resolvePlugins(isDevelopment, true, version),
 };
 
 export default webpackConfig;