如何將 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