vue2项目中配置transpileDependencies
时间: 2024-01-05 07:20:15 浏览: 82
在Vue2项目中,可以通过配置transpileDependencies来指定需要进行babel转译的依赖包。这样可以确保这些依赖包中的ES6+语法也能被转译成ES5语法,以保证在低版本浏览器中的兼容性。
在vue.config.js文件中,可以使用chainWebpack来配置transpileDependencies。具体的配置步骤如下:
1. 打开vue.config.js文件。
2. 在module.exports中添加chainWebpack配置项。
3. 在chainWebpack中使用config.module.rule('js')来获取js相关的rule。
4. 在rule中使用rule.exclude.add(/node_modules/)来排除node_modules目录下的文件。
5. 在rule中使用rule.exclude.add(/(vant|other-lib)/)来排除需要转译的依赖包。
6. 最后使用rule.use('babel-loader')来添加babel-loader。
下面是一个示例的vue.config.js文件的配置:
```javascript
module.exports = {
chainWebpack: config => {
config.module
.rule('js')
.exclude
.add(/node_modules/)
.end()
.exclude
.add(/(vant|other-lib)/)
.end()
.use('babel-loader')
.loader('babel-loader')
.end()
}
}
```
这样配置之后,指定的依赖包将会被babel转译,以确保在低版本浏览器中的兼容性。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)