Проблема с тем, что webpack неправильно конвертирует es6

Когда я запускаю npm run build в своем каталоге, чтобы собрать все мои файлы в пакет bundle.js, я обнаруживаю эту ошибку: ERROR in ./bundle.js from UglifyJs \n Unexpected token name «key», expected punc «;» [./bundle.js:8141,13].

Итак, я пошел к строке 8141 bundle.js и нашел это: for (let key in val) {

И в этом проблема: let. Uglify не может работать с let и const

Итак, я просмотрел весь файл bundle.js, и ЕДИНСТВЕННОЕ время, когда let появляется буквально прямо здесь, и парой строк ниже, и я точно знаю, из какого пакета исходит этот код: npm install clone-deep

Ни один из других пакетов, которые я использую, не имеет этой проблемы, все они правильно преобразованы из es6 до запуска uglify, и я все время использую let и const в своем собственном коде. Только этот один пакет вызывает у меня проблему.

Вот мой package.json

{
  "name": "jsx2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autobind-decorator": "^2.1.0",
    "axios": "^0.18.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "classnames": "^2.2.5",
    "clone-deep": "^4.0.1",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-toastify": "^4.5.2",
    "webpack": "^3.11.0"
  },
  "scripts": {
    "dev": "webpack -d --watch",
    "build": "webpack -p --config webpack.build.config.js"
  }
}

А вот мой webpack.build.config.js

// https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'out/');
var APP_DIR = path.resolve(__dirname, 'src/');

var config = {
    entry: ['babel-polyfill', APP_DIR + '/App.jsx'],
    output: {
        path: BUILD_DIR,
        filename: './bundle.js'
        //https://cloud.githubusercontent.com/assets/593571/20785959/290f7fbc-b7b4-11e6-9ad2-7dafd7803552.png
        //https://github.com/babel/babel-loader/issues/93
    },

    module : {
        loaders : [
            {
                test : /\.jsx?/,
                include : APP_DIR,
                loader : 'babel-loader',
                options: {
                    "presets" : ["env", "react"],
                    "plugins": ["transform-decorators-legacy"]
                }
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    }
};

module.exports = config;

-- редактировать

Просто чтобы подтвердить, я действительно зашел в клон-глубокий index.js и изменил lets на vars, и все это сработало, и у меня не было ошибок. Я действительно не считаю это решением, потому что... нет причин, по которым этот пакет должен иметь эту ошибку и ничего больше. Но именно этот пакет является источником проблемы.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
302
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Некоторые пакеты npm не имеют версии es5. Мы должны принять это или использовать другие пакеты.

Если вы хотите продолжать использовать clone-deep, вы должны добавить этот пакет в свойство include вашей конфигурации babel-loader:

...
{
    test : /\.jsx?/,
    include : [APP_DIR, path.resolve(__dirname, 'node_modules', 'clone-deep')],
    loader : 'babel-loader',
    options: {
        "presets" : ["env", "react"],
        "plugins": ["transform-decorators-legacy"]
    }
};
...

Вы можете прочитать больше в этом проблема

Спасибо, мой парень, молодец. Я всегда предполагал, что модули узлов компилируются правильно по умолчанию, es6 или нет.

TKoL 30.05.2019 17:35

а теперь у меня новый вопрос! Похоже, файл испещрен потерями «const» здесь и там, как до, так и после того, как Babel обработает файл. Почему babel не может обрабатывать let, но работает с const?

TKoL 30.05.2019 17:40

до того, как вы добавили clone-deep в конфигурацию веб-пакета, Babel не обрабатывал этот пакет. Все const и let должны были остаться в финальном пакете, но похоже, что UglifyJs может справиться с const и let, но не может справиться с let в цикле for

Andrii Golubenko 30.05.2019 20:51

Другие вопросы по теме