taro 的项目结构_使用Taro开发项目总结

为啥使用Taro

个人又比较喜欢 React，Taro 的社区活跃度和版本迭代速度可喜，所以毫无意外选择了 Taro。

Taro 起步

所以闲话少叙，我们说回 Taro……

Taro 的开发体个人又比较喜欢 React，Taro 的社区活跃度和版本迭代速度可喜，所以毫无意外选择了 Taro。你有过 React 的开发经验，可以毫无困难地顺滑上手；如果没有，直接看 Taro 的官方文档 来入门也是没有问题的。

从安装到建立一个新项目使用——

$ npm install -g @tarojs/cli

$ taro init myApp

$ cd myApp

$ npm install

# 开发

$ npm run dev:weapp

# 编译

$ npm run build:weapp

复制代码复制代码

这里的开发和编译指令中的weapp

换成h5

/swan

/alipay

/tt

/rn

后，即可在对应的其他端编译运行。多端的代码逻辑可以不同，详情请看跨平台开发。

项目结构

官方有一篇基于 Redux 的项目最佳实践文章：《Taro深度开发实践》。

官方推荐的项目结构——

├── config 配置目录

| ├── dev.js 开发时配置

| ├── index.js 默认配置

| └── prod.js 打包时配置

├── src 源码目录

| ├── components 公共组件目录

| ├── pages 页面文件目录

| | ├── index index 页面目录

| | | ├── banner 页面 index 私有组件

| | | ├── index.js index 页面逻辑

| | | └── index.css index 页面样式

| ├── utils 公共方法库

| ├── app.css 项目总通用样式

| └── app.js 项目入口文件

└── package.json

复制代码复制代码

我在项目中并没有用到 Redux / MobX，项目「发展壮大」后的结构也比较简单明了——

├── dist 编译结果目录

├── config 配置目录

| ├── dev.js 开发时配置

| ├── index.js 默认配置

| └── prod.js 打包时配置

├── src 源码目录

| ├── assets 公共资源目录(内含图标等资源)

| ├── components 公共组件目录

| | └── Btn 公共组件 Btn 目录

| | ├── Btn.js 公共组件 Btn 逻辑

| | └── Btn.scss 公共组件 Btn 样式

| ├── pages 页面文件目录

| | └── index index 页面目录

| | ├── components index 页面的独有组件目录

| | | └── Banner index 页面的 Banner 组件目录

| | | ├── Banner.js index 页面的 Banner 组件逻辑

| | | └── Banner.scss index 页面的 Banner 组件样式

| | ├── index.js index 页面逻辑

| | └── index.scss index 页面样式

| ├── subpackages 分包目录(项目过大时建议分包)

| | └── profile 一个叫 profile 的分包目录

| | └── pages 该分包的页面文件目录

| | └── index 该分包的页面 index 目录(其下结构与主包的页面文件一致)

| ├── utils 项目辅助类 工具 目录

| | └── api.js 比如辅助类 api 等

| ├── app.css 项目总通用样式

| └── app.js 项目入口文件

└── package.json

复制代码复制代码

什……这也叫「简单明了」吗？ (ﾟдﾟ≡ﾟдﾟ)

这是我个人比较喜欢的组织方式。我的项目已经不算小了，总计近 30 个页面，使用上面这种方式维护，确实感觉还挺省心舒服的。当然你也可以按照你的喜好组织文件～

编译配置文件

编译配置存放于项目根目录下config

目录中，包含三个文件

index.js

dev.js

prod.js

下面说一些使用案例和某些坑的解决方案——

路径别名

在项目中不断import

相对路径的后果就是，不能方便直观地明白目录结构；如果要迁移改动一个目录，IDE 又没有很准确的重构功能的话，需要手动更改每一个import

的路径，非常难受。

所以我们想把：

import A from '../../componnets/A'

复制代码复制代码

变成

import A from '@/componnets/A'

复制代码复制代码

这种引用。

方式如下：

/* config/index.js */

const path = require('path')

alias: {

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

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

},

复制代码复制代码

在代码中判断环境

/* config/dev.js */

env: {

NODE_ENV: '"development"', // JSON.stringify('development')

},

复制代码复制代码

/* config/prod.js */

env: {

NODE_ENV: '"production"', // JSON.stringify('development')

},

复制代码复制代码<