alibaba / ice

🚀 ice.js: The Progressive App Framework Based On React(基于 React 的渐进式应用框架)
https://ice.work
MIT License
17.96k stars 2.1k forks source link

babel-loader transform 转换时 source的jsx已经被转换为 React.createElement #6293

Closed curry-wxj closed 1 year ago

curry-wxj commented 1 year ago

Describe the bug

babel-loader transform 转换时 source的jsx已经被转换为 React.createElement,这样会导致 babel插件无法监听到 JSXElement节点。 请问脚手架是 在什么时候就已经转换了的。 正常情况下 应该不会是 React.createElement

Expected behavior

image 正常情况下,比如create-react-app babel-loader 中 yield transform(source, options) ,source 是形如 <div className="App" style={{ padding: 20 }}> jsx的语法。 飞冰不应该 在babel-loader 执行 前转换为 React.createElement

Actual behavior

No response

Version of ice.js

"ice-scripts": "^2.0.0"

Content of build.json or ice.config.mts

const path = require('path');
const icePluginDef = require('./ice-plugin-def');
const excel2jsonPlugin = require('./excel2json-plugin');
const icePluginTypeSafe = require('@ali/type-safe/lib/ice-plugin-type-safe.js');

module.exports = {
  entry: 'src/app.ts',
  publicPath: './',
  alias: {
    '@': path.resolve(__dirname, './src'),
  },
  plugins: [
    [
      'ice-plugin-fusion',
      {
        themePackage: [
          {
            name: '@alife/theme-nr-op',
          },
        ],
      },
    ],
    [
      'ice-plugin-moment-locales',
      {
        locales: ['zh-cn'],
      },
    ],
  ],
};

Additional context

image

ClarkXia commented 1 year ago

ice-scripts 内部可能先经过了 ts-loader 的处理

curry-wxj commented 1 year ago

ice-scripts 内部可能先过了 ts-loader 的处理

请问是否可以去掉ts-loader的处理, 或者说 ts-loader的处理在哪里配置的

curry-wxj commented 1 year ago

ice-scripts 内部可能先过了 ts-loader 的处理

请问是否可以去掉ts-loader的处理,或者说ts-loader的处理在哪里配置的

默认 ts-loader配置文件为 configFile: tsconfig.json,仅需要将 tsconfig.json中的compilerOptions.jsx 设置为 preserve,这样设置后,ts-loader会将JSX代码保留为原始的形式,并不会将其转换为React.createElement方法的形式

ClarkXia commented 1 year ago

ice-scripts 目前不再更新 feature,后续推荐直接升级,也可以主动 PR