序言
Taro的项目配置结合了小程序和webpack进行整合，可以选择React或者Vue进行开发，这里分享几个非常实用的配置，有助于提高开发效率
1. @tarojs/plugin-html插件
支持在Taro项目中使用HTML标签进行组件开发，最主要的一个优势，可以保留开发浏览器页面的习惯，使用<div>来替代<view>。不过有一点需要注意，这个插件会把<span>标签也最终渲染成<view>，原因是小程序里的<Text>标签只能内部嵌套<Text>，如果把<span>标签替换成<Text>则<span>的内部就只能嵌套<span>、<i>、<b>这些行内元素，影响开发体验
js
{
plugins: [
'@tarojs/plugin-html'
],
}2. mini.postcss.cssModules.enable
这个属性值默认是false，如果想使用css的module功能，则需要手动将值设置成true，然后css类的名字就会根据设置的generateScopedName自动生成，默认是[name]__[local]___[hash:base64:5]，后面5位是基于base64生成的随机hash值
js
{
mini: {
postcss: {
cssModules: {
enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
namingPattern: 'module', // 转换模式，取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
}
}3. designWidth的高级用法
designWidth用来设置设计稿的尺寸，常见的值有750、640、375等，Taro默认会对所有单位进行转换(行内样式需要使用Taro.pxTransform()才能转换)。但是如果遇到比较复杂的情况，比如项目的设计稿是375px，而引入的组件库的标准尺寸是750px该怎么处理？比如后面一篇文章会提到的第三方组件库Taroify，它的设计稿尺寸就是750px
这个时候就可以用函数的形式设置designWidth
js
{
designWidth: (input) => {
// 第三方组件库的设计尺寸是750px
if (input.file?.replace(/\\+/g, '/').indexOf('@taroify') > -1) {
return 750;
}
// 项目设计稿的标准尺寸375px
return 375;
},
// px->rpx的单位换算规则
deviceRatio: {
640: 2.34 / 2,
750: 1,
828: 1.81 / 2,
375: 2 / 1
},
}4. @tarojs/plugin-http插件
小程序有一套自己的原生网络请求体系，可以通过Taro.request(option)进行使用，但是为了符合之前的开发习惯，可以通过@tarojs/plugin-http这个插件对axios实例进行封装，方便把之前在浏览器开发项目中封装好的axios配置直接拿过来用，配置请求拦截器、响应拦截器等等
js
{
plugins: ['@tarojs/plugin-http'],
}不过由于真实的执行环境还是在小程序，就会受到部分限制：
- 暂不支持上传，且插件默认会将全局
FormData、Blob对象替换成undefined（仅针对小程序环境）
另外由于这个插件比较新，对Taro的版本有要求
- 需搭配 taro 主包 3.6.0 及其以上版本使用
- webpack4 用户需升级插件版本为
3.6.6及其以上
后续还会慢慢补充
上述的几个配置基本可以满足平时的开发需求，而且尽可能让大家的开发习惯保持一致，就像开发浏览器页面一样开发小程序，降低了学习成本。如果大家有很推荐的配置也欢迎在评论区分享出来~
按照之前的规划，后面会陆续分享：
- Taro组件库推荐
- Taro自定义组件
- Taro引入第三方工具库的注意问题
- Taro的跨端编译原理
- Taro自定义插件（实战）