Когда я запускаю 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, и все это сработало, и у меня не было ошибок. Я действительно не считаю это решением, потому что... нет причин, по которым этот пакет должен иметь эту ошибку и ничего больше. Но именно этот пакет является источником проблемы.
Некоторые пакеты 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"]
}
};
...
Вы можете прочитать больше в этом проблема
а теперь у меня новый вопрос! Похоже, файл испещрен потерями «const» здесь и там, как до, так и после того, как Babel обработает файл. Почему babel не может обрабатывать let, но работает с const?
до того, как вы добавили clone-deep
в конфигурацию веб-пакета, Babel не обрабатывал этот пакет. Все const
и let
должны были остаться в финальном пакете, но похоже, что UglifyJs
может справиться с const
и let
, но не может справиться с let
в цикле for
Спасибо, мой парень, молодец. Я всегда предполагал, что модули узлов компилируются правильно по умолчанию, es6 или нет.