javascript - npm i 和 npm update breaking gulp，browserify 构建

Question

您期望发生什么？

Gulp 将 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

代码和配置:

包.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 节点模块
npm 缓存清理
npm 安装


• npm 更新

• 将 node 和 npm 升级到最新版本(这是一个巨大的错误——引入了更多问题)

• 在 gulp 任务中设置 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, maps?

Gulp Browserify SourceMaps

node sass release 3.5.3 is breaking build <<这个似乎最接近我的问题

Gulp-generated source maps don't work in Chrome

Gulp Sass with errLogToConsole: true still stopping my other watch tasks

Getting: SyntaxError: missing ) after argument list but can't find out whats wrong with hulpfile.js

https://github.com/gulpjs/gulp/issues/2065 << 可能是远程相关的，尽管是一个有点老的帖子

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

更新

npm 支持人员回复了我，在进行了一些故障排除后，我们已经消除了节点和 npm 的问题。根据 npm 支持的建议，这很可能是由于 gulp 插件或 gulp 本身造成的。

更新 #2

追踪到与 Axios 相关的问题。 gulp 没有正确导入该模块的内容，因此 JS 没有完全转译。这个问题现在采取了不同的路线。一旦针对 (a) 导致此问题的原因以及 (b) 我们如何解决它找到了解决方案，我将予以答复。

Answer 1

解决这个问题的过程如下:

1. 卸载 node 和 npm

   • 如果使用 Homebrew，只需执行 brew uninstall node

2. 删除 /usr/local/lib/node_modules (列出其中的内容以供将来引用)

3. 使用 brew install node --without-npm 重新安装节点.这部分很重要，因为节点本身会引入 npm。不过，npm 并不欣赏 Homebrew 的控制一切的风度，我认为这至少部分地促成了我的问题。

4. 传递的当前 curl 安装过程不适用于最新的 OSX。您将收到一个错误，但安装看起来仍然是成功的——至少在您运行 npm -v 之前是这样。并收到 npm: Command not found .您需要执行此过程(感谢 zmilonas @ https://gist.github.com/DanHerbert/9520689 ):

export NPM_VERSION=6.1.0

export NPM_PREFIX_FROM_RC=$(test -f ~/.npmrc && cat ~/.npmrc | awk -F'=' '{print $NF}')

export NPM_PREFIX=${NPM_PREFIX_FROM_RC:=~/.npm-packages}

curl -O https://registry.npmjs.org/npm/-/npm-${NPM_VERSION}.tgz && \

tar xzf npm-${NPM_VERSION}.tgz && \

cd package && \

node bin/npm-cli.js install -gf --prefix=${NPM_PREFIX} ../npm-${NPM_VERSION}.tgz && \

cd .. && \

rm -rf package npm-${NPM_VERSION}.tgz

1. 将 NODE_PATH 设置为:export $NODE_PATH="/Users/<your-username>/.npm-packages/lib/node_modules"

2. 您还可以将步骤 5 中的命令添加到 ~/.bash_profile` 以在重启时保留此环境变量。

3. 运行 npm install -g <package>对于以前在 /usr/local/lib/node_modules 中的每个包

4. 删除旧的 node_modules从你的项目目录运行 npm install .这应该处理因更新而发生的任何损坏。

5. 运行测试构建。这应该可以解决您遇到的任何问题就像他们解决了我的问题一样。虽然这还没有解决一切，这个过程就是修复我损坏的 npm/node 安装并缩小项目中实际问题的范围和位置。

请记住，以上内容适用于最新的 MacOS，对于 Linux 或 Windows 可能不是必需的。