react项目使用swc代替babel打包使用CRA配置

前提

• 使用create-app-react --template
• 使用carco

为什么使用swc？

• swc的基准测试：swc.rs/docs/benchm…

偏底层的语言就是快啊

• 第二个原因就是年轻人爱折腾，爱玩新东西

我是在我自己的项目上用的，公司上可要谨慎替换，在他没成熟之前还是用babel吧，除非你是leader👍

原理

• SWC旨在替换babel，实现更快的编译，官方原话：swc.rs/docs/migrat…

• 既然只是替代babel，那么只需要移除babel-loader再使用swc-loader即可啦

SWC替换babel

• 官方教程swc.rs/docs/usage/…

pnpm add -D @swc/core swc-loader

• 在CRA中替换替换babel，craor.config.js

const {
  getLoader,
  getLoaders,
  removeLoaders,
  loaderByName,
  getPlugin,
  removePlugins,
  addPlugins,
  pluginByName,
  throwUnexpectedConfigError,
  addBeforeLoader,
  addAfterLoader,
} = require("@craco/craco");
const path = require("path");
const resolve = (dirname) => path.resolve(__dirname, dirname);
const swcConfig = require("./swcrc");
const webpack = require("webpack");
​
module.exports = {
  webpack: {
    alias: {
      "@": resolve("src"),
      assets: resolve("src/assets"),
      components: resolve("src/components"),
    },
  },
  typescript: {
    enableTypeChecking: false,
  },
  plugins: [
    {
      plugin: {
        overrideWebpackConfig: ({
          webpackConfig,
          cracoConfig,
          pluginOptions,
          context: { env, paths },
        }) => {
          const needAnalysis = true;
            if (webpackConfig.mode === "development" && needAnalysis) {
              // 耗时插件
              let startTime = 0;
              const progressPlugin = new webpack.ProgressPlugin({
                handler(percentage, message, ...args) {
                  // console.log(percentage, message, args);
                  if (percentage === 1) {
                    const info = `complied spend time: ${+new Date() - startTime}ms`;
                    console.log(`\x1b[38;2;83;167;179m${info}\x1b[0m`);
                  } else if (percentage <= 0.05) {
                    startTime = +new Date();
                  }
                },
              });
              addPlugins(webpackConfig, [progressPlugin]);
            }
            
          // 使用SWC 代替 babel
          // addAfterLoader(webpackConfig, loaderByName("babel-loader"), {
          //   test: /.(js|mjs|jsx|ts|tsx)$/,
          //   exclude: /(node_modules)/,
          //   loader: require.resolve("swc-loader"),
          //   options: swcConfig,
          // });
          // 移除babel
          // removeLoaders(webpackConfig, loaderByName("babel-loader"));
          // 检测
          const { isFound: babelExist } = getLoader(webpackConfig, loaderByName("babel-loader"));
          const { isFound: swcExist } = getLoader(webpackConfig, loaderByName("swc-loader"));
          // console.log("babel exist", babelExist);
          // console.log("swc exist", swcExist);
​
          return webpackConfig;
        },
      },
    },
  ],
};

• 项目根目录创建swcrc.js文件(该文件充当swc的配置，用js只是为了以后方便动态修改)；配置可以直接参考官方文档

module.exports = {
  jsc: {
    parser: {
      syntax: "typescript",
      tsx: true,
      decorators: true,
      dynamicImport: true,
    },
    transform: {
      legacyDecorator: true,
      decoratorMetadata: true,
    },
    target: "es2016",
    keepClassNames: true,
    loose: true,
  },
  module: {
    type: "es6",
  },
  sourceMaps: true,
};

GitHub项目地址：github.com/JYbill/musi…