fix: incorrect babel preset/plugin order cause error

vzt7 commented 2 years ago

Types of changes

[ ] New feature
[x] Bug fix
[ ] Documentation change
[ ] Coding style change
[ ] Refactoring
[ ] Performance improvement
[ ] Test cases
[ ] Continuous integration
[ ] Typescript definition change
[ ] Breaking change

Background and context

A project with @arco-plugins/webpack-react causes babel-plugin-transform-react-jsx invalid.

Create a ArcoPro project (select CRA) and a normal CRA project to verify the case:

remove the unnecessary imports ( CRA has supported the new JSX transform )
```
// import React from 'react';
```
the ArcoPro project causes an error ReferenceError: React is not defined

the original babel/preset-react options: { runtime: 'automatic' } but got the options: { runtime: 'classic' }.

the CRA project works fine

Solution

if (babelLoaderIndex > -1) {
-  insertIndex = babelLoaderIndex + 1;
+  insertIndex = babelLoaderIndex;
} else if (tsLoaderIndex > -1) {
  insertIndex = (tsLoaderIndex || 1) - 1;
}

Makes the injected loader after the babel-loader.

How is the change tested?

see ## Background and context

Changelog

Changelog(CN)	Changelog(EN)	Related issues
修复 babel-loader 注入顺序导致 babel 预设配置被覆盖的问题	Fix the issue that the babel-loader injection order causes the babel presets' options to be covered	--------------

Checklist:

[x] Provide changelog for relevant changes (e.g. bug fixes and new features) if applicable.
[x] Changes are submitted to the appropriate branch (e.g. features should be submitted to feature branch and others should be submitted to master branch)

Other information

whyour commented 2 years ago

可以使用babelConfig参数，增加你的配置，虽然readme没写。你这么改应该会把插件的loader覆盖了

whyour commented 2 years ago

是不是应该直接把内置的babel presets改下？以满足tsx组件没引入react的情况

vzt7 commented 2 years ago

是不是应该直接把内置的babel presets改下？以满足tsx组件没引入react的情况

为什么默认覆盖项目配置呢？我理解应该是项目配置优先。目前插件引用 babel/preset-react babel/preset-typescript 两个预设，都会覆盖项目原有的 babel 预设配置，不止 jsx transform 。

whyour commented 2 years ago

是不是应该直接把内置的babel presets改下？以满足tsx组件没引入react的情况

为什么默认覆盖项目配置呢？我理解应该是项目配置优先。目前插件引用 babel/preset-react babel/preset-typescript 两个预设，都会覆盖项目原有的 babel 预设配置，不止 jsx transform 。

首先我不知道加这两个默认预设的作用，但是如果插件是需要这两个预设，然后以项目为准，那我理解你就不需要这个插件，自己用 babel-import-plugin 应该就可以了，这个插件的作用就是给你加这个babel配置，你还要以你的为准，这配置能生效吗？而且提供了api让你加自定义babel配置的，这难道不合理吗？

vzt7 commented 2 years ago

是不是应该直接把内置的babel presets改下？以满足tsx组件没引入react的情况

为什么默认覆盖项目配置呢？我理解应该是项目配置优先。目前插件引用 babel/preset-react babel/preset-typescript 两个预设，都会覆盖项目原有的 babel 预设配置，不止 jsx transform 。

首先我不知道加这两个默认预设的作用，但是如果插件是需要这两个预设，然后以项目为准，那我理解你就不需要这个插件，自己用 babel-import-plugin 应该就可以了，这个插件的作用就是给你加这个babel配置，你还要以你的为准，这配置能生效吗？而且提供了api让你加自定义babel配置的，这难道不合理吗？

意思是我项目里配置了预设引入这个插件后直接失效了，还得在这个插件再传一遍配置？另外如果顺序在项目配置之后则可以兜底项目没有配置这两个预设的情况。如果你意思让用户侧自己去接入或者手动再传一遍配置那确实也没问题，其余的我觉得没有必要再讨论了

whyour commented 2 years ago

是不是应该直接把内置的babel presets改下？以满足tsx组件没引入react的情况

为什么默认覆盖项目配置呢？我理解应该是项目配置优先。目前插件引用 babel/preset-react babel/preset-typescript 两个预设，都会覆盖项目原有的 babel 预设配置，不止 jsx transform 。

首先我不知道加这两个默认预设的作用，但是如果插件是需要这两个预设，然后以项目为准，那我理解你就不需要这个插件，自己用 babel-import-plugin 应该就可以了，这个插件的作用就是给你加这个babel配置，你还要以你的为准，这配置能生效吗？而且提供了api让你加自定义babel配置的，这难道不合理吗？

意思是我项目里配置了预设引入这个插件后直接失效了，还得在这个插件再传一遍配置？另外如果顺序在项目配置之后则可以兜底项目没有配置这两个预设的情况。如果你意思让用户侧自己去接入或者手动再传一遍配置那确实也没问题，其余的我觉得没有必要再讨论了

目前的逻辑肯定是需要你把原有的babel配置放到这个插件那，但是这块可能是需要个合并的操作，而不是谁前谁后吧。应该取下项目loader的配置合并进去就行了，只不过要考虑优先级的问题

arco-design / arco-plugins