taro-best-practices

使用 Taro 开发微信小程序、编译 H5 + React Native 的最佳实践

鉴于只开发微信小程序跟实现多端编译需要考虑的点有所不同，将这两部分内容进行了拆分：

• 使用 Taro 开发微信小程序的最佳实践（本页面）
• 使用 Taro 编译小程序 + H5 + React Native 的最佳实践

目录

• 设置路径别名 alias
• 通过环境变量实现 config 的多元控制

设置路径别名 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 访问到