birdofpreyru/react-utils

Babel Config Improvements for Webpack

Closed this issue · 0 comments

For @babel/preset-env, here:

['@babel/env', { targets: options.targets || 'defaults or chrome >= 69' }],

we want to add modules: 'umd'on a second thought, it is better to go with modules: 'amd' for the front-end / option; and override it with modules: 'cjs', in the node-ssr babel config (https://github.com/birdofpreyru/react-utils/blob/master/config-ts-src/babel/node-ssr.ts).

In the production Webpack config for apps (https://github.com/birdofpreyru/react-utils/blob/master/config-ts-src/webpack/app-production.ts), we want to override babel-loader settings (see current ones in the base config:

/* Loads JS and JSX moudles, and inlines SVG assets. */
test: ops.typescript ? /\.((j|t)sx?|svg)$/ : /\.(jsx?|svg)$/,
exclude: [/node_modules/],
loader: 'babel-loader',
options: {
babelrc: false,
configFile: false,
envName: o.babelEnv,
presets: [['@dr.pogodin/react-utils/config/babel/webpack', {
typescript: ops.typescript,
}]],
...o.babelLoaderOptions,
},

  1. We want to remove exclude option, to ensure that ALL JS/TS, including that from _node_modules_ code passes through Babel when packing production app code. This is necessary to support older browsers, even when 3rd party libraries compiled for newer ones!
  2. We also want to update the rule test (perhaps in base config file) to be test: ops.typescript ? /\.((c?j|t)sx?|svg)$/ : /\.(c?jsx?|svg)$/, to also transform .cjs files, which might be used by 3rd party packages for CommonJS modules.