[JavaScript知识库]【VUE】关于vue.config.js的小知识（三）

• transpileDependencies

类型：Array<string | RegExp>

默认值：[]

直接上实验效果， vue create hello-world创建一个简单的项目。

为了简单我们直接在node_modules添加一个文件夹.test-transpile，该文件夹下添加一个index.js文件，在里面写一些ES6的语法

module.exports = function transpile () {
    const cc = 1
    console.log('ccc: ' + cc)

    var data = new Set([1,2,3])
    console.log(data)

    var func_transpile = () => {
        console.log('func_transpile')
    }
    func_transpile()
}

在HelloWorld.vue文件中引入并调用transpile()函数

默认情况下babel-loader会忽略node_modules 中的文件，所以上面的代码会保持原状打进了包里，有些浏览器不支持ES6的语法，那么这样的代码就会报错。实验的时候发现Chrome和Firefox是支持的，跑起来没问题，所以我们去IE看下效果。

vue-cli-service serve启动服务，浏览器控制台会报出如下错误

我们去看下打出来的代码

代码并没有转译，IE浏览器不支持ES6语法，所以报错了。

修改配置，将依赖.test-transpile添加进需要转译的配置

module.exports = {
    transpileDependencies: ['.test-transpile']
}

重新启动后再去IE浏览器看效果，成功显示页面，控制台也成功打印出信息

再看看打出来的包的代码

函数func_transpile的箭头转译成了普通的js格式。

所以，如果你想要通过 Babel 显式转译一个依赖，使代码的兼容性更强，对于一些非js格式的包，可以在这个选项中列出来。依赖转译后包一般会比之前大一些。

未完待续。。。。。。

蜗牛速度般的学习，慢牛般的成长^-

更多文章欢迎关注“三横兰”