问题与缩小文件transpiled`jsx`代码到浏览器可读格式

Question

我必须拥有一个js文件服务器上导入到任何HTML页面。我们已经写了一些反应的组分为了同样的目的。

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

但是，当我们使用缩小的js文件，这是行不通的。这意味着，它不会显示在浏览器中任何东西。

我们使用webpack捆绑的反应的组分。 yarn build

巴贝尔装载机到transpile的jsx代码js

我曾尝试手动transpile的jsx代码，然后再压缩它。在这种情况下，缩小的文件也有效。

但是，当我transpile它通过我的项目配置这是行不通的。

将手动微细化以及项目精缩文件不同的是，手动精缩文件具有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网站推荐给一试？ https://babeljs.io/docs/en/babel-preset-react实施例：

NPM安装--save-dev的@巴别/预设反应

.babelrc文件（用法）

{ “预置”：[ “@巴别/预置反应”]}

Answer 2

我改变了的WebPack配置，除去下面的代码段。

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

该react和preact版本不匹配是造成问题。

New webpack config

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

This solved the issue