如何将 async..await 编译为 es5？

Question

I want to compile async..wait to es5, but when a folder include a package.json, it can't be compiled! why? I search for this many times by google, but it is failed，how to do it,? Looking forward to your reply！ thank you for help!

Directory Structure enter image description here

.babelrc

{
  "presets": [
    [ "@babel/preset-env" ],
    [ "@babel/preset-react"]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", { "corejs": 3}],
    "transform-class-properties",
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true}, "antd"]
  ]
}

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

function resolve(dir) {
  return path.resolve(__dirname, '..', dir)
}
module.exports = {
  mode: 'production',
  entry: './src/pdfjs-dist1/build/pdf.js', // compiled, no package.json
  // entry: './src/pdfjs-dist2/build/pdf.js', // NO compiled, include package.json
  output: {
    path: resolve('./dist'), // 打包后的文件存放的地方
    filename: 'js/[name].[chunkhash:8].js',
    chunkFilename: 'js/[name].[chunkhash:8].js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        use: [
          'babel-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ // 根据模板插入css/js等生成最终HTML
      filename: './index.html', // 生成的html存放路径，相对于 path
      template: './public/index.html', // html模板路径
      hash: true, // 为静态资源生成hash值
      minify: { // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
      },
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 8000,
      cacheGroups: {
        common: {
          test: /[\\/]src[\\/](utils|components)/,
          name: 'common', // todo: 区分 component / utils
        },
      },
    },
  },
}

pdf.js

const ap = () => {
  console.log('test async')
}

const aa = async () => {
  await ap()
}

aa()

package.json

{}

remark

"webpack": "^5.1.0",
"@babel/runtime-corejs3": "^7.14.7",
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.14.7",

Answer 1

.babelrc config files only affect the files in the specific package containing the config, meaning that the sub-packages will be unaffected. You'll want to use a babel.config.js . https://babeljs.io/docs/en/config-files#project-wide-configuration