npm i和npm update break gulp，browserify build [英] npm i and npm update breaking gulp, browserify builds

查看：110 发布时间：2019/6/8 15:54:55 javascript gulp axios browserify

本文介绍了npm i和npm update break gulp，browserify build的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

您期待发生什么？

将vue.js组件转换为可用且功能齐全的JS。

Gulp to transpile vue.js components into usable and functional JS.

实际发生了什么？

当我运行 gulp contacts （显示在下面的代码和配置部分），转换运行正常。终端没有输出错误，一切似乎都成功完成。问题是，当重新加载页面时，我在控制台中出现错误，指出未捕获的SyntaxError：意外的输入结束。在查看源代码时，devtools会显示以下内容：

When I run gulp contacts (shown under the Code and Configuration section below), the transpiling runs fine. No errors are outputted in the terminal, and everything appears to complete successfully. The problem is, when the page is reloaded I have an error in the console stating Uncaught SyntaxError: Unexpected end of input. When looking at the source, devtools shows something along these lines:

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}]

这个文件的尾端通常有一个源映射，但在这种情况下没有，所以有一个悬空支架仍然打开或在转换文件中。鉴于转换的性质，尝试查找语法错误是不可行的。

There is normally a source map at the tail end of this file but in this case there is none, so there's a dangling bracket that's still open or something in the transpiled file. Given the nature of transpiling, it's unfeasible to try to find the syntax error.

环境：

操作系统：MacOS High Sierra v.10.13.5

Operating System: 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：

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升级到最新版本（这是一个很大的错误 - 引入了更多问题）

Upgrading node and npm to the latest versions (that was a huge mistake -- way more problems were introduced)

设置 debug ：gulp任务中的false

Ran npm rebuild node-sass

复制我的同事的 node_modules 。作为一个永久的解决方案，这是不可行的，因为每次我需要新的功能时，我不能让他安装一个新的插件并空转我的 node_modules 的存档。

Duplicating my coworker's node_modules. This is unfeasible as a permanent solution, as I can't have him install a new plugin and airdrop me an archive of his node_modules every time I need new functionality.

从生产系统和从事同一项目的两个独立同事复制已知的工作包.json和package-lock.json。使用已知的工作包* .json文件，我运行 rm -rf node_modules ， npm cache clear --force ， npm install ，并收到相同的结果。

Duplicating known working package.json and package-lock.json both from production systems and from two separate coworkers working on the same project. With the known working package*.json files, I ran rm -rf node_modules, npm cache clear --force, npm install, and received the same results.

按方式检查常见问题及其修复页面Gulp的文档

Reviewed the Common issues and Their Fixes page as per Gulp's documentation

我已经耗尽了我的知识范围，谷歌搜索在此时返回了稀疏的结果。失败的感觉变得非常真实，所以任何帮助都会非常感激！

I've exhausted the extent of my knowledge, and Google searches are returning sparse results at this point. The feeling of defeat is becoming very real, so any help would be greatly appreciated!

关于SO和来源的类似问题：

Gulp Browserify SourceMaps

gulp，browserify，maps？

Gulp Browserify SourceMaps

node sass release 3.5.3打破构建<<这个似乎最接近我的问题

node sass release 3.5.3 is breaking build << this one seems the closest to my problem

Gulp生成的源地图在Chrome中不起作用

Gulp Sass with errLogToConsole：true仍然停止我的其他监视任务

在参数列表之后获取：SyntaxError：missing）但是找不到hulpfile.js的错误

https://github.com/gulpjs/gulp/issues/2065 <<可能是远程相关的，虽然有些旧帖子

https://github.com/gulpjs/gulp/issues/2065 << might be remotely related, albeit a somewhat old post

https://github.com/dlmanning/gulp-sass/wiki/Common-Issues-and-Their-Fixes

更新

npm支持回复给我，经过一些故障排除后，我们已将节点和npm消除为是问题。根据npm支持人员的建议，这很可能是因为gulp插件或gulp本身。

npm support got back to me and after some troubleshooting, we've eliminated both node and npm as being the issue. This is most likely due to a gulp plugin or gulp itself, per the npm support's advice.

UPDATE＃2

追踪与Axios相关的问题。 gulp没有正确导入该模块的内容，因此JS没有完全转换。这个问题现在采取了不同的路线。一旦确定了解决方案（a）导致这种情况的原因，以及（b）我们如何解决它，我将回答它。

Tracked down the issue to be related to Axios. gulp is not importing the contents of that module properly, and as a result, the JS is not transpiled completely. This question has taken a different route now. I will answer it once a solution has been pinpointed for (a) what's causing this, and (b) how we were able to resolve it.

npm i和npm update break gulp，browserify build [英] npm i and npm update breaking gulp, browserify builds

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

npm i和npm update break gulp，browserify build [英] npm i and npm update breaking gulp, browserify builds

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