Heroku - 具有Gulp和Browserify的节点：错误无法找到模块

Question

我正在使用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模块的代码段：

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

class Feed {
    // Rest of class
}

module.exports = Feed

Answer 1

总之，你devDependencies中package.json没有得到，当你加载NODE_ENV设置为production 。 默认情况下，Heroku将其设置为生产。 所以在我看来，你有三个选择，从最差到最好。

1. 将Heroku中的NODE_ENV env var设置为其他内容。 （ staging或production以外的任何东西）然后你的devDependencies将加载，grunt将运行，但你将拥有Heroku构建中的所有这些库。 并且您不应该在此模式下运行生产应用程序。

2. 将必要的devDependencies移动到package.json的dependencies部分。 与以前一样，这些库仍将在您的生产应用程序中，但至少您的NODE_ENV将是准确的。

3. 使用postinstall脚本加载devDependencies，运行构建，并在启动之前删除devDependencies。 请在此处查看我的评论： https ： //stackoverflow.com/a/42237745/673882