WARNING in XXX.js 7:0-1 export default (imported as $) was not found in jquery

在學習vue的前端工程化之webpack打包時遇到這個問題

目的是：打包js文件中的高級語法。在編寫js的時候，有時候我們會使用高版本的js語法，有可能這些高版本的語法不被兼容，我們需要將之打包爲兼容性的js代碼，爲此需要安裝babel系列的包。

A.下載安裝第三方包：

npm install babel-loader @babel/core @babel/runtime -D
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

B.在項目根目錄創建並配置babel.config.js文件

 module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties", ]
    }

C.配置規則：在webpack.config.js的module中的rules數組中添加下列代碼

module.exports = {
    ...
    module: {
        rules: [
            ...
            {test: /\.js$/, use: "babel-loader", exclude: /node_models/ }
        ]
    }
}

在這一切工作準備好之後，問題就出現了WARNING in XXX "export ‘default’ (imported as ‘$’) was not found in ‘jquery’

原因出在我的JS文件裏有這一行：import $ from ‘jquery’

經參考這個鏈接：添加鏈接描述

在項目的babel.config,js文件中的plugins屬性補充："@babel/plugin-transform-modules-commonjs"，如下：

module.exports = {
    presets: ["@babel/preset-env"],
    plugins: [ "@babel/plugin-transform-runtime",
     "@babel/plugin-proposal-class-properties",
      "@babel/plugin-transform-modules-commonjs" ]
}

問題得到解決啦。