Я получаю следующую ошибку при запуске сборки npm

Question

{
    "name": "confusion",
    "version": "1.0.0",
    "main": "index.js",
    "dependencies": {
        "bootstrap-social": "^5.1.1",
        "font-awesome": "^4.7.0",
        "jquery": "^3.3.1",
        "lite-server": "^2.4.0",
        "popper.js": "^1.12.9"
    },
    "devDependencies": {
        "cssmin": "^0.4.3",
        "htmlmin": "0.0.7",
        "node-sass": "^4.7.2",
        "onchange": "^3.3.0",
        "parallelshell": "^3.0.2",
        "rimraf": "^2.6.2",
        "uglifyjs": "^2.4.11",
        "usemin-cli": "^0.5.1"
    },
    "scripts": {
        "start": "npm run watch:all",
        "test": "echo \"Error: no test specified\" && exit 1",
        "lite": "lite-server",
        "scss": "node-sass -o css/ css/",
        "watch:scss": "onchange \"css/*.scss\" -- npm run scss",
        "watch:all": "parallelshell \"npm run watch:scss\" \"npm run lite\"",
        "clean": "rimraf dist",
        "copyfonts": "copyfiles -f node_modules/font-awesome/fonts/* dist/fonts",
        "imagemin": "imagemin img/* -o dist/img",
        "usemin": "usemin contactus.html -d dist --htmlmin -o dist/contactus.html && usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html && usemin index.html -d dist --htmlmin -o dist/index.html",
        "build": "npm run clean && npm run imagemin && npm run copyfonts && npm run usemin"
    }
}

C:\Users\username\Documents\coursera\Bootstrap4\conFusion>npm run build

> confusion@1.0.0 build C:\Users\username\Documents\coursera\Bootstrap4\conFusion
> npm run clean && npm run imagemin && npm run copyfonts && npm run usemin

> confusion@1.0.0 clean C:\Users\username\Documents\coursera\Bootstrap4\conFusion
> rimraf dist

> confusion@1.0.0 imagemin C:\Users\username\Documents\coursera\Bootstrap4\conFusion
> imagemin img/* -o dist/img

4 images minified

> confusion@1.0.0 copyfonts C:\Users\username\Documents\coursera\Bootstrap4\conFusion
> copyfiles -f node_modules/font-awesome/fonts/* dist/fonts

> confusion@1.0.0 usemin C:\Users\username\Documents\coursera\Bootstrap4\conFusion
> usemin contactus.html -d dist --htmlmin -o dist/contactus.html && usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html && usemin index.html -d dist --htmlmin -o dist/index.html

undefined:1625
    throw new JS_Parse_Error(message, filename, line, col, pos);
    ^
SyntaxError: Unexpected token: punc ({)
    at JS_Parse_Error.get (eval at <anonymous> (C:\Users\username\Documents\coursera\Bootstrap4\conFusion\node_modules\usemin\node_modules\uglify-js\tools\node.js:27:1), <anonymous>:86:23)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! confusion@1.0.0 usemin: `usemin contactus.html -d dist --htmlmin -o dist/contactus.html && usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html && usemin index.html -d dist --htmlmin -o dist/index.html`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the confusion@1.0.0 usemin script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\username\AppData\Roaming\npm-cache\_logs\2018-09-24T21_38_01_183Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! confusion@1.0.0 build: `npm run clean && npm run imagemin && npm run copyfonts && npm run usemin`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the confusion@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Answer 1

проблема может быть в вашем файле scripts.js, но сначала попробуйте выполнить следующий тест, шаг за шагом.

из вашего package.json ... изменить

"imagemin": "imagemin img/* -o dist/img",

на

"imagemin": "imagemin img/* --out-dir dist/img/",

и измените (добавьте только другой файл * .html, но теперь мы попробуем использовать только один файл * .html)

"usemin": "usemin contactus.html -d dist --htmlmin -o dist/contactus.html",

до

"usemin": "usemin contactus.html -d dist -o dist/contactus.html --htmlmin true",

, если не работает, сохраните изменения и попробуйте

из вашего * .html ... изменения

   <!-- build:js js/main.js -->
   <script src="node_modules/jquery/dist/jquery.min.js"></script>
   <script src="node_modules/tether/dist/js/tether.min.js"></script>
   <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
   <script src="js/scripts.js"></script>
   <!-- endbuild -->

до

   <!-- build:js js/main.js -->
   <script src="node_modules/jquery/dist/jquery.min.js"></script>
   <script src="node_modules/tether/dist/js/tether.min.js"></script>
   <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
   <!-- endbuild -->
   <script src="js/scripts.js"></script>

запустите

npm run usemin

, если увидите папку dist и полный путь к папкам css и js и html-файлам;вывод заключается в том, что вам необходимо проверить синтаксис JavaScript в файле scripts.js.

Answer 2

Следуйте GitHub-странице imagemin, у него есть решение: https://github.com/imagemin/imagemin-cli

Замените "imagemin": "imagemin img/* -o dist/img",

на "imagemin": "imagemin img/* --out-dir=dist/img",

Answer 3

Я делаю тот же курс, и у меня были те же ошибки.Однако я просто смог это исправить.Я сделал это путем переустановки всех dev-зависимостей и использовал текущие версии, а не те, которые были в курсе.Я также изменил команду usemin (согласно сообщению здесь) на

"imagemin": "imagemin img / * --out-dir = dist / img",

Однако этовсе еще не работал, поэтому я проверил все мои файлы на наличие ошибок, используя следующие инструменты:

https://www.freeformatter.com/java-regex-tester.html для тестирования HTML-файлов;http://www.webtoolkitonline.com/javascript-tester.html, для проверки файла .js и https://jsonlint.com/?json=, для проверки файла package.json на наличие ошибок.

После того, как я исправил все файлы, команда «npm run build»наконец-то сработало.(Особенно я забыл проверить файл script.js, куда я только что скопировал код из html-файла, который все еще содержал теги скрипта)

Answer 4

Вы, вероятно, используете синтаксис ES6, но предустановки ES5.

Добавьте зависимость babel-preset-es2015, чтобы исправить это.

А также добавьте 'es2015' в файл .babelrc.

json
{
    "presets": ["es2015"]
}