Vuejs项目不改动一行代码同时支持用Rollup,vue-cli,parcel构建的一些建议

1,380 阅读3分钟

1,html模板中组件标签的使用

正确:

<my-component></my-component>

错误

<MyComponent/> 1
<my-component/> 2
<MyComponent></MyComponent> 3

为什么?

  • 1和2在parcel中会导致后面的元素被忽略;
  • 3不能带来更好的语法提示,出错几率更高;
  • 正确的做法可以支持3大构建工具,可以带来更好的智能提示,不易出错,尤其作为局部组件使用时;

2, style标签内引入外部样式的方式

正确

@import url("../assets/less/vars.less");

错误

@import "~@/assets/less.vars.less"; 1
@import "../assets/less/vars.less"; 2
@import url("~@/assets/less.vars.less"); 3

为什么?

使用css原生语法和相对引入可以带来更好的夸构建工具兼容性和编辑器更好的智能提示;如果采用错误的做法,估计只有vue-cli可以完美支持;

3,请不要使用全局样式变量

为什么?

  • vue-cli可以通过style-resources-loader轻松实现全局样式变量引入,实际上Rollup也有插件支持,我并没有做测试,可靠性未知,而parcel没有找到这样的解决方案;
  • 全局变量不利于跟踪变量的来源,不利于编辑器实现智能提示;

4,请不要使用commonjs规范,请使用es6模块规范

为什么?

Rollup似乎对commonjs规范支持的不好,请用import代替require

5,请谨慎使用绝对路径别名 {'@': 'src'},建议使用相对引入

为什么?

  • parcel似乎对@符号别名支持有问题
  • 相对引入可以使编辑器带来更好的智能提示,不易出错

6, 请不要使用异步函数

为什么?

  • parcel和Rollup需要babel插件支持,而Vue-cli已经开箱即用
  • 使用后,会使项目构建体积增加约15kb
  • 请使用承诺代替

7,请谨慎使用展开运算符

为什么?

  • 使用在对象和数组上,会导致vue-cli和parcel构建包体积额外增加约30kb(数组和对象各约15kb)
  • Rollup + buble 不会导致体积额外增加,但是对类数组对象处理有一点差异,类数组对象会被当作真正的数组来处理,转化为数组的concat方法调用;所以我们如果真的想用展开运算符,请把类数组对象转化为真正的数组(Array.prototype.slice.call(arrayLike))后再应用展开运算符;

8,自定义环境变量请以VUE_APP_开头

为什么?

vue-cli的强制要求!否则你的项目将无法夸构建工具

9,请不要使用vue-cli的mode配置多环境

为什么?

  • vue-cli的mode仅支持vue-cli
  • 请使用cross-env或者env-cmd等工具配置多环境,可以实现3者通用

10,导入Vue文件请带.vue扩展名

为什么?

  • 凡是不加扩展名,Rollup会自动添加.js扩展名,导致模块找不到

如果你这么做了,你的项目几乎不需改一行代码,便可轻松用3大工具构建;你也许对3大工具构建出的包体积和编译后代码风格感兴趣,这也许对你有用;希望对大家有所帮助,感谢阅读!