qiniu / builder

Apache License 2.0
34 stars 33 forks source link

修复对 class-properties 语法支持的问题 #145

Closed nighca closed 3 years ago

nighca commented 3 years ago

在 #143 中我们调整了对于 ts / tsx,compiler options 中 target 的取值:

此外把 target 设置为 ESNext,代替原来的 ES2020,是因为 ESNext 更贴合这边想要的:

最新的规范能力

这个变更导致 builder 对 class-properties 的语法支持出现问题;问题详情如下:

ERROR in ./src/components/Hub/Config/Sections/StorageExpiryDays.tsx
Module build failed (from ../../builder/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/nighca/code/rmb-web/portal-pili/src/components/Hub/Config/Sections/StorageExpiryDays.tsx: Support for the experimental syntax 'classProperties' isn't currently enabled (34:13):

  32 | })(LoadingAction || (LoadingAction = {}));
  33 | let LocalStore = class LocalStore extends Store {
> 34 |     hubStore;
     |             ^
  35 |     hubApis;
  36 |     loadings = Loadings.collectFrom(this);
  37 |     state = createState(this.hubInfo.expiryDays);

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-class-properties (https://git.io/vb4yQ) to the 'plugins' section to enable parsing.
    at Object._raise (/Users/nighca/code/builder/node_modules/@babel/parser/lib/index.js:790:17)
    at Object.raiseWithData (/Users/nighca/code/builder/node_modules/@babel/parser/lib/index.js:783:17)
    at Object.expectPlugin (/Users/nighca/code/builder/node_modules/@babel/parser/lib/index.js:9100:18)
    at Object.parseClassProperty (/Users/nighca/code/builder/node_modules/@babel/parser/lib/index.js:12688:12)
    at Object.pushClassProperty (/Users/nighca/code/builder/node_modules/@babel/parser/lib/index.js:12656:30)
    at Object.parseClassMemberWithIsStatic (/Users/nighca/code/builder/node_modules/@babel/parser/lib/index.js:12561:14)
    at Object.parseClassMember (/Users/nighca/code/builder/node_modules/@babel/parser/lib/index.js:12498:10)
    at /Users/nighca/code/builder/node_modules/@babel/parser/lib/index.js:12443:14
    at Object.withTopicForbiddingContext (/Users/nighca/code/builder/node_modules/@babel/parser/lib/index.js:11479:14)
    at Object.parseClassBody (/Users/nighca/code/builder/node_modules/@babel/parser/lib/index.js:12420:10)
 @ ./src/components/Hub/Config/index.tsx 12:0-61 44:41-58
 @ ./src/components/Hub/index.tsx 13:0-33 78:42-51
 @ ./src/components/App/index.tsx 25:0-25 56:42-45
 @ ./src/index.tsx 15:0-33 19:50-53

因此这里将 target 重新设置回 ES2020;注意这里也可以通过升级 babel & @babel/preset-env(v7.14.0)来解决这个问题,只是升级本身可能造成的影响比较大;此外长期来看还是可能有别的类似的 Typescript & babel 实现间存在 gap 的情况,如代码中的注释所述:

这里设置为 ES2020(最新的规范能力),需要注意的是,这里设置 ESNext 可能是不合适的:

The special ESNext value refers to the highest version your version of TypeScript supports. This setting should be used with caution, since it doesn’t mean the same thing between different TypeScript versions and can make upgrades less predictable. https://www.typescriptlang.org/tsconfig#target

这里 Typescript 处理的结果会交给 babel 处理;我们默认使用 @babel/preset-env,预期会支持最新的规范能力 然而我们使用的 Typescript 跟 babel (& @babel/preset-env) 行为之间可能会有 gap: 以 babel-plugin-proposal-class-properties 为例,在对应的 proposal 进入 stage 4 后, Typescript 会认为以 ESNext 为目标时,对应的语法不再需要转换; 而如果 builder 此时依赖了相对更新的 Typescript 版本,以及相对较旧的 babel (& @babel/preset-env) 版本 那么这里对 class properties 语法的支持就会有问题(Typescript & babel 都不会对它进行转换)

此外,这里将 repset-configs/react 中关于 babel @babel/plugin-proposal-decorators & @babel/plugin-proposal-class-properties 的配置干掉,主要是避免夹带私货:react 项目依赖这两个 plugin 的特定行为并不是什么约定俗成的做法或者社区最佳实践

注意:这个是一个 breaking change,但对于目前几乎全部正在使用并打算升级 builder 的项目来说应该不是问题,因此放到这里调整

nighca commented 3 years ago

附,这里有最新的 proposal stage 状态