亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為什么我的 Mutex 類沒有被 Webpack 轉譯?

為什么我的 Mutex 類沒有被 Webpack 轉譯?

白衣非少年 2023-12-14 16:57:25
我在從 Webpack 4 升級到 Webpack 5 時遇到問題,其中 Babel 似乎不再從我的依賴項之一(async-mutex)轉譯代碼。我設法將其精簡為演示問題的最小設置:包.json{    "scripts": {        "build": "webpack --mode=production"    },    "devDependencies": {        "@babel/core": "~7.12.0",        "@babel/preset-env": "~7.12.0",        "async-mutex": "~0.2.0",        "babel-loader": "~8.2.0",        "webpack": "~5.10.0",        "webpack-cli": "~4.2.0"    },    "babel": {        "presets": [            "@babel/preset-env"        ]    },    "browserslist": [        "Explorer >= 11"    ]}webpack.config.jsmodule.exports = {    entry:  {        bundle: './index.js',    },    module: {        rules: [            {                test: /\.m?js$/,                use:  'babel-loader',            },        ],    },};索引.jsimport {Mutex} from 'async-mutex';console.log(Mutex);class MyClass {}console.log(MyClass);根據我的 browserslist,我需要支持 IE 11。構建并檢查結果后,dist/bundle.js我可以看到該類MyClass已轉換為函數,但該類Mutex未轉換,這顯然會導致 IE 11 因語法錯誤而失敗。就好像 Babel 使用不同的設置來處理async-mutex包而不是處理我的index.js.我發現另一個問題的答案建議添加target: ['web', 'es5'],但這沒有幫助,而且似乎也沒有必要,因為 Webpack 應該尊重 browserslist。使用 Webpack 4 我沒有遇到這個問題,但我不確定問題是否出在我的設置、Webpack、Babel 甚至 async-mutex 上。注意:我知道這個最小的設置缺少 Promise polyfill,但我在這里省略它,因為它似乎與問題無關。
查看完整描述

2 回答

?
萬千封印

TA貢獻1891條經驗 獲得超3個贊

Babel 配置package.json僅適用于您的特定包,而不適用于node_modules,因此即使 Babel 設置為處理包中的所有文件,它也僅配置為對您自己的包的文件執行轉換。

您需要創建一個babel.config.json,或者您需要將配置直接放入 Webpack 配置中,所以要么

babel.config.json:

{

? ? "presets": [

? ? ? ? "@babel/preset-env"

? ? ]

}

或者 webpack.config.js:


module.exports = {

? ? entry:? {

? ? ? ? bundle: './index.js',

? ? },

? ? module: {

? ? ? ? rules: [

? ? ? ? ? ? {

? ? ? ? ? ? ? ? test: /\.m?js$/,

? ? ? ? ? ? ? ? use:? 'babel-loader',

? ? ? ? ? ? ? ? options: {

? ? ? ? ? ? ? ? ? ? "presets": [

? ? ? ? ? ? ? ? ? ? ? ? "@babel/preset-env"

? ? ? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ],

? ? },

};


查看完整回答
反對 回復 2023-12-14
?
神不在的星期二

TA貢獻1963條經驗 獲得超6個贊

您需要將 babel 的規則包含async-mutex在您的webpack.config.js模塊中。有時您會遇到一個未轉換其 ES6 的軟件包。有趣的是,將其包含在轉譯中的最佳方法是使用exclude,如下所示:



module.exports = {

    entry:  {

        bundle: './index.js',

    },

    module: {

        rules: [

            {

                test: /\.m?js$/,

                exclude: /node_modules\/(?!(async-mutex)\/).*/,

                use:  'babel-loader',

            },

        ],

    },

};

此排除規則表示“排除除”node_modules之外的所有內容async-mutex。


查看完整回答
反對 回復 2023-12-14
  • 2 回答
  • 0 關注
  • 227 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號