taro-best-practices
使用 Taro 开发微信小程序、编译 H5 + React Native 的最佳实践
鉴于只开发微信小程序跟实现多端编译需要考虑的点有所不同，将这两部分内容进行了拆分：
- 使用 Taro 开发微信小程序的最佳实践（本页面）
- 使用 Taro 编译小程序 + H5 + React Native 的最佳实践
目录
设置路径别名 alias
Taro v1.2.0 版本已支持设置路径别名
// config/index.js
const path = require('path')
// ...
alias: {
'@components': path.resolve(__dirname, '..', 'src/components'),
'@utils': path.resolve(__dirname, '..', 'src/utils')
}但若要在 Sass 中使用别名，如 @styles 指向 src/styles：
@import "@styles/theme.scss";还需要额外的配置（Taro 对样式的处理是 node-sass -> postcss，在 sass 这步就报错了，不能用 postcss-import 插件解决）：
// config/index.js
plugins: {
sass: {
importer: function(url) {
const reg = /^@styles\/(.*)/
return {
file: reg.test(url) ? path.resolve(__dirname, '..', 'src/styles', url.match(reg)[1]) : url
}
}
}
}备注：目前资源引用时仍无法使用别名，如 background: url('@assets/logo.png')，解决中
通过环境变量实现 config 的多元控制
通过 npm run dev、npm run build 等命令可以区分 config，如果在某环境下还需要实现进一步区分，可以在 package.json 中的 scripts 加入环境变量
"scripts": {
"dev:weapp:mock": "MOCK=1 npm run dev:weapp"
}MOCK=1 可以在 config 中通过 process.env.MOCK 访问到