2.0.0 beta 版本测试通告（当前测试版本 2.0.0-beta.13，正式版2.0.1）

[luckyadam]

大家好~ Taro 1.x 版本自去年 9 月份发布以来，已经陪伴大家度过了一年多的时间，在此期间 Taro 一直保持高速成长，发布了多个具有重大意义的版本，让 Taro 成为如今一个功能尚算完善，拥有众多忠实拥趸的多端统一开发框架。

尽管 Taro 一直保持超高的迭代速度，Taro 的整体架构设计没有发生太大变化，这让 Taro 在这个时刻在变化的时代稍显佛系，且对于一个时刻想要突破自己的技术团队来说，常规性质的维护工作，显然无法安抚我们躁动的心，所以我们决定启动一系列的颠覆式重构设计。

我们从 CLI 开始入手进行改造，大家都知道，原来 Taro CLI 的小程序构建系统是自研的，整个构建系统逻辑复杂，要考虑的边际条件众多，这就导致了以下问题：

• 维护困难，每次需要新增一个功能，例如支持解析 JSON 文件，就需要直接改动 CLI，不够灵活
• 难以共建，CLI 的代码非常复杂，而且逻辑分支众多，让很多想要一起共建的人难以入手
• 可扩展性偏低，自研的构建系统，设计之初没有考虑到后续的扩展性，导致开发者想要添加自定义的功能无从下手

基于以上问题，我们决定使用 webpack 来实现小程序端的构建，于是诞生了 2.0，目前我们发布了 beta 测试版本。

相较于旧的构建系统，新的小程序编译带来了以下优势：

• 利于维护，大量的逻辑交由 webpack 来处理，我们只需要维护一些插件
• 更加稳定，相较于自研的构建系统，新的构建会更加稳定，降低一些奇怪错误的出现概率
• 可扩展性强，可以通过自行加入 webpack loader 与 plugin 的方式做自己想要的扩展

可以看到新的构建系统会有很大的进步。

欢迎大家进行尝试，目前可以直接使用 2.0.0-beta.13 版本进行尝鲜，遇到任何问题，请在此 issue 下进行回复，我们会一一解决。

需要注意的是，2.0 版本与 1.0 版本在项目编译配置上做了重大的改变，如果是旧项目升级，需要按照编译配置文档进行调整。

Taro CLI 改造只是一个开始，正如前文所提到的，我们将启动一系列的重构设计，甚至整个 Taro 的设计思想都将发生变化。希望大家能持续关注 Taro 后续的动态，我们将持续为大家带来更好用的解决方案。

---

升级方法示例

1. 更新Taro cli版本，以下两种方式都可以。
   • 在package.json中加上 "@tarojs/cli": "2.0.0-beta.13"，这样做的好处是全局的Taro版本还是1.3.xx的稳定版本
   • 更新全局Taro版本 npm install -g @tarojs/cli@2.0.0-beta.13
2. 在package.json将Taro版本都改为最新的beta版本，删除@tarojs/async-await
3. 新增 @tarojs/mini-runner、babel-plugin-transform-runtime"依赖，从app删除@tarojs/async-await
4. 重新安装依赖。
5. 根据编译配置文档来改进配置，比如weapp改为mini。

---

config/index.js配置示例

非最终版本，仅为代码实践版本 @shenghanqin 从 2.0.0 beta.0 到 beta.13 迭代中形成的配置，其中的 TODO 注释是要注意修改的。其他的可以根据自己项目进行添加。

const config = {
projectName: 'taro-framework',
date: '2019-11-2',
designWidth: 750,
deviceRatio: {
640: 2.34 / 2,
750: 1,
828: 1.81 / 2
},
sourceRoot: 'src',
outputRoot: 'dist',
// TODO 特别要修改babel的配置
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'
}]
]
},
// TODO 将JSON.stringify()去掉
defineConstants: {
'process.env.SERVER_ENV': JSON.stringify(process.env.SERVER_ENV),
},
// TODO 小程序名称改为mini，可以删掉很多小配置
mini: {
postcss: {
pxtransform: {
enable: true,
config: {

    }
  },
  url: {
    enable: true,
    config: {
      limit: 10240 // 设定转换尺寸上限
    }
  },
  cssModules: {
    enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
    config: {
      namingPattern: 'module', // 转换模式，取值为 global/module
      generateScopedName: '[name]__[local]___[hash:base64:5]'
    }
  }
}

}, // 可以删掉很多小配置 h5: { publicPath: '/', staticDirectory: 'static', postcss: { autoprefixer: { enable: true, config: { browsers: [ 'last 3 versions', 'Android >= 4.1', 'ios >= 8' ] } }, cssModules: { enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true config: { namingPattern: 'module', // 转换模式，取值为 global/module generateScopedName: '[name]__[local]___[hash:base64:5]' } } } } }

