{"id":13603906,"url":"https://github.com/js-newbee/taro-best-practices","last_synced_at":"2026-02-26T02:46:11.931Z","repository":{"id":118924944,"uuid":"165767267","full_name":"js-newbee/taro-best-practices","owner":"js-newbee","description":"使用 Taro 开发微信小程序、编译 H5 + React Native 的最佳实践","archived":false,"fork":false,"pushed_at":"2019-03-07T12:46:45.000Z","size":15,"stargazers_count":129,"open_issues_count":2,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-11T13:32:49.134Z","etag":null,"topics":["taro"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/js-newbee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-01-15T02:01:48.000Z","updated_at":"2025-05-17T03:37:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"c53ff0e7-5a05-4572-8827-97077d9600c5","html_url":"https://github.com/js-newbee/taro-best-practices","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/js-newbee/taro-best-practices","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-newbee%2Ftaro-best-practices","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-newbee%2Ftaro-best-practices/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-newbee%2Ftaro-best-practices/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-newbee%2Ftaro-best-practices/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/js-newbee","download_url":"https://codeload.github.com/js-newbee/taro-best-practices/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-newbee%2Ftaro-best-practices/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29848634,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T22:37:40.667Z","status":"online","status_checked_at":"2026-02-26T02:00:06.774Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["taro"],"created_at":"2024-08-01T19:00:36.225Z","updated_at":"2026-02-26T02:46:11.913Z","avatar_url":"https://github.com/js-newbee.png","language":null,"funding_links":[],"categories":["开发技巧"],"sub_categories":[],"readme":"# taro-best-practices\n\n使用 [Taro](https://github.com/NervJS/taro) 开发微信小程序、编译 H5 + React Native 的最佳实践\n\n鉴于只开发微信小程序跟实现多端编译需要考虑的点有所不同，将这两部分内容进行了拆分：\n\n* 使用 Taro 开发微信小程序的最佳实践（本页面）\n* [使用 Taro 编译小程序 + H5 + React Native 的最佳实践](./multi-platform)\n\n## 目录\n\n* [设置路径别名 alias](#设置路径别名-alias)\n* [通过环境变量实现 config 的多元控制](#通过环境变量实现-config-的多元控制)\n\n## 设置路径别名 alias\n\nTaro v1.2.0 版本已支持设置路径别名\n\n``` js\n// config/index.js\nconst path = require('path')\n// ...\nalias: {\n  '@components': path.resolve(__dirname, '..', 'src/components'),\n  '@utils': path.resolve(__dirname, '..', 'src/utils')\n}\n```\n\n但若要在 Sass 中使用别名，如 `@styles` 指向 `src/styles`：\n\n``` sass\n@import \"@styles/theme.scss\";\n```\n\n还需要额外的配置（Taro 对样式的处理是 node-sass -\u003e postcss，在 sass 这步就报错了，不能用 postcss-import 插件解决）：\n\n``` js\n// config/index.js\nplugins: {\n  sass: {\n    importer: function(url) {\n      const reg = /^@styles\\/(.*)/\n      return {\n        file: reg.test(url) ? path.resolve(__dirname, '..', 'src/styles', url.match(reg)[1]) : url\n      }\n    }\n  }\n}\n```\n\n备注：目前资源引用时仍无法使用别名，如 `background: url('@assets/logo.png')`，解决中\n\n\n## 通过环境变量实现 config 的多元控制\n\n通过 `npm run dev`、`npm run build` 等命令可以区分 config，如果在某环境下还需要实现进一步区分，可以在 package.json 中的 scripts 加入环境变量\n\n``` js\n\"scripts\": {\n  \"dev:weapp:mock\": \"MOCK=1 npm run dev:weapp\"\n}\n```\n\n`MOCK=1` 可以在 config 中通过 `process.env.MOCK` 访问到\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-newbee%2Ftaro-best-practices","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjs-newbee%2Ftaro-best-practices","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-newbee%2Ftaro-best-practices/lists"}