将转译的“jsx”代码缩小为浏览器可读格式时出现问题

Question

我必须在服务器上托管一个js文件才能导入到任何html页面中。出于相同的目的，我们编写了一些反应组件。

当我们在html中导入未缩小的js文件 ，它工作正常。

但是，当我们使用缩小的js文件时，它不起作用。这意味着，它不会在浏览器中显示任何内容。

我们正在使用 webpack 来捆绑反应组件。 yarn build

Babel 加载器将jsx代码转译为js

我尝试手动转译jsx代码，然后将其缩小。在这种情况下，缩小的文件也可以工作。

但是，当我通过我的项目配置转译它时，它不起作用。

手动缩小文件

和项目缩小文件之间的区别在于，手动缩小的文件具有写入 React 组件的js文件的引用。

.babelrc

{
  "presets": [
    ["latest"],
    "es2015",
    "flow",
    "react",
    "stage-2",
  ],
  "plugins": [
    "syntax-dynamic-import",
  ],
  "env": {
    "production": {
      "plugins": [
        "transform-react-remove-prop-types",
        "transform-react-inline-elements"
      ]
    },
    "development": {
      "plugins": [
        "transform-react-jsx-source"
      ]
    },
    "test": {
      "presets": [
        ["latest"],
        "es2015",
        "flow",
        "react",
        "stage-2",
      ],
      "plugins": [
        "syntax-dynamic-import",
        "transform-react-jsx-source"
      ]
    }
  }
}

webpack.config.js

const path = require('path');
const paths = require('./webpack.paths.js');
const loaders = require('./webpack.loaders.js');
const plugins = require('./webpack.plugins.js');
module.exports = {
  entry: [path.resolve(paths.embed, 'index.js')],
  output: {
    path: paths.productionRoot,
    filename: 'filename.js',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: Object.assign({}, {
      'react': 'preact-compat',
      'react-dom': 'preact-compat',
    }),
  },
  module: {
    loaders: [
      loaders.eslint,
      loaders.iFrameJs,
      loaders.css,
    ],
  },
  plugins: [
    plugins.environmentVariables,
  ],
};

Answer 1

我想是

.babelrc文件配置的问题。你能按照 babeljs 网站上的建议尝试使用 @babel/preset-react 吗？https://babeljs.io/docs/en/babel-preset-react例：

npm install --save-dev @babel/preset-react

.babelrc 文件 (用法(

{ "预设"： ["@babel/预设-反应"] }

Answer 2

我更改了 webpack 配置并删除了以下代码段。

alias: Object.assign({}, {
   'react': 'preact-compat',
   'react-dom': 'preact-compat',
}),

react和preact版本不匹配导致问题。

新的 webpack 配置

module.exports = {
  entry: [path.resolve(paths.embed, 'index.js')],
  output: {
    path: paths.productionRoot,
    filename: 'termly.js',
  },
  resolve: {
    extensions: ['.js'],
  },
  module: {
    loaders: [
      loaders.eslint,
      loaders.js,
      loaders.css,
    ],
  },
  plugins: [
    plugins.environmentVariables,
  ],
};

这解决了问题