Проблема с webpack, который не конвертирует es6 должным образом

Question

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

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

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

Так что я просмотрел весь файл bundle.js, и ТОЛЬКО время, которое появляется, буквально прямо здесь, и пара строк вниз, и я знаю конкретноиз какого пакета поступил этот код: 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;

-- edit

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

Answer 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"]
    }
};
...

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