builder-we-app-canary/webpack/config/babel.js

The KOS Builder Module for Choice MicroApp, use latest dependencies

const { resolve } = require;
const get = require('lodash/get');
const { CSS_SCOPE, SAAS_CONFIG } = require('../util/const');

const useReactCssModule = get(SAAS_CONFIG, 'useReactCssModule', true);
const pluginsReactCssModule = useReactCssModule ? [
  resolve('@saasfe/babel-plugin-react-css-module-transformer'),
  [resolve('babel-plugin-react-css-modules'), {
    context: 'src',
    generateScopedName: `${CSS_SCOPE}_[path][local]_[hash:base64:5]`,
    webpackHotModuleReloading: true,
    handleMissingStyleName: 'warn',
    filetypes: {
      ".less": {
        "syntax": "postcss-less"
      }
    },
    autoResolveMultipleImports: true
  }],
] : [];

module.exports = {
  loader: resolve('babel-loader'),
  options: {
    compact: false,
    presets: [
      resolve('@babel/preset-react'),
      [
        resolve('@babel/preset-env'),
        {
          targets: {
            browsers: [
              'last 2 versions',
              'Firefox ESR',
              '> 1%',
              'ie >= 8',
              'iOS >= 8',
              'Android >= 4',
            ],
          },
        },
      ],
    ],
    plugins: [
      resolve('@babel/plugin-proposal-object-rest-spread'),
      [
        resolve('@babel/plugin-proposal-decorators'),
        {
          legacy: true,
        },
      ],
      // resolve('babel-plugin-add-module-exports'),
      resolve('@babel/plugin-proposal-class-properties'),
      // resolve('@babel/plugin-transform-modules-commonjs'),
      resolve('@babel/plugin-proposal-function-bind'),
      resolve('@babel/plugin-proposal-export-default-from'),
      resolve('@babel/plugin-proposal-export-namespace-from'),
      resolve('babel-plugin-syntax-dynamic-import'),
      [resolve('babel-plugin-import'), {
        libraryName: 'choice-cbm',
        libraryDirectory: 'es',
        style: true,
      }, 'choice-cbm'],
      ...pluginsReactCssModule,
    ],
  }
}