Проблема с минимизацией перенесенного кода `jsx` в читаемый браузером формат - PullRequest
Новая
       27

Проблема с минимизацией перенесенного кода `jsx` в читаемый браузером формат

0 голосов
/ 12 февраля 2019

Я должен разместить файл js на сервере для импорта на любую HTML-страницу.Мы написали некоторые компоненты реакции для той же цели.

Когда мы импортируем неминифицированный файл js в html, он работает нормально.

Но когда мы используемминимизированный js файл, он не работает.Это означает, что в браузере ничего не отображается.

Мы используем webpack для связывания реагирующих компонентов.yarn build

Загрузчики Babel для переноса кода 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,
  ],
};

Ответы [ 2 ]

0 голосов
/ 12 февраля 2019

Я изменил конфигурацию веб-пакета и удалил приведенный ниже фрагмент кода. 

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

Несоответствие версий react и preact вызывало проблему.

Новая конфигурация веб-пакета 

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

Это решило проблему

0 голосов
/ 12 февраля 2019

Мне кажется, проблема в конфигурации файла .babelrc.Не могли бы вы попробовать @ babel / preset-реагировать, как рекомендовано на сайте babeljs?https://babeljs.io/docs/en/babel-preset-react Пример:

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

.babelrc file (Использование)

{"пресеты": ["@ babel / preset-реагировать"]}

...