vue打包耗时显示插件安装、遇到插件版本不兼容问题以及解决方案

安装插件

npm i progress-bar-webpack-plugin chalk -d
1

vue.config.js中
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const chalk = require('chalk');
module.exports = {
...
 configureWebpack: {
		plugins:[
			new ProgressBarPlugin({
				format: ' build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
				clear: false
			}),
		]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

遇到问题
npm run build打包的时候，出现问题
const chalk = require('chalk');报Must use import to load ES module, 然后改用import方式又会报cannot use import statement outside a module

问题原因
没有指定版本，默认安装了最新的chalk 5.0版本，此版本属于ES模块(版本5.0是export导出的chalk)，vue.config.js属于commonJs模块，需要require方式引入其他模块，而require引入的必须是module.exports导出的模块（exports、module.exports 和 export、export default到底是咋回事），不兼容所以报错。

解决方法
卸载重新安装版本chalk 4.0版本(版本4.0是module.exports导出的chalk)的就可以了