vue.config.js配置

avatar
作者
猴君
阅读量:0

  1.transpileDependencies配置项

        "transpile" 是一个合成词,由 "translate"(翻译)和 "compile"(编译)两个词组合而成。

        转义依赖库的意思,将某些依赖库进行语法转换,有些依赖库的语法很超前,对一些浏览器兼容性不好,所以统一将其转义成ES5的低级语法。在前端开发领域,"transpile" 经常用来指代将较新版本的 JavaScript 代码转换为向后兼容的旧版本,以确保代码可以在更广泛的浏览器环境中运行。这通常通过使用类似 Babel 这样的工具实现。

  transpileDependencies: ["view-design/src"],

2.chainWebpack配置项

        "chain"是链子,链式的意思,这个配置项是一个函数,可以在改函数内部多次使用config对象,一次性做很多配置,而无需再重写整个webpack配置对象。

 chainWebpack: config => {     config.plugin("SpriteLoaderPlugin").use(SpriteLoaderPlugin, [       {         plainSprite: true       }     ]);     config.resolve.alias.set(       "@dist/dora",       path.resolve(__dirname, "node_modules/@dist/dora/src/index.js")     );     if (process.env.NODE_ENV === "production") {       config.plugin("CompressionPlugin").use(CompressionPlugin, [         {           filename: "[path].gz[query]",           algorithm: "gzip",           test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),           threshold: 10240,           minRatio: 0.8         }       ]);     }   },

        在里面可以同时做config.plugin插件的添加配置、config.resolve.alias全局别名的添加设置等等;

        其中此处的全局别名设置可以不换主体代码去测试第三方库的代码,例如自己开发的包,上线后进行了压缩混淆,但是先需要排查问题去升级调整自己开发的包,这个时候需要测试问题,就需要将上线前的包接入,此时就可以用这种配置方式去更换全局的引入源,从而做到对代码零侵入。如果接入未打包混淆之前的库,那么除了全局地址更换,还需要考虑语法的兼容适配性,所以需要将包进行转义transpileDependencies。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!