npm i 和 npm 更新破坏 gulp，browserify 构建 [英] npm i and npm update breaking gulp, browserify builds

查看：29
本文介绍了npm i 和 npm 更新破坏 gulp，browserify 构建的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

你期望发生什么?

Gulp 将 vue.js 组件转译为可用和功能性的 JS.

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

究竟发生了什么?

当我运行 gulp contacts(显示在下面的代码和配置部分下)时，转译运行良好.终端中没有输出错误，一切似乎都成功完成.问题是，当页面重新加载时，我在控制台中出现错误，指出 Uncaught SyntaxError: Unexpected end of input.在查看源代码时，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('
'), 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

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_modulesnpm 缓存清理安装

  • npm 更新

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

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

在 gulp 任务中设置 debug: false

Set debug: false in the gulp tasks

跑 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.

从生产系统和在同一项目上工作的两个不同的同事复制已知的工作 package.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

我已经用尽了我的知识范围，此时 Google 搜索返回的结果很少.失败的感觉变得非常真实，所以任何帮助将不胜感激！

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、地图?

Gulp Browserify SourceMaps

node sass 版本 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 still停止我的其他观看任务

获取:语法错误:缺失) 在参数列表之后，但无法找出 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 支持回复了我，经过一些故障排除后，我们已经消除了 node 和 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.

更新 #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.

推荐答案

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

The process of fixing this went as follows:

  1. 卸载 node 和 npm

  1. Uninstall node and npm

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

删除/usr/local/lib/node_modules(列出其中的内容以备将来参考)

Delete /usr/local/lib/node_modules (make a list of what's in there for future reference)

使用 brew install node --without-npm 重新安装节点.这部分很重要，因为节点本身会引入 npm.npm 并不欣赏 Homebrew 的全能风度，但我认为这至少部分导致了我的问题.

Reinstall node with brew install node --without-npm. This part is important, as node natively pulls in npm. npm doesn't appreciate Homebrew's all-controlling demeanor, though and I think this, at least partially, contributed to my issues.

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

The current curl install process being passed around does NOT work on the latest OSX. You'll receive an error, but the installation will still look successful -- at least until you run npm -v and receive npm: Command not found. You need to do this process (thanks to zmilonas @ https://gist.github.com/DanHerbert/9520689):

导出 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//.npm-packages/lib/node_modules"

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

You can also add the command in step 5 to ~/.bash_profile` as to retain this environment variable upon restart.

为之前在 /usr/local/lib/node_modules

莉>

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

    Remove your old node_modules from your project directory and run npm install. This should take care of any breakages that occurred due to the update.

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

    Run a test build. This should resolve any of the issues you were having, much like they resolved mine. While this hasn't fixed everything, this process is what it took to repair my broken npm/node install and narrow down what and where the actual issue is in my project.

    这篇关于npm i 和 npm 更新破坏 gulp，browserify 构建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    • 查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