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

Question

我想编译async..wait到es5，但是当一个文件夹包含一个package.json时，就编译不出来了！ 为什么？ 我用google搜索了很多次，但都失败了，怎么办？ 期待您的回复！谢谢您的帮助！

目录结构在此处输入图像描述

.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()

包.json

{}

评论

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

Answer 1

.babelrc配置文件只影响包含配置的特定包中的文件，这意味着子包将不受影响。 你会想要使用babel.config.js 。 https://babeljs.io/docs/en/config-files#project-wide-configuration