Чего вы ожидали?
Желаем перевести компоненты vue.js в работоспособный и функциональный JS.
Что на самом деле произошло?
Когда я запускаю gulp contacts (показано в разделе «Код и конфигурация» ниже), преобразование выполняется нормально. В терминале не выводятся ошибки, и кажется, что все успешно завершено. Проблема в том, что при перезагрузке страницы в консоли появляется сообщение об ошибке Uncaught SyntaxError: Unexpected end of input. При взгляде на источник devtools показывает что-то вроде этого:
module.exports = function parseHeaders(headers) {
var parsed = {};
var key;
var val;
var i;
if (!headers) { return parsed; }
utils.forEach(headers.split('\n'), function parser(line) {
i = line.indexOf(':');
key = utils.trim(line.substr(0, i)).toLowerCase();
val = utils.trim(line.substr(i + 1));
if (key) {
parsed[key] = parsed[key] ? parsed[key] + ', ' + val : val;
}
});
return parsed;
};
},{"./../utils":26}]
Обычно в исходной части этого файла есть исходная карта, но в этом случае ее нет, так что есть висящая скобка, которая все еще открыта, или что-то в переданном файле. Учитывая природу передачи, невозможно найти синтаксическую ошибку.
Окружающая среда:
Операционная система: MacOS High Sierra v.10.13.5
$ node -v
v9.5.0
$ npm -v
5.6.0
╭─────────────────────────────────────╮
│ │
│ Update available 5.6.0 → 6.1.0 │
│ Run npm i npm to update │
│ │
╰─────────────────────────────────────╯
$ node -p process.version
v9.5.0
$ node -p process.versions
{ http_parser: '2.7.0',
node: '9.5.0',
v8: '6.2.414.46-node.18',
uv: '1.19.1',
zlib: '1.2.11',
ares: '1.13.0',
modules: '59',
nghttp2: '1.29.0',
napi: '2',
openssl: '1.0.2n',
icu: '60.1',
unicode: '10.0',
cldr: '32.0',
tz: '2017c' }
$ node -p process.platform
darwin
$ node -p process.arch
x64
$ node -p "require('node-sass').info"
node-sass 4.9.1 (Wrapper) [JavaScript]
libsass 3.5.4 (Sass Compiler) [C/C++]
$ npm ls --depth=0
app@ /Users/user/projects/app
├── ajv@5.5.2
├── avoriaz@3.6.0
├── axios@0.16.2
├── babel-core@6.26.3
├── babel-plugin-transform-async-to-generator@6.24.1
├── babel-plugin-transform-async-to-module-method@6.24.1
├── babel-plugin-transform-runtime@6.23.0
├── babel-preset-es2015@6.24.1
├── babelify@7.3.0
├── browserify@14.5.0
├── browserify-hmr@0.3.6
├── c3@0.4.23
├── chai@4.1.2
├── cross-env@1.0.8
├── d3@4.13.0
├── envify@3.4.1
├── eonasdan-bootstrap-datetimepicker@4.17.47
├── eslint@4.19.1
├── eslint-config-airbnb@16.1.0
├── eslint-config-airbnb-base@12.1.0
├── eslint-plugin-html@1.7.0
├── eslint-plugin-import@2.13.0
├── eslint-plugin-jsx-a11y@6.1.0
├── eslint-plugin-react@7.10.0
├── glob@7.1.2
├── gulp@3.9.1
├── gulp-google-fonts-base64-css@1.0.4
├── gulp-rename@1.3.0
├── gulp-rev@8.1.1
├── gulp-sass@3.2.1
├── gulp-sourcemaps@2.6.4
├── http-server@0.9.0
├── karma@1.7.1
├── karma-browserify@5.3.0
├── karma-chai@0.1.0
├── karma-chrome-launcher@2.2.0
├── karma-mocha@1.3.0
├── mocha@3.5.3
├── moment@2.22.2
├── npm-run-all@2.3.0
├── qs@6.5.2
├── sinon@2.4.1
├── uglify-js@2.8.29
├── underscore@1.9.1
├── vinyl-source-stream@1.1.2
├── vinyl-transform@1.0.0
├── vue@2.5.16
├── vue-affix@0.2.4
├── vue-bootstrap-datetimepicker@4.1.4
├── vue-pagination-2@0.3.2
├── vue-spinner@1.0.3
├── vue-strap@2.0.2 (github:wffranco/vue-strap#7becab2b3f6e6b7e281afd777c455e3d83fde927)
├── vue-template-compiler@2.5.16
├── vueify@9.4.1
├── vuejs-datepicker@0.9.29
├── watchify@3.11.0
└── webdriver-manager@12.1.0
gulp --v
[15:17:45] CLI version 2.0.1
[15:17:45] Local version 3.9.1
Код и конфигурации:
package.json
{
"name": "project",
"description": "Some project",
"author": "Someone <noone@email.com>",
"private": true,
"scripts": {
"watchify": "watchify -vd -p browserify-hmr -e js/vue-projects/src/main.js -o js/vue-projects/dist/build.js",
"serve": "http-server -o -s -c 1 -a localhost",
"dev": "npm-run-all --parallel watchify serve",
"buildtest": "cross-env NODE_ENV=production browserify -g envify js/vue-mini-apps/test/main.js | uglifyjs -c warnings=false -m > js/vue-mini-apps/dist/test.js",
"builddev": "cross-env browserify -g envify js/vue-mini-apps/materials/app.js | uglifyjs -c warnings=false -m > js/vue-mini-apps/dist/materials.js",
"build": "cross-env NODE_ENV=production browserify -g envify js/vue-mini-apps/materials/app.js | uglifyjs -c warnings=false -m > js/vue-mini-apps/dist/materials.js"
},
"dependencies": {
"ajv": "^5.5.1",
"axios": "^0.16.2",
"eonasdan-bootstrap-datetimepicker": "^4.17.47",
"glob": "^7.1.2",
"gulp-rename": "^1.2.2",
"moment": "^2.19.4",
"underscore": "^1.8.3",
"v-calendar": "^0.5.5",
"vue": "^2.5.9",
"vue-bootstrap-datetimepicker": "^4.1.3",
"vue-pagination-2": "^0.3.2",
"vue-spinner": "^1.0.3",
"vue-strap": "github:wffranco/vue-strap",
"vue-template-compiler": "^2.5.9",
"vueify": "^9.4.1"
},
"devDependencies": {
"avoriaz": "^3.6.0",
"babel-core": "^6.26.0",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-async-to-module-method": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babelify": "^7.2.0",
"browserify": "^14.5.0",
"browserify-hmr": "^0.3.6",
"chai": "^4.1.2",
"cross-env": "^1.0.6",
"envify": "^3.4.1",
"eslint": "^4.13.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-html": "^1.5.3",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.5.1",
"gulp": "^3.9.1",
"gulp-google-fonts-base64-css": "^1.0.4",
"gulp-rev": "^8.1.1",
"gulp-sass": "^3.2.0",
"gulp-sourcemaps": "^2.6.4",
"http-server": "^0.9.0",
"karma": "^1.7.1",
"karma-browserify": "^5.2.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-mocha": "^1.2.0",
"mocha": "^3.5.3",
"npm-run-all": "^2.1.2",
"sinon": "^2.3.8",
"uglify-js": "^2.8.29",
"vinyl-source-stream": "^1.1.2",
"vinyl-transform": "^1.0.0",
"watchify": "^3.11.0",
"webdriver-manager": "^12.0.6"
},
"browserify": {
"transform": [
"vueify",
"babelify"
]
},
"browser": {
"vue": "vue/dist/vue.common.js"
}
}
gulpfile.js:
var gulp = require('gulp');
var browserify = require('browserify');
var vueify = require('vueify');
var transform = require('vinyl-transform');
var source = require('vinyl-source-stream');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var fs = require("fs")
var babelify = require('babelify');
var glob = require('glob');
var rename = require('gulp-rename');
var rev = require('gulp-rev');
gulp.task('contacts', function() {
//determine all files to be compiled
glob('./js/vue-mini-apps/contacts/**/*.app.js', function(err, files) {
if (err) {
gutil.log(gutil.colors.red('Glob error:'),err);
}
//browerify each file
var tasks = files.map(function(entry) {
return browserify(entry, {debug:true})
.transform(babelify, {presets: ['es2015'], plugins: ["transform-runtime", "transform-async-to-generator"]})
.bundle()
.pipe(source(entry))
//determine file name from file path
.pipe(rename('contacts-bundle.js'))
.pipe(gulp.dest('./js/vue-mini-apps/dist'));
});
});
});
Попытки:
Я пробовал:
rm -rf node_modules
npm cache clean
npm install
npm update
Обновление узла и npm до последних версий (это было огромной ошибкой - было введено больше проблем)
Установить debug: false в задачах залпом
Ран npm rebuild node-sass
Дублирование моего коллеги node_modules. Это невозможно в качестве постоянного решения, так как я не могу заставить его установить новый плагин и передать мне архив его node_modules каждый раз, когда мне нужна новая функциональность.
Дублирование известных рабочих package.json и package-lock.json как из производственных систем, так и из двух отдельных сотрудников, работающих над одним и тем же проектом. С известным рабочим пакетом файлов * .json я запустил rm -rf node_modules, npm cache clear --force, npm install и получил те же результаты.
Просмотр страницы «Общие проблемы и их устранение» в соответствии с документацией Gulp
Я исчерпал свои знания, и поиски в Google на этом этапе дают редкие результаты. Чувство поражения становится очень реальным, поэтому любая помощь будет принята с благодарностью!
Похожие вопросы по SO и источникам:
Gulp Browserify SourceMaps
глоток, просмотр, карты?
Gulp Browserify SourceMaps
узел sass выпуск 3.5.3 ломает сборку << этот вариант кажется наиболее близким к моей проблеме </p>
Сгенерированные Gulp исходные карты не работают в Chrome
Gulp Sass с errLogToConsole: true все еще останавливает мои другие задачи наблюдения
Получение: SyntaxError: отсутствует) после списка аргументов, но не может выяснить, что не так с hulpfile.js
https://github.com/gulpjs/gulp/issues/2065 << может быть удаленно связано, хотя и несколько старое сообщение </p>
https://github.com/dlmanning/gulp-sass/wiki/Common-Issues-and-Their-Fixes
ОБНОВЛЕНИЕ
Поддержка npm вернулась ко мне, и после некоторого устранения неполадок мы устранили проблему как с узлом, так и с npm. Скорее всего, это происходит из-за плагина gulp или самого gulp, согласно совету службы поддержки npm.
ОБНОВЛЕНИЕ № 2
Отследил проблему, связанную с Аксиосом. gulp не импортирует содержимое этого модуля должным образом, и в результате JS не переносится полностью. Этот вопрос пошел другим путем. Я отвечу на него, как только будет определено решение для (а) причины этого и (б) того, как мы смогли его решить.