module.exports = function (merge) { if (process.env.NODE_ENV === 'development') { return merge({}, config, require('./dev')) } return merge({}, config, require('./prod')) }

[masteroy]

强烈支持

[qwIvan]

有新特性吗

[zhuxianguo]

支持

[qianxiaowu0520]

666

[tourze]

期待！

[fred8617]

能不能把babel升到7+啊

[BoringDays]

ts版本也升一下？

[shenghanqin]

@luckyadam 2.0.0 beta的bug也是正常走issue呗？

[rsnzh]

多端组件方案编译出错了

[luckyadam]

多端组件方案编译出错了

收到~ 我看下

[shenghanqin]

经过简单测试，发现2个小问题

• async-await 模块有问题
• 基于Taro做的npm包可能会有问题（待测试）

[david2tdw]

希望能重点关注下window系统热重载随机报错的问题，虽然可能是微信开发者工具的问题，但如果你们有什么解决办法呢。。。

[hylarucoder]

升级之后, 即便是 使用了 async-await 模块, 依然会报 regeneratorRuntime

[shenghanqin]

升级之后, 即便是 使用了 async-await 模块, 依然会报 regeneratorRuntime

Me too.

[luckyadam]

升级之后, 即便是 使用了 async-await 模块, 依然会报 regeneratorRuntime

经过测试，2.0 版本不能用旧的方式来支持 async-await 了，新的使用方式如下：

在项目中分别安装 babel-plugin-transform-runtime 和 babel-runtime 两个包

$ yarn add babel-plugin-transform-runtime --dev
$ yarn add babel-runtime

然后在项目 config/index.js 的 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'
    }]
  ]
}

不需要再引入 async-await 模块

[hylarucoder]

@luckyadam 老李666

[tourze]

在项目中分别安装 babel-plugin-transform-runtim

有个疑惑，这种方式兼容多端的吗？

[luckyadam]

在项目中分别安装 babel-plugin-transform-runtim

有个疑惑，这种方式兼容多端的吗？

支持，你可以试试

[zhuxianguo]

用2.0.0-beta.3的cli初始化一个项目，编译成小程序时报如下错误

[luckyadam]

用2.0.0-beta.3的cli初始化一个项目，编译成小程序时报如下错误

2.0.0 beta 的模板还没有更新，可以按照要求修改一个旧项目试试

[shenghanqin]

@luckyadam defineConstants会多出说引号！！！！！

defineConstants

用来配置一些全局变量供代码中进行使用，例如：

defineConstants: {
A: '"a"' // JSON.stringify('a')
}

defineConstants: {
  'process.env.SERVER_ENV': JSON.stringify(process.env.SERVER_ENV),
},

console.log('env', process.env.SERVER_ENV)
//  输出：process.env.SERVER_ENV "yz"

[xiaoxintang]

2.0.0.beta.4 微信小程序云开发模板hook写法页面配置navigationBarTitleText无效（不知道其他配置是否也是无效）

[donniean]

2.0.0.beta.4 微信小程序云开发模板hook写法页面配置navigationBarTitleText无效（不知道其他配置是否也是无效）

其他配置也是无效的

[luckyadam]

2.0.0.beta.4 微信小程序云开发模板hook写法页面配置navigationBarTitleText无效（不知道其他配置是否也是无效）

其他配置也是无效的

我看看

[luckyadam]

用2.0.0-beta.3的cli初始化一个项目，编译成小程序时报如下错误

最新版本已修复

[huangciyin]

支持 happypack 吗? 我试了一下, 报错: Module build failed (from ./node_modules/happypack/loader.js): TypeError: Cannot read property 'miniType' of undefined

[huangciyin]

问题: 目前是单个 vendors 放在主包,导致主包体积偏大(某子包内公用的部分可提取到该子包内部), 是否有拆分vendors到子包的方案?

原因: 目前的做法是根据 MiniPlugin 的 commonChunks 配置在 app.js上注入 require(xxx) 代码, 这种做法比较难以拆分 vendors 到子包, 要改 mini-runner 的代码,主要是注入require 那部分.

解决方案(思路): 提供某种方式, 由开发者决定在某些页面构建后添加自定义 require 代码. 例如配置/注释.

我们目前的做法: 写了一个脚本, taro 构建完成后做一下 patch, 在子包的页面上加上该包的 vendors 依赖.

[luckyadam]

问题: 目前是单个 vendors 放在主包,导致主包体积偏大(某子包内公用的部分可提取到该子包内部), 是否有拆分vendors到子包的方案?

