无法使用 webpack 和 Babel 为 Web 创建缩小的 JavaScript 库，而不需要输出 require()

Question

I'd like to use the latest JavaScript constructs not supported by all browsers so I've turned to webpack and Babel.

My code contains no requires but the output does. This causes Uncaught ReferenceError: require is not defined when output is loaded in a browser.

.babelrc

{
  "plugins": [
    "@babel/plugin-transform-runtime"
  ],
  "presets": [
    "@babel/preset-env"
  ]
}

webpack.config.js

const MinifyPlugin = require('babel-minify-webpack-plugin');

module.exports = {
  target: 'web',
  mode: 'production',
  entry: './uuuu.js',
  output: { filename: 'uuuu.min.js' },   
  plugins: [
    new MinifyPlugin(
      {},
      {
        minifyPreset: require('babel-preset-minify')
      }
    )
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

What to do?

Answer 1

I have had great experiences using the angular cli to build NPM JavaSscript libraries even if they are not Angular projects. You get the awesome build and test pipeline and can remove the Angular dependencies to create generic JavaScript libraries.

type

npm install -g @angular/cli

then

ng new my-lib --create-application=false

cd into the newly created folder and create a library

ng generate library my-lib

Change into the folder projects/my-lib and remove the Angular dependencies from peerDependencies in the package.json folder and remove the demo Angular component, module and service.

Now you have a world class TypeScript project ready to build and deploy to NPM.

Type

ng build my-lib

then change into dist/my-lib and type

npm publish

Why try and hand roll a build and test pipeline when you can have the experience of the Angular team behind you?