@webpackon/use-babel

Features:

• adds babel support
• simple transpiling of modules

Install

npm i @webpackon/use-babel --save

yarn add @webpackon/use-babel

API

const { useBabel } = require('@webpackon/use-babel');

useBabel(params?: UseBabelParams)(config: WebpackConfig)

UseBabelParams

export type UseBabelParams = {
  transpileModules?: string[];
  useTs?: boolean;
  loaderParams?: {
    options?: Record<string, any>;
  };
};

• transpileModules

useBabel({
  transpileModules: ['lodash-es', 'antd']
})

• useTs - enables ts support

• loaderParams.options - babel-loader options

TS example

Full example is here

webpack.config.js

const path = require('path');

const { compose } = require('@webpackon/core');
const { useTs } = require('@webpackon/use-ts');
const { useBabel } = require('@webpackon/use-babel');

module.exports = (_, { mode }) =>
  compose(
    useBabel({ useTs: true, transpileModules: ['my-module'] }),
    useTs(),
  )({
    target: 'web',
    entry: path.resolve(__dirname, 'src', 'index.tsx'),
  });

babel.config.js

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    [
			"@babel/preset-typescript",
      {
        "isTSX": true,
        "allExtensions": true
      }
		],
  ]
}

JS example

const path = require('path');

const { compose } = require('@webpackon/core');
const { useBabel } = require('@webpackon/use-babel');

module.exports = (_, { mode }) =>
  compose(
    useBabel(),
  )({
    target: 'web',
    entry: path.resolve(__dirname, 'src', 'index.tsx'),
  });

babel.config.js

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
}