原因: 目前的做法是根据 MiniPlugin 的 commonChunks 配置在 app.js上注入 require(xxx) 代码, 这种做法比较难以拆分 vendors 到子包, 要改 mini-runner 的代码,主要是注入require 那部分.

解决方案(思路): 提供某种方式, 由开发者决定在某些页面构建后添加自定义 require 代码. 例如配置/注释.

我们目前的做法: 写了一个脚本, taro 构建完成后做一下 patch, 在子包的页面上加上该包的 vendors 依赖.

可以把 commonChunks 配置放出来，然后自己配一下 webpackChain 自定义 webpack 配置

[Jeepeng]

2.0.0.beta.6 微信小程序，Hooks写法，通过 MyHookComponent.config = {...} 配置无效

[luckyadam]

2.0.0.beta.6 微信小程序，Hooks写法，通过 MyHookComponent.config = {...} 配置无效

可以升级到 2.0.0-beta.7 试试

[rexerwang]

版本：2.0.0-beta.8 在使用Decorator情况下： 若采用export default class Index写法：

@inject('appStore')
@observer
export default class Index extends Component {}

会报错：Uncaught ReferenceError: Index is not defined！

若改写为，则正常：

@inject('appStore')
@observer
class Index extends Component {}
export default Index

[shenghanqin]

版本：2.0.0-beta.8 在使用Decorator情况下： 若采用export default class Index写法：

@inject('appStore')
@observer
export default class Index extends Component {}

会报错：Uncaught ReferenceError: Index is not defined！

若改写为，则正常：

@inject('appStore')
@observer
class Index extends Component {}
export default Index

装饰器如此，那不用装饰器的普通component是正常的呗？ 建议你提一个issue。

[lzw1996-2020]

编译成小程序出错

[Garfield550]

@modtwuji 麻烦单独提出一个 issue。

wxml 确实是 Webpack 不支持的文件类型，后续版本会修复。

[luvletterldl]

编译成H5就报这个错，微信小程序没有问题，很让人匪夷所思 TS

[luckyadam]

编译成H5就报这个错，微信小程序没有问题，很让人匪夷所思 TS

麻烦按照 issue 里要求调整编译配置

[zjb19970804]

Maximum call stack size exceeded

[tommytroylin]

设置 babel-runtime 的 "helpers": true 会导致运行时报错

这里的 r 实际是 __webpack_require__

如果设置为 false 的话，babel 会在每个文件中注入helper 代码，大约会增大 5% 的体积

[xn330125]

2.0版本把js抽离成vender，然后在app.js里面引用，但是我们的taro项目只是小程序里面的一个子包，app.js好像不会执行。然后即使在pages/index/index文件里面引用vender，其他的组件引入都找不到，似乎组件的注册比页面执行还早

[giantss]

请问一下, 2.0x 后是不是可以灵活使用别的第三方UI啊, 比如antd

[shenghanqin]

请问一下, 2.0x 后是不是可以灵活使用别的第三方UI啊, 比如antd

Taro小程序项目还是h5的呢？小程序那边，估计玄乎。其实可以这么想，taro目前是基于nervjs的，等可以使用react啦，再用antd，会更方便吧

[giantss]

好的 谢谢 @shenghanqin

[zhangfu-git]

async await 已经修改了配置，微信小程序调试工具报的错误 如何更好的定位到底是哪里错误？

[mayocream]

async await 已经修改了配置，微信小程序调试工具报的错误 如何更好的定位到底是哪里错误？

同样的报错

[licanbluesea]

多端组件方案编译出错了 组件是可以按照当前环境的，但是方法不可以。（2.0.0-beta.10）

[Nodewebzsz]

升级到2.0.0-beta.10，babel-plugin-transform-runtime和babel-runtime都已安装，config文件也按照文档配置，编译是成功的，但是在开发者工具中打开还是报regeneratorRuntime is not defined

[shenghanqin]

@Nodewebzsz app.js不需要再引入 async-await 模块。你得仔细看看上面的所有评论哟

[Nodewebzsz]

@Nodewebzsz app.js不需要再引入 async-await 模块。你得仔细看看上面的所有评论哟

也去掉了async-await

[luckyadam]

@Nodewebzsz app.js不需要再引入 async-await 模块。你得仔细看看上面的所有评论哟

也去掉了async-await

请提供一个 demo 看下

[Nodewebzsz]

@Nodewebzsz app.js不需要再引入 async-await 模块。你得仔细看看上面的所有评论哟

也去掉了async-await

请提供一个 demo 看

@Nodewebzsz app.js不需要再引入 async-await 模块。你得仔细看看上面的所有评论哟

也去掉了async-await

请提供一个 demo 看下

https://github.com/Nodewebzsz/test.git 感谢