0


transpileDependencies与babel编译顺序释义

如果transpileDependencies为true或为正则,

接着看package.json里的browserslist是否处在低级浏览器范围,

如果处在低级浏览器范围内,那么会把node_modules里用得到的高级语法进行babel编译

如果transpileDependencies为false,则会把node_modules里用到的高级语法原封不动的打包(无视browserslist范围),会造成在低级浏览器访问报错的情况

总结;transpileDependencies为false,则原封不动的打包进bundle,否则,根据browserslist情况决定是否需要打polyfill

babel.config.js配置如下,此配置同样适用于vue-cli5.08

注意要把modules: false这句加上,否则在编译低级浏览器并打包后,访问时会报找不到module.exports

  1. 参考地址 https://babeljs.io/docs/en/babel-preset-env
  2. npm install --save-dev @babel/preset-env
  3. module.exports = {
  4. presets: [
  5. [
  6. "@babel/preset-env",
  7. {
  8. modules: false,
  9. useBuiltIns: "usage",
  10. corejs: "3.22",
  11. },
  12. ],
  13. ],
  14. plugins: [],
  15. }

vue-cli5.08对应的默认包

  1. 数组表达方法
  2. transpileDependencies: [
  3. /[/\\]node_modules[/\\](.+?)?element-ui(.*)[/\\]src/,
  4. /[/\\]node_modules[/\\](.+?)?element-ui(.*)[/\\]package/,
  5. /[/\\]node_modules[/\\](.+?)?f-render(.*)/,
  6. /[/\\]node_modules[/\\](.+?)?quill-image-drop-module(.*)/,
  7. /[/\\]node_modules[/\\](.+?)?vue-ele-form(.*)/,
  8. /[/\\]node_modules[/\\](.+?)?vue-ele-form-bmap(.*)/,
  9. /[/\\]node_modules[/\\](.+?)?vue-baidu-map(.*)/,
  10. /[/\\]node_modules[/\\](.+?)?vue-ele-upload-image(.*)/,
  11. /[/\\]node_modules[/\\]test[/\\]/,
  12. /[/\\]node_modules[/\\][@\\]test2[/\\]test3[/\\]/
  13. ],

本文转载自: https://blog.csdn.net/aexwx/article/details/126754379
版权归原作者 大猫会长 所有, 如有侵权,请联系我们删除。

“transpileDependencies与babel编译顺序释义”的评论:

还没有评论