https://github.com/js-newbee/taro-best-practices

使用 Taro 开发微信小程序、编译 H5 + React Native 的最佳实践
https://github.com/js-newbee/taro-best-practices

taro

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/js-newbee/taro-best-practices
• Owner: js-newbee
• Created: 2019-01-15T02:01:48.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-07T12:46:45.000Z (almost 6 years ago)
• Last Synced: 2024-08-01T19:32:31.398Z (4 months ago)
• Topics: taro
• Homepage:
• Size: 14.6 KB
• Stars: 127
• Watchers: 4
• Forks: 8
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-taro - Taro 最佳实践

README

        
# taro-best-practices

使用 [Taro](https://github.com/NervJS/taro) 开发微信小程序、编译 H5 + React Native 的最佳实践

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

* 使用 Taro 开发微信小程序的最佳实践（本页面）

* [使用 Taro 编译小程序 + H5 + React Native 的最佳实践](./multi-platform)

## 目录

* [设置路径别名 alias](#设置路径别名-alias)

* [通过环境变量实现 config 的多元控制](#通过环境变量实现-config-的多元控制)

## 设置路径别名 alias

Taro v1.2.0 版本已支持设置路径别名

``` js

// config/index.js

const path = require('path')

// ...

alias: {

  '@components': path.resolve(__dirname, '..', 'src/components'),

  '@utils': path.resolve(__dirname, '..', 'src/utils')

}

```

但若要在 Sass 中使用别名，如 `@styles` 指向 `src/styles`：

``` sass

@import "@styles/theme.scss";

```

还需要额外的配置（Taro 对样式的处理是 node-sass -> postcss，在 sass 这步就报错了，不能用 postcss-import 插件解决）：

``` js

// 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 加入环境变量

``` js

"scripts": {

  "dev:weapp:mock": "MOCK=1 npm run dev:weapp"

}

```

`MOCK=1` 可以在 config 中通过 `process.env.MOCK` 访问到