返回

多种 Taro 项目打包目录探究

前端

众所周知，Taro项目可以生成RN、H5和各种平台小程序，打包的命令位于package.json文件的scripts节点中，如下所示。

"scripts": {
  "build": "taro build",
  "build:h5": "taro build --type h5",
  "build:weapp": "taro build --type weapp",
  "build:alipay": "taro build --type alipay",
  "build:swan": "taro build --type swan",
  "build:tt": "taro build --type tt",
  "build:quickapp": "taro build --type quickapp"
}

当我们执行打包命令就可以生成不同平台的资源文件：

rn：build/rn
h5：build/h5
weapp：build/weapp
alipay：build/alipay
swan：build/swan
tt：build/tt
quickapp：build/quickapp

不过，使用上面 Taro 的打包命令生成的资源文件是分散在不同的目录中的，这给我们的项目管理带来了不便。因此，我们需要一种方法将这些资源文件生成到一个统一的目录中。

1. 使用build命令生成统一入口

Taro 提供了build命令来生成统一入口，使用方法如下：

taro build --type weapp --entry src/app.js

上面命令将会把生成的小程序资源文件生成到一个统一的目录中，目录名为dist/weapp。

2. 使用npm run命令生成统一入口

我们还可以使用npm run命令来生成统一入口，使用方法如下：

npm run build:weapp -- --entry src/app.js

上面命令将会把生成的小程序资源文件生成到一个统一的目录中，目录名为dist/weapp。

3. 使用scripts命令生成统一入口

我们还可以使用scripts命令来生成统一入口，使用方法如下：

"scripts": {
  "build:weapp": "taro build --type weapp --entry src/app.js"
}

上面命令将会把生成的小程序资源文件生成到一个统一的目录中，目录名为dist/weapp。

4. Taro项目打包目录结构

Taro项目打包后，不同平台的资源文件分别生成在不同的目录中。

rn：build/rn
h5：build/h5
weapp：build/weapp
alipay：build/alipay
swan：build/swan
tt：build/tt
quickapp：build/quickapp

每个目录中都包含了该平台所需要的资源文件。例如，rn目录中包含了RN项目所需的资源文件，h5目录中包含了H5项目所需的资源文件，weapp目录中包含了微信小程序所需的资源文件，alipay目录中包含了支付宝小程序所需的资源文件，swan目录中包含了百度小程序所需的资源文件，tt目录中包含了今日头条小程序所需的资源文件，quickapp目录中包含了快应用所需的资源文件。

5. 不同平台的生成目录

不同平台的生成目录如下：

  • RN：build/rn
  • H5：build/h5
  • 微信小程序：build/weapp
  • 支付宝小程序：build/alipay
  • 百度小程序：build/swan
  • 今日头条小程序：build/tt
  • 快应用：build/quickapp

6. 小结

Taro项目打包后，不同平台的资源文件分别生成在不同的目录中。我们可以使用build命令、npm run命令或scripts命令来生成统一入口。 Taro项目打包目录结构如下图所示：

taro
  ├── build
    ├── rn
      ├── index.js
      ├── index.css
      ├── index.html
    ├── h5
      ├── index.js
      ├── index.css
      ├── index.html
    ├── weapp
      ├── app.js
      ├── app.json
      ├── pages
        ├── index
          ├── index.js
          ├── index.wxml
          ├── index.wxss
    ├── alipay
      ├── app.js
      ├── app.json
      ├── pages
        ├── index
          ├── index.js
          ├── index.axml
          ├── index.acss
    ├── swan
      ├── app.js
      ├── app.json
      ├── pages
        ├── index
          ├── index.js
          ├── index.swan
          ├── index.css
    ├── tt
      ├── app.js
      ├── app.json
      ├── pages
        ├── index
          ├── index.js
          ├── index.ttml
          ├── index.css
    ├── quickapp
      ├── app.js
      ├── app.json
      ├── pages
        ├── index
          ├── index.js
          ├── index.ux