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

Question

我必须在服务器上托管一个 js 文件才能导入任何 html 页面。 为了同样的目的，我们写了一些 React 组件。

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

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

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

Babel-loaders 将 jsx 代码转译为 js

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

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

手动缩小文件和项目缩小文件的区别在于，手动缩小文件引用了 js 编写 React 组件的文件。

.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 文件（用法）

{ "presets": ["@babel/preset-react"] }

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,
  ],
};

这解决了问题