taro创建项目，环境配置以及打包踩坑记录

2023-10-03 22:13| 来源: 网络整理| 查看: 265

最近，公司要做一个新项目，需要同时适配小程序和h5。显然，针对不同的端去编写两套代码的成本太高，这时候就需要寻找一个能够适配多端的开放式框架，而taro正好满足这一需求，因此我选择了使用taro来创建项目，别看官方文档写的多好，当你进行使用的时候，会发现一堆坑。好了，废话不多说，下面就来看看我一路踩的坑。首先，根据官方文档使用taro init my-app 初始化了一个项目，开发框架我选择的是React，下载好项目之后就进行环境配置， taro脚手架安装

// 使用npm安装 taro install -g @tarojs/cli // 使用yarn安装 yarn global add @tarojs/cli // 使用cnpm安装 cnpm install -g @tarojs/cli

如果需要安装指定版本，只需要在命令后面加@版本号项目初始化

taro init 项目名

在这里插入图片描述以上是我选择的配置，这时候我选择的taro是3.0.2版本的，脚手架创建好了之后就需要进行环境配置了。环境配置在config下面依次添加index.js dev.js test.js pre.js prod.js文件，index.js的配置可以查看官方文档的说明，文档链接https://docs.taro.zone/docs/guide#%E5%A4%9A%E7%AB%AF%E5%BC%80%E5%8F%91，其中修改index.js里面的module.exports为

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')) } else if(process.env.NODE_ENV === 'pre-prod') { return merge({}, config, require('./pre')) } return merge({}, config, require('./prod')) }

然后修改package.json

"scripts": { "build:h5-test": "taro build --type h5 --env test", "build:h5-prod": "taro build --type h5 --env production", "build:h5-pre": "taro build --type h5 --env pre-prod", "build:h5-dev": "taro build --type h5 --env development", "build:weapp-test": "taro build --type weapp --env test", "build:weapp-prod": "taro build --type weapp --env production", "build:weapp-pre": "taro build --type weapp --env pre-prod", "build:weapp-dev": "taro build --type weapp --env development", "dev:weapp": "npm run build:weapp-dev -- --watch", "dev:h5": "npm run build:h5-dev -- --watch" },

接下来还创建了一个分端打包，在config/index.js下面配置

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

由于我们项目中要用到很多小图标，ui之前把图标都放到蓝湖上面，想到到时候页面会很卡，且每次使用一个图标都要去下载，很不方便，于是就让ui把图标都上传到阿里云的iconfont上面，这时我想到使用taro-iconfont-cli包来弄，链接地址：https://github.com/iconfont-cli/taro-iconfont-cli，就是这个，坑特别多。

其它配置可根据自己需要，参考官方文档进行配置，这里我就暂且不多说了。这里我得说一下配置项目中遇到的各种坑。坑一：项目中安装了taro-iconfont-cli之后，编译小程序打包出错，会报一个找不到iconfont的错误，后面找遍全网才发现是因为项目中安装的taro版本和taro-iconfont-cli不兼容的问题，于是把项目升级到了3.0.8这个问题就解决了，问题答案链接https://github.com/iconfont-cli/taro-iconfont-cli/issues/28 坑二：编译test环境打包的时候报错，如下：Failed to compile.

./node_modules/@tarojs/components/dist/esm-es5/loader.mjs 3:11-19 Can’t import the named export ‘a’ from non EcmaScript module (only default export is available) ，后面也是通过搜寻网路找到了原因所在，原因：是因为taro里面有一个变量test和我当前变量test同名导致的问题解决：把test改成Test即可解决 1.修改test.js代码

module.exports = { env: { NODE_ENV: '"Test"' //修改test为Test }, defineConstants: { }, mini: {}, h5: {} }

2.修改index.js

module.exports = function (merge) { console.log(process.env.NODE_ENV) if (process.env.NODE_ENV === 'development') { return merge({}, config, require('./dev')) } else if (process.env.NODE_ENV === 'Test') { //修改test为Test return merge({}, config, require('./test')) } else if (process.env.NODE_ENV === 'pre-prod') { return merge({}, config, require('./pre')) } return merge({}, config, require('./prod')) }

3.修改package.json

"scripts": { "build:h5-test": "taro build --type h5 --env Test", //修改test为Test "build:h5-prod": "taro build --type h5 --env production", "build:h5-pre": "taro build --type h5 --env pre-prod", "build:h5-dev": "taro build --type h5 --env development", "build:weapp-test": "taro build --type weapp --env Test", //修改test为Test "build:weapp-prod": "taro build --type weapp --env production", "build:weapp-pre": "taro build --type weapp --env pre-prod", "build:weapp-dev": "taro build --type weapp --env development", "dev:weapp": "npm run build:weapp-dev -- --watch", "dev:h5": "npm run build:h5-dev -- --watch" },

修改完之后再编译打包如下在这里插入图片描述坑三：taro弹窗滚动穿透问题问题描述：在滑动遮罩层列表的内容滚动时，遮罩层下方的内容也会跟着一起滚动解决方法： h5:通过弹窗的显示状态，来动态设置底层页面最外层View的overflow属性即可。当弹窗显示的时候，设置document.body.style.overflow = ‘hidden’; 当弹窗隐藏的时候，设置document.body.style.overflow = ‘scroll’;

小程序：小程序的官方文档提供了一个catchMove属性可以完美的解决这个问题，但该属性只在taro3.0.21版本以及以上支持，所以我们的项目又升级到了3.0.21，由于页面内容里面的滚动是使用ScrollView来解决的，且ScrollView不支持catchMove属性，所以需要在最外层添加一个View来解决这个问题

//滚动的内容

【本文地址】

公司简介

联系我们