Heroku - 带有 Gulp 和 Browserify 的节点：错误找不到模块答案

【问题标题】：Heroku - Node with Gulp & Browserify: Error Cannot find module fromHeroku - 带有 Gulp 和 Browserify 的节点：错误找不到模块
【发布时间】：2017-09-19 00:08:30
【问题描述】：

我正在使用 Gulp 来构建我的所有资产。对于 Javascript，我有一个任务使用 Browserify 来解决我所有的代码依赖关系。

当我在本地运行我的项目时，一切正常。但是，当部署在 heroku 中时，Gulp 失败并出现以下错误：

2017-04-21T20:35:28.370935+00:00 app[web.1]: Error: Cannot find module  './components/feed' from '/app/client/web/public/dev/js'
2017-04-21T20:35:28.370935+00:00 app[web.1]:     at /app/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21
2017-04-21T20:35:28.370936+00:00 app[web.1]:     at load (/app/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
2017-04-21T20:35:28.370937+00:00 app[web.1]:     at onex (/app/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
2017-04-21T20:35:28.370937+00:00 app[web.1]:     at /app/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
2017-04-21T20:35:28.370938+00:00 app[web.1]:     at FSReqWrap.oncomplete (fs.js:123:15)

这是 Gulp 任务

gulp.task('bundle', () => {
  const javascriptFiles = [
    {
      src: './client/web/public/dev/js/main.js',
      outDir: './client/web/public/production/js',
      outFile: 'main.bundle.js'
    }
  ]
  javascriptFiles.forEach((file) => {
    const bundler = browserify({
      entries: [ file.src ],
      extensions: ['.js'],
      paths: ['./node_modules','./client/web/public/dev/js']
    })
    .transform(coffeeify)
    .transform('babelify', { presets: ['es2015'] })

    createBundle(bundler, file)
  })
})

function createBundle (bundler, file) {
  const src = path.join(__dirname, file.src)
  const outFile = path.join(__dirname, file.outFile)
  const outDir = path.join(__dirname, file.outDir)
  const sourceMapDir = 'maps'

  bundler.bundle()
    .pipe(source(src))
    .pipe(buffer()) // Convert to gulp pipeline
    .pipe(rename(outFile))
    // Sourc Map
    .pipe(sourceMaps.init({ loadMaps : true }))
    .pipe(sourceMaps.write(sourceMapDir)) // save
    // Write result to output directory
    .pipe(gulp.dest(outDir))
    .pipe(livereload()) // Reload browser if relevant
}

这是我当前的项目组织（用于客户端模块）

.
├── app.js
├── gulpfile.js
└── client
    └── web
        ├── public
        │   ├── dev
        │   │   ├── js
        │   │   │   ├── main.js
        │   │   │   │   ├── utils
        │   │   │   │   │   ├── random.js
        │   │   │   │   ├── components
        │   │   │   │   │   ├── feed
        │   │   │   │   │   │   ├── index.js

这是来自 client/web/public/dev/js/main.js 的主模块，它需要 feed 模块并失败：

const Feed = require('./components/feed')
Feed.doWhatever(...)

这是 feed 模块的 sn-p：

const Random = require('../../utils/random)

class Feed {
    // Rest of class
}

module.exports = Feed

【问题讨论】：

标签： javascript node.js heroku gulp browserify

【解决方案1】：

简而言之，当您的NODE_ENV 设置为production 时，您的package.json 中的devDependencies 不会被加载。默认情况下，Heroku 将其设置为生产环境。所以在我看来，你有三个选择，从最差到最好。

将 Heroku 中的 NODE_ENV 环境变量设置为其他内容。（staging 或 production 以外的任何东西）然后你的 devDependencies 将加载，grunt 将运行，但你将在 Heroku 构建中拥有所有这些库。而且您不应该在这种模式下运行生产应用程序。
将必要的 devDependencies 移动到 package.json 的 dependencies 部分。和以前一样，这些库仍会在您的生产应用程序中，但至少您的 NODE_ENV 将是准确的。
使用 postinstall 脚本加载 devDependencies，运行构建，并在启动前删除 devDependencies。在这里查看我的评论：https://stackoverflow.com/a/42237745/673882

【讨论】：