Angora JavaScript build setup with Webpack and Babel (https://www.npmjs.com/package/@angoralabs/angora-js)

babel.config.js

module.exports = {
  presets: [
    '@babel/preset-react',
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
    '@babel/preset-typescript',
  ],
  plugins: [
    'relay',
    'babel-plugin-idx',
    'babel-plugin-styled-components',
    '@babel/plugin-proposal-object-rest-spread',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-transform-async-to-generator',
    '@babel/plugin-proposal-async-generator-functions',
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining',
  ],
  env: {
    test: {
      presets: [
        '@babel/preset-react',
        ['@babel/preset-env', { targets: { node: 'current' } }],
        '@babel/preset-typescript',
      ],
      plugins: [
        'relay',
        'babel-plugin-idx',
        'babel-plugin-styled-components',
        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-export-default-from',
        '@babel/plugin-proposal-export-namespace-from',
        '@babel/plugin-transform-async-to-generator',
        '@babel/plugin-proposal-async-generator-functions',
        '@babel/plugin-proposal-nullish-coalescing-operator',
        '@babel/plugin-proposal-optional-chaining',
      ],
    },
  },
};

index.ts

const angora = {
  // functions here
};

Object.freeze(angora);

window.angora = angora;

export default angora;

webpack.config.js

const path = require('path');

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  target: 'web', // web is the default target, but we gonna keep it here to make it explicit
  optimization: {
    minimizer: [new TerserPlugin()],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', 'jsx', '.json', '.mjs'],
  },
  output: {
    path: path.resolve(__dirname, process.env.ANGORA_ENV === 'local' ? 'lib' : 'lib/js'),
    filename: '[name].js',
    library: 'angora-js',
    libraryTarget: 'umd',
    pathinfo: false,
    futureEmitAssets: true,
  },
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      },
      {
        test: /\.([jt]sx?)$/,
        loader: 'babel-loader',
        options: {
          configFile: './babel.config.js',
        },
        exclude: /node_modules/,
      },
    ],
  },
};

webpack.production.js

const webpack = require('webpack');
const { merge } = require('webpack-merge');
const CompressionPlugin = require('compression-webpack-plugin');

const common = require('./webpack.config.js');

module.exports = env =>
  merge(common, {
    mode: 'production',
    entry: {
      'angora-js.umd.min': './index.ts',
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('production'),
      }),
      new CompressionPlugin(),
    ],
  });