1. 版本：升級版本Taro 1.3.34 至 2.0.4
升級原因：由于項目剛開始時Taro還在1.x時代，后來Taro更新很快，在使用過程中也發(fā)現(xiàn)需要升級Taro版本來減小打包出來的小程序包的大?。ㄎ⑿判〕绦蛳拗疲總€包必須2M以下）。升級到2.x之后的Taro，對于微信小程序的打包使用了webpack，因此可以更方便地安裝各種webpack plugins：比如 webpack-bundle-analyzer 來分析包大小。升級之后的Taro也會修復(fù)更多taro 原生的bug。
參考文章： https://aotu.io/notes/2020/01/08/taro-2-0/index.html，里面介紹了升級之后的優(yōu)勢，以及如何配置webpack plugin。
2. 升級必須的配置修改
加上目錄結(jié)構(gòu)
對于config/index.js文件中的配置，參考上面的文章配置：
- 編譯配置調(diào)整
// 小程序配置從 weapp 改為 mini，可以刪掉很多小配置
-
異步編程調(diào)整
Taro 2.0 中開啟
async functions支持不再需要安裝@tarojs/async-await，而是直接通過 babel 插件來獲得支持。在項目根目錄下安裝包
babel-plugin-transform-runtime和babel-runtime。$ yarn add babel-plugin-transform-runtime --dev $ yarn add babel-runtime隨后修改項目 babel 配置，配置插件
babel-plugin-transform-runtime。babel: { sourceMap: true, presets: [['env', { modules: false }]], plugins: [ 'transform-decorators-legacy', 'transform-class-properties', 'transform-object-rest-spread', ['transform-runtime', { "helpers": false, "polyfill": false, "regenerator": true, "moduleName": 'babel-runtime' }] ] } 添加
webpack-bundle-analyzer（optional）添加減少lodash包的plugin，因為lodash全部引入太大（optional)
減小moment包(optional)
index.js文件如下：
/* eslint-disable */
const path = require('path')
const webpack = require('webpack') //減小moment包的時候用，不然不用加
const env = process.env.NODE_ENV
const settingsPath = `styles/${env}`
const config = {
projectName: 'taro-upgrade',
date: '2021-01-11',
//這里設(shè)置taro屏幕大小，根據(jù)自己的需求，默認的是750；不是必須
designWidth: 375,
deviceRatio: {
'375': 1 / 2,
'640': 2.34 / 2,
'750': 1,
'828': 1.81 / 2
},
//根目錄的別稱；按需，不是必須
alias: {
'@': path.resolve(__dirname, '..', 'src'),
},
sourceRoot: 'src',
outputRoot: 'dist',
babel: {
sourceMap: true,
presets: [
['env', {
modules: false
}]
],
plugins: [
'lodash',
'transform-decorators-legacy',
'transform-class-properties',
'transform-object-rest-spread',
//添加transform-runtime，升級必須
['transform-runtime', {
helpers: false,
polyfill: false,
regenerator: true,
moduleName: 'babel-runtime'
}
]
]
},
defineConstants: {
},
mini: {
//按需引入plugins，不是必須
webpackChain(chain) {
process.env.analyzer && chain.plugin('analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
//lodash減小size的plugin，在通常情況下可以加。但是如果使用了lodash中比較不常用的方法，壓縮尺寸會導(dǎo)致某些方法不能正常工作；的確我們項目后續(xù)有一個bug就是因為這里用了這個插件減小了包，而導(dǎo)致方法報錯。最終這個plugin被移除了。
chain.plugin('LodashModuleReplacementPlugin')
.use(require('lodash-webpack-plugin'), [{
shorthands: true,
cloning: true,
collections: true,
exotics: true,
guards: true,
coercions: true,
paths: true
}])
//減小moment的包
chain.plugin('momentReplacementPlugin')
.use(new webpack.ContextReplacementPlugin(
/moment[\\\/]locale$/,
/^\.\/(zh-cn)$/
),
)
},
postcss: {
autoprefixer: {
enable: true,
config: {
browsers: [
'last 3 versions',
'Android >= 4.1',
'ios >= 8'
]
}
},
pxtransform: {
enable: true,
config: {
}
},
url: {
enable: true,
config: {
limit: 10240 // 設(shè)定轉(zhuǎn)換尺寸上限
}
},
cssModules: {
enable: false, // 默認為 false，如需使用 css modules 功能，則設(shè)為 true
config: {
namingPattern: 'module', // 轉(zhuǎn)換模式，取值為 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
},
imageUrlLoaderOption: {
//4.2中有個bug與這個配置有關(guān)。
},
sassLoaderOption: {
includePaths: [
//由于項目中，不同環(huán)境下部分style不同，所以這里按照環(huán)境load了樣式。
path.resolve(__dirname, '../src/styles'),
path.resolve(__dirname, '../src/', settingsPath)
],
}
},
//該項目是小程序only，所以h5的配置不需要了
}
//這里也是根據(jù)環(huán)境導(dǎo)出不同環(huán)境的配置。
module.exports = function (merge) {
return merge({}, config, require(`./${env}`))
}
3. 測試需要加babel@7的包
Taro-UI 官方引入了babel 7用于UI測試，因為babel-jest需要babel7.x以上版本的支持。
但是，由于Taro本身使用的是babel 6.x，為了不混淆編譯，需要配置babel.config.js 如下：
/* eslint-disable import/no-commonjs */
const apis = require('@tarojs/taro-h5/dist/taroApis')
module.exports = {
presets: [
[
'@babel/env',
{
spec: true,
useBuiltIns: false
}
],
[
'@babel/preset-typescript',
{
isTSX: true,
allExtensions: true,
jsxPragma: 'Nerv.createElement'
}
]
],
plugins: [
['@babel/plugin-proposal-decorators', { 'legacy': true }],
'@babel/plugin-proposal-class-properties',
[
'@babel/plugin-transform-react-jsx',
{
pragma: 'Nerv.createElement'
}
],
['@babel/plugin-proposal-object-rest-spread'],
[
'babel-plugin-transform-taroapi',
{
apis,
packageName: '@tarojs/taro-h5'
}
]
]
}
其它參考：如果用ts-jest編譯jsx會報錯，只能用于簡單的邏輯測試的編譯（純javascript)，這里有UI測試，不能使用 https://github.com/kulshekhar/ts-jest/issues/937
4. 升級之后帶來的bugs，逐一擊破
4.1 有一個組件的樣式不生效
現(xiàn)象：升級之后發(fā)現(xiàn)一個在Taro1.x編譯后有樣式的組件，在新版本下不顯示樣式，查看dist發(fā)現(xiàn)也沒有生成對應(yīng)的.wxss文件，
原因：后來排查原因發(fā)現(xiàn)，這個component的樣式文件componentA.scss被兩個不同的組件直接引用了（import了兩個地方），而查看官方文檔可以發(fā)現(xiàn)
某些組件樣式失效了#
在升級到 2.x 后可能會遇到某些組件的樣式失效了，這是因為 2.x 中默認將所有被超過 1 個文件引用的公共樣式抽離到了common文件中，該文件默認會被app引入，而由于小程序組件默認不能接受公共，所以會導(dǎo)致樣式失效，可以通過為組件配置addGlobalClass來解決，或者也可以通過自己配置 Webpack 禁止抽離公共樣式。
- 解決方法：保證component的樣式不被多個組件重復(fù)調(diào)用。
4.2 TaroCanvasDrawer使用本地圖片畫圖失敗
- 原因：由webpack url-loader轉(zhuǎn)換圖片為base64格式引起
import demoImage from '@/assets/demo.png'
export default class Demo extends component {
state = {
config: {
width: 750,
height: 1000,
images: [
{
x: 0,
y: 0,
width: 375,
height: 1000,
//就是這里出錯了！??！webpack url-loader把這個圖片url變成了base64格式，導(dǎo)致taroCanvasDrawer無法識別這種格式。解決方法是禁用url-loader轉(zhuǎn)換。
url: demoImage
}
]
}
}
render() {
return (
<TaroCanvasDrawer
config={this.state.config}
/>
)
}
}
-
解決方法，在
config/index.js中配置// more code config in mini: {} imageUrlLoaderOption: { limit: 0 },
4.3 -webkit-box-orient: vertical 編譯后被移除
- 原因：autoprefixer的issue： https://github.com/postcss/autoprefixer/issues/1141
根據(jù)上面的issue，解決方法是在樣式中添加注釋：
.demo-box {
display: -webkit-box;
-webkit-line-clamp: 3;
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
overflow: hidden;
}
但是?。。√砑幼⑨尩姆椒?，在npm start之后是可行的，在npm run build之后依舊失效了！??！build
之后還是被移除了。
-
解決方法：不放在scss中，把這個樣式放在inline style里：
return ( <View style={'display': '-webkit-box', '-webkit-line-clamp': '2', '-webkit-box-orient': 'vertical', 'overflow': 'hidden'}> text </View>)
