Как я могу отладить эту проблему с транспиляцией в веб-пакете? Исчезает, если я установил сворачивание на ложь - PullRequest
0 голосов
/ 17 апреля 2019

Я занимаюсь разработкой приложения django с интерфейсомactjs, который использует веб-пакет для горячей подачи javascript во время разработки. Версии в значительной степени все последние:

  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@babel/polyfill": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "ajv": "^6.10.0",
    "auto-bind": "^1.2.1",
    "babel-loader": "^8.0.5",
    "bluebird": "^3.5.1",
    "chai": "^4.2.0",
    "chai-as-promised": "^7.1.1",
    "chart.js": "^2.8.0",
    "css-loader": "^2.1.1",
    "d3": "^5.9.2",
    "deep-equal": "^1.0.1",
    "enzyme": "^3.9.0",
    "file-loader": "^3.0.1",
    "fusioncharts": "^3.13.4",
    "history": "^4.9.0",
    "immutability-helper": "^2.9.1",
    "jquery": "^3.3.1",
    "jquery.cookie": "^1.4.1",
    "js-yaml": "^3.13.0",
    "jsdom": "^14.0.0",
    "lodash": "^4.17.11",
    "mocha": "^4.1.0",
    "moment": "^2.24.0",
    "query-string": "^5.1.1",
    "react": "^16.8.5",
    "react-addons-update": "^15.6.2",
    "react-bootstrap": "^0.31.5",
    "react-codemirror": "^1.0.0",
    "react-dom": "^16.8.5",
    "react-dropzone": "^4.3.0",
    "react-fusioncharts": "^1.0.5",
    "react-hot-loader": "^3.1.3",
    "react-input-autosize": "^2.2.1",
    "react-numeric-input": "^2.2.3",
    "react-popper": "^0.8.3",
    "react-redux": "^6.0.1",
    "react-router-dom": "^4.3.1",
    "react-select": "^2.4.2",
    "react-sortable-hoc": "^1.8.3",
    "react-table": "^6.9.2",
    "react-tooltip": "^3.10.0",
    "reconnecting-websocket": "^4.1.10",
    "redux": "^3.7.2",
    "redux-form": "^8.1.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "select2": "^4.0.6-rc.1",
    "style-loader": "^0.23.1",
    "sunburst-chart": "^1.3.1",
    "url-loader": "^1.1.2",
    "uuid": "^3.3.2",
    "webpack": "^4.29.6",
    "webpack-bundle-tracker": "^0.3.0",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  }

Во время разработки с запущенным горячим сервером все работает как положено. Если я переключаюсь в производственный режим и использую файл main.js, который создается без предупреждений или ошибок, в браузере происходит сбой кода с «Uncaught SyntaxError: Unexpected token (» в этой области main.js:

    "function"!=typeof Object.assign&&(Object.assign=function(e){"use strict";var t,n,r,o;if(null==e)throw new TypeError("Cannot convert undefined or null to object");for(t
/*! dontAppend && */a.canvas&&a.canvas.appendChild(t),o.node=o[0]=t,t.raphael=!0,t.raphaelid=o.id=e._oid++,o.matrix=e.matrix(),o.realPath=null,o.attrs=o.attrs||{},o.fol
/** !
 * @license FusionCharts JavaScript Library
 * Copyright FusionCharts Technologies LLP
 * License Information at <http://www.fusioncharts.com/license>
 */
var r={name:"default",theme:{base:{chart:{labelDisplay:"stagger !important",caption:"Theme Caption \\!important",canvasBgColor:"#56EF22",borderThickness:"5 !important",
/** !
 * @license FusionCharts JavaScript Library
 * Copyright FusionCharts Technologies LLP
 * License Information at <http://www.fusioncharts.com/license>
 *
 * @version //? write(JSON.parse(require('fs').readFileSync('./package.json')).version);
 */
function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.

"функция" выглядит странно. Для отладки я отключил минимизацию в конфиге веб-пакета, но при этом ошибка исчезает, и результирующий (довольно большой) файл main.js работает нормально.

Любая помощь о том, как отладить проблему дальше (или решить ее), высоко ценится. Полные конфигурации производства и разработки следующие:

base.js:

const path = require("path");

module.exports = {
  context: __dirname,
  entry: '../assets/js/main',

  output: {
      path: path.resolve('./assets/bundles/'),
      filename: "main.js"},

  plugins: [],

  module: {
    rules: [
      {
        test: /\.js(|x)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'}},
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']},
      {
        test: /\.(ttf|eot|svg|otf|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: ['file-loader']
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: ['url-loader']
      }]},

  resolve: {
    modules: ['assets/js', 'node_modules'],
    extensions: ['.js', '.jsx']
  },
  devServer: {
    contentBase: '../assets/bundles/',
    hot: true,
    headers: {
            'Access-Control-Allow-Origin': '*'}}};

local.js (работает нормально):

const webpack = require('webpack');
const BundleTracker = require('webpack-bundle-tracker');

const config = require('./base.js');

// Use webpack dev server
config.mode = 'development';
config.entry = [
  'webpack-dev-server/client?http://localhost:3000',
  'webpack/hot/only-dev-server',
  '../assets/js/main'];

// override django's STATIC_URL for webpack bundles
config.output.publicPath = 'http://localhost:3000/assets/bundles/';

// Add HotModuleReplacementPlugin and BundleTracker plugins
config.plugins = config.plugins.concat([
  new webpack.HotModuleReplacementPlugin(),
  //new webpack.NoErrorsPlugin(),
  new BundleTracker({filename: './webpack-stats.json'})]);

module.exports = config;

production.js (не работает):

const webpack = require('webpack');
const BundleTracker = require('webpack-bundle-tracker');

const config = require('./base.js');

config.mode = 'production';
config.plugins = config.plugins.concat([
  new BundleTracker({filename: './webpack-stats-prod.json'}),

  // removes a lot of debugging code in React
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('production')
  }}),

  // keeps hashes consistent between compilations
  new webpack.optimize.OccurrenceOrderPlugin()
]);

module.exports = config;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...