使用 Grunt-browserify 构建 npm webshot 模块时出错答案

【问题标题】：Error when using Grunt-browserify to build the npm webshot module使用 Grunt-browserify 构建 npm webshot 模块时出错
【发布时间】：2014-08-17 23:10:27
【问题描述】：

我已经从这里安装了 webshot：

https://www.npmjs.org/package/webshot

使用：npm install webshot

然后我添加了 'var webshot = require('webshot');'到js文件然后运行：

咕噜构建

通常它会将所有 npm 模块编译成一个 lib.js 文件，我可以将其包含在我的项目中以在前端使用 npm 模块。

但我得到了错误：

>> Error: module "os" not found from "/Users/Feroze/Documents/meteor_apps/Bookmark_Website/.npm/node_modules/webshot/node_modules/tmp/lib/tmp.js"
File written to: ../lib/bundle.js
>> Error: module "constants" not found from "/Users/Feroze/Documents/meteor_apps/Bookmark_Website/.npm/node_modules/webshot/node_modules/tmp/lib/tmp.js"
File written to: ../lib/bundle.js

运行 grunt build 时。为什么我无法使用 npm webshot 模块构建我的 lib.js 文件？一旦我使用 npm uninstall webshot，它就可以很好地构建 lib.js 文件。

Gruntfile.coffee

module.exports = function(grunt) {
  grunt.initConfig({
    watch: {
      build: {
          files: ['./entrypoint.js', './package.json'],
          tasks: ['browserify2'],
          options: {
          }
      }
    },
    browserify2: {
      compile: {
        entry: './entrypoint.js',
        compile: '../lib/bundle.js'
      }
    },
  });

  grunt.loadNpmTasks('grunt-browserify2');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('build', ['browserify2']);
};

package.json

{
  "name": "Template",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.3.3",
    "grunt-contrib-uglify": "~0.4.0",
    "browserify": "^4.1.9",
    "grunt-browserify": "^2.1.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-webshot": "^0.3.0"
  },
  "dependencies": {
    "curtsy": "0.0.1"
  }
}

入口点.js

async = require('async')
webshot = require('webshot')

【问题讨论】：

我无法重现您的错误，也许这已在更新版本的 browserify 中得到修复？如果您可以添加您的package.json 和Gruntfile.js，那将很有帮助。
我认为错误是因为你不能在前端使用webshot包，对吧？因此，使用 browserify 由于缺少节点模块，它无法编译 webshot。你用 browserify 编译 webshot 了吗？
是的，我在只需要 webshot 的文件上运行 browserify 或 grunt-browserify 没有问题。您可以尝试将其隔离到browserify 吗？例如，我创建了一个文件index.js，其中只包含var webshot = require('webshot');，然后通过browserify index.js > bundle.js 运行它，它运行良好。
我将复制上面的 gruntfile 和 package.json ，这真的很奇怪，它不适合我。我创建了一个 npm 文件夹只是为了编译一个 lib.js 文件以在我的流星项目中使用。所以我创建了一个名为 npm 的空文件夹。然后我创建了一个 node_modules 文件夹、Gruntfile.js 和 package.json。然后我运行命令 npm install 来安装软件包。用于构建 lib.js 文件的 grunt 构建。仅使用 async 它就可以工作，但是当我尝试包含 webshot 时，它会因该错误而中断
* 我的意思是说 bundle.js 文件。我使用 grunt build 来编译 bundle.js 文件以包含在我的流星项目中。

标签： node.js gruntjs npm browserify

【解决方案1】：

问题似乎源于使用grunt-browserify2 而不是grunt-browserify，“2”版本似乎已经过时并且可能不包括browserify 的最新更新。尝试使用这些package.json 和Gruntfile.js：

package.json

{
  "name": "Template",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.3.3",
    "grunt-contrib-uglify": "~0.4.0",
    "browserify": "^4.1.9",
    "grunt-browserify": "^2.1.0",
    "grunt-contrib-watch": "^0.6.1",
    "async": "^0.9.0",
    "webshot": "^0.15.0",
    "graceful-fs": "^3.0.2"
  },
  "dependencies": {
    "curtsy": "0.0.1"
  }
}

Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    watch: {
      build: {
          files: ['./entrypoint.js', './package.json'],
          tasks: ['browserify'],
          options: {
          }
      }
    },
    browserify: {
      vendor: {
        src: './entrypoint.js',
        dest: '../lib/bundle.js'
      }
    },
  });

  grunt.loadNpmTasks('grunt-browserify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('build', ['browserify']);
};

【讨论】：