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" ]
}

问题得到解决啦。