env: build separated bundles for ie11

Author: adhrinae

apps/calendar/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@toast-ui/calendar",
   "author": "NHN FE Development Lab <[email protected]>",
-  "version": "2.0.0-dev",
+  "version": "2.0.0-alpha",
   "main": "dist/toastui-calendar.js",
   "types": "types/index.d.ts",
   "sideEffects": [
@@ -48,14 +48,13 @@
     "check-types": "tsc --project ./tsconfig.json --noEmit",
     "validate": "npm run check-types && npm run lint",
     "lint": "eslint .",
-    "serve": "webpack serve --config webpack.dev.config.js",
     "cpy-dist2doc": "mkdir -p doc/dist && cp -f -r dist doc",
     "release-note": "tuie",
-    "build": "rm -rf dist && npm run build:es5 && npm run build:es6 && npm run build:esm",
-    "build:es5": "webpack && webpack --env minify",
-    "build:es6": "webpack --config webpack.es6.config.js && webpack --config webpack.es6.config.js --env minify",
+    "build:all": "rm -rf dist && npm run build && npm run build:ie11",
+    "build": "webpack --config webpack.config.js && webpack --config webpack.config.js --env minify",
+    "build:ie11": "webpack --config webpack.config.js --env ie11 && webpack --config webpack.config.js --env minify ie11",
     "build:esm": "tsc -p tsconfig.esm.json && prettier dist/esm/**/*.js --write",
-    "analyze": "webpack --minify --profile --json > stats.json && webpack-bundle-analyzer stats.json ./dist",
+    "analyze": "webpack --config webpack.config.js --env --profile --json > stats.json && webpack-bundle-analyzer stats.json ./dist",
     "storybook": "start-storybook -p 6006",
     "storybook:build": "build-storybook",
     "storybook:build:docs": "STORYBOOK_ENV=docs build-storybook",

apps/calendar/stats.json

@@ -1,28 +1,102 @@
 /* eslint @typescript-eslint/no-var-requires: "off" */
+const pkg = require('./package.json');
+const path = require('path');
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
 
 const { merge } = require('webpack-merge');
-const common = require('./webpack.common.config');
 
-module.exports = (env, argv) => {
-  const { minify } = env;
-  const filename = `toastui-calendar${minify ? '.min' : ''}.css`;
+function getBabelConfig(isIE11) {
+  return {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          useBuiltIns: 'usage',
+          corejs: '3.22',
+          targets: `defaults${isIE11 ? '' : ', not ie 11'}`,
+        },
+      ],
+      ['@babel/preset-typescript', { jsxPragma: 'h' }],
+    ],
+    plugins: [['@babel/plugin-transform-react-jsx', { pragma: 'h', pragmaFrag: 'Fragment' }]],
+  };
+}
+
+module.exports = ({ minify, ie11 }) => {
+  const shouldMinify = !!minify;
+  const isIE11 = !!ie11;
+
+  const filenameBase = `toastui-calendar${isIE11 ? '.ie11' : ''}${shouldMinify ? '.min' : ''}`;
+  const banner = [
+    'TOAST UI Calendar 2nd Edition',
+    `@version ${pkg.version} | ${new Date().toDateString()}`,
+    `@author ${pkg.author}`,
+    `@license ${pkg.license}`,
+  ].join('\n');
+
+  const commonConfig = {
+    output: {
+      library: ['toastui', 'Calendar'],
+      libraryTarget: 'umd',
+      libraryExport: 'default',
+      path: path.join(__dirname, 'dist'),
+      filename: `${filenameBase}.js`,
+      publicPath: '/dist',
+      globalObject: 'this',
+    },
+    externals: {
+      'tui-date-picker': {
+        commonjs: 'tui-date-picker',
+        commonjs2: 'tui-date-picker',
+        amd: 'tui-date-picker',
+        root: ['tui', 'DatePicker'],
+      },
+      'tui-time-picker': {
+        commonjs: 'tui-time-picker',
+        commonjs2: 'tui-time-picker',
+        amd: 'tui-time-picker',
+        root: ['tui', 'TimePicker'],
+      },
+    },
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js'],
+      alias: {
+        '@src': path.resolve(__dirname, './src/'),
+        '@t': path.resolve(__dirname, 'types/'),
+      },
+    },
+    plugins: [
+      new webpack.BannerPlugin({
+        banner,
+        entryOnly: true,
+      }),
+      new ESLintPlugin({ extensions: ['.tsx', '.ts', '.js'] }),
+    ],
+    optimization: shouldMinify
+      ? {
+          minimize: true,
+          minimizer: [new TerserPlugin({ extractComments: false }), new CssMinimizerPlugin()],
+        }
+      : {
+          minimize: false,
+        },
+  };
 
   const config = {
     mode: 'production',
     entry: ['./src/css/index.css', './src/index.ts'],
     module: {
       rules: [
-        // transpile libraries to es5
         {
           test: /\.(ts|tsx|js)$/,
           exclude: /node_modules/,
           loader: 'babel-loader',
-          options: {
-            rootMode: 'upward',
-          },
+          options: getBabelConfig(isIE11),
         },
         {
           test: /\.css$/,
@@ -43,12 +117,8 @@ module.exports = (env, argv) => {
         },
       ],
     },
-    plugins: [
-      new StyleLintPlugin(),
-      new MiniCssExtractPlugin({ filename }),
-      new ESLintPlugin({ extensions: ['.tsx', '.ts', '.js'] }),
-    ],
+    plugins: [new StyleLintPlugin(), new MiniCssExtractPlugin({ filename: `${filenameBase}.css` })],
   };
 
-  return merge(common(env, argv), config);
+  return merge(commonConfig, config);
 };

apps/calendar/webpack.common.config.js

@@ -1,14 +1,6 @@
 {
   "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "useBuiltIns": "usage",
-        "corejs": 3,
-        "shippedProposals": true,
-        "targets": "defaults"
-      }
-    ],
+    ["@babel/preset-env"],
     ["@babel/preset-typescript", { "jsxPragma": "h" }]
   ],
   "plugins": [["@babel/plugin-transform-react-jsx", { "pragma": "h", "pragmaFrag": "Fragment" }]]