近期尝鲜体会

最近练手做了个单页面项目，用了这样的一个组合：vue v3,TypeScipt,webpack v5,echarts v5,ant-design-vue v2。说说体会。

TypeScript

配置起来不复杂，好处是给JavaScript引入了类型，但是也会给新手造成困扰。原本写着熟练的代码，碰到类型，有时候还得想想类型改怎么写。这里不主张一刀切。根据情况按需各取所需就是了。

对于小项目，TypeScript不够直接，如果没有足够的时间，还是按以前的来；对于大产品，TypeScript再合适不过了，面向接口编程，约束了代码也约束了团队中的人。

对于简单逻辑，TypeScript显得啰嗦；对于复杂逻辑，用TypeScript能避免潜在错误，明确代码耦合点，能提高开发效率。

在Visual Studio Code开发环境中，TypeScript还没充分发挥能力，开发支持偏弱。

v2到v3的变化还是蛮大的，底层实现响应式的方式彻底变了。使用方面组合式API是新宠。然而我不觉得用起来有多大变化或者好处。组件复杂了，乱是必须的。

Vue v3和TypeSciprt的组合也没多大亮点。如果没有规范约束，估计即使用了TypeSciprt，很多人会any到底。

这个UI库第一次用，还特意选了最新的v2.12版本。用着不爽的一个问题是即便全局设置了语言，支持多语言的组件还得单独设置语言。

v4到v5，做了很多改动。原来不少插件才能支持的功能，做成了内置或者默认功能；另外和插件的接口也改动了，不少插件没办法在新版本中使用了；不是很稳，碰到了莫名其妙的问题。下面列举一些。

1 2	terser-webpack-plugin->(webpack.TerserPlugin) clean-webpack-plugin->(output.clean)

1
2
3

autodll-webpack-plugin
hard-source-webpack-plugin
speed-measure-webpack-plugin

cache

这个功能在开发模式下有问题，只是修改样式，重新编译就会出错，这样便失去了它本来要达到缩减编译时间的初衷。

对于vue这类库，如果不用CDN资源，要经过webpack打包，时间消耗非常可观，项目中达到了全程3分中。

1.target不能省略

如果使用postcss添加css浏览器前缀，以依次要依赖autoprefixer、browserslist。可是如果添加了支持的浏览器配置信息，那么webpack-dev-server不再响应修改，自动刷新浏览器了。

尽管webpack.option.target默认是web，但是在这个时候，需要再显示单声明一次：

1	target: "web"

2.echarts5 打包

只存在mode:'production'情况下，一个组件第二次打开后，其中的图表是空的，不报错。

对echarts的v5版本变化，感受不大。