taro初涉：一些小结论

安装及使用：官网

我是基于vue框架学习的所以选择taro-ui-vue组件。

如需使用taro-ui-vue组件，请选择typescript。

一、添加运行环境

1. package.json文件添加以下代码

"scripts": {
    // ...
    "build:h5": "taro build --type h5", // production打包
    "build:test:h5": "taro build --type h5 --env Test", // Test打包，H5测试环境---打包发版（taro build --type ** --env Test）
    "dev:weapp": "npm run build:weapp -- --watch", // development开发调试
    "dev:test:weapp": "npm run build:weapp -- --watch --env Test" // Test开发调试，微信测试环境---本地开发调试（npm run build:*** -- --watch --env Test）
  },

2. config文件夹添加文件：test.js

   module.exports = {
     env: {
       NODE_ENV: '"Test"'
     },
     defineConstants: {
     },
     mini: {},
     h5: {
       /**
        * 如果h5端编译后体积过大，可以使用webpack-bundle-analyzer插件对打包体积进行分析。
        * 参考代码如下：
        * webpackChain (chain) {
        *   chain.plugin('analyzer')
        *     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
        * }
        */
     }
   }
   

3. config/index.js文件中添加如下代码

   module.exports = function (merge) {
     if (process.env.NODE_ENV === 'development') {
       return merge({}, config, require('./dev'))
     } else if (process.env.NODE_ENV === 'Test') { // 测试环境
       return merge({}, config, require('./test')) // 测试环境
     }
     return merge({}, config, require('./prod'))
   }
   

4. 运行：

   npm run build:test:h5 // 打包发布h5测试环境代码
   npm run dev:test:weapp // 本地开发调试微信测试环境
   

5. 页面内通过process.env.NODE_ENV获取环境类型，通过process.env.TARO_ENV获取平台类型

二、H5打包空白问题

config/index.js修改配置：

h5: {
    publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
}

三、本地开发/打包输出代码目录划分

config/index.js修改配置：

const config = {
  outputRoot: `dist/${process.env.TARO_ENV}`,
}