webpack中使用 async/await 所需的配置

H_xiang_xiang

于 2021-06-24 20:12:24 发布

阅读量908

点赞数

分类专栏：前端文章标签： webpack javascript es6

本文链接：https://blog.youkuaiyun.com/H_xiang_xiang/article/details/118195600

版权

前端专栏收录该内容

29 篇文章

订阅专栏

本文介绍了在webpack中使用async/await的配置步骤，包括如何下载必要的babel依赖，配置.babelrc文件，以及在webpack配置文件中进行相应设置，帮助开发者顺利启用ES6的异步处理功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载所需babel

npm install -D @babel/plugin-transform-runtime
npm install -D @babel/plugin-transform-regenerator

.babelrc配置文件里添加这两个插件

{
    "presets": [
        ["@babel/preset-env", { modules: false }]
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-transform-regenerator"
    ]
}

或者直接在 webpack.config.js 的 module.rules 里配置

{
    test: /\.js$/,
    exclude: /node_modules/, // 要排除
    use: {
        loader: 'babel-loader',
        options: {
            cacheDirectory: true,
            "presets": [
                ["@babel/preset-env", { modules: false }]
            ],
            "plugins": [
                "@babel/plugin-transform-runtime",
                "@babel/plugin-transform-regenerator"
            ],
        }
    }
}

在根目录的 .eslintrc 里配置

{
    "parserOptions": {
        "ecmaVersion": 8
    }
}