How to use babel-preset-umi - 4 common examples

args => {
      // eslint-disable-next-line import/no-dynamic-require
      const pkg = require(join(process.env.UMI_DIR, 'package.json'));
      if (args.verbose) {
        const versions = api.applyPlugins('addVersionInfo', {
          initialValue: [
            `umi@${pkg.version}`,
            `${process.platform} ${process.arch}`,
            `node@${process.version}`,
            `umi-build-dev@${require('../../../package').version}`,
            `af-webpack@${require('af-webpack/package').version}`,
            `babel-preset-umi@${require('babel-preset-umi/package').version}`,
            `umi-test@${require('umi-test/package').version}`,
          ],
        });
        versions.forEach(version => {
          console.log(version);
        });
      } else {
        console.log(pkg.version);
      }
      if (existsSync(join(process.env.UMI_DIR, '.local'))) {
        console.log(chalk.cyan('@local'));
      }
    },
  );

// config file not ues ts
const { join } = require('path');
const babelMerge = require('babel-merge');

// 需要传入一个空对象，相关代码 https://github.com/umijs/umi/blob/master/packages/babel-preset-umi/src/index.js#L15
const umiBabelConfig = require('babel-preset-umi').default(undefined, {transformRuntime: {}});

/**
 * 获取 css 插件
 */
const getCssPlugin = path => {
  return [
    'css-modules-transform',
    {
      preprocessCss: join(__dirname, 'less-loader'),
      extensions: ['.css', '.less'],
      generateScopedName: '[local]___[hash:base64:5]',
      extractCss: path,
    },
  ];
};

return babel({
      runtimeHelpers: true,
      presets: [
        ...extraBabelPresets,
        [
          require.resolve('@babel/preset-env'),
          {
            modules: false,
            targets,
          },
        ],
        require.resolve('@babel/preset-react'),
      ],
      plugins: [
        ...extraBabelPlugins,
        ...umiBabel().plugins,
        [
          require.resolve('babel-plugin-inline-import-data-uri'),
          {
            extensions: ['png', 'jpg', 'jpeg', 'gif', 'svg'],
          },
        ],
      ],
      exclude: /node_modules/,
      extensions: EXTENSIONS,
    });
  }

import { loadWebpackConfig } from '../../utils';
import { join } from 'path';
import babelMerge from 'babel-merge';
import babelUmi from 'babel-preset-umi';

const umiBabelConfig = babelUmi();

const { babel } = loadWebpackConfig('afWebpack');

/**
 * 获取 css 插件
 */
const getCssPlugin = path => {
  return [
    'css-modules-transform',
    {
      preprocessCss: join(__dirname, 'less-loader'),
      extensions: ['.css', '.less'],
      generateScopedName: '[local]___[hash:base64:5]',
      extractCss: path,
    },
  ];