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将其设置为生产。因此，在我看来，你有三种选择，从最差到最好。

将Heroku中的NODE_ENV env var设置为其他内容。（staging或除production之外的任何内容）然后你的devDependencies将加载，grunt将运行，但你将拥有Heroku构建中的所有这些库。并且您不应该以这种模式运行生产应用程序。
将必要的devDependencies移至dependencies的{{1}}部分。与以前相同，这些库仍将在您的生产应用中，但至少您的package.json将是准确的。
使用NODE_ENV脚本加载devDependencies，运行构建，并在启动前删除devDependencies。请在此处查看我的评论：https://stackoverflow.com/a/42237745/673882

Heroku - 节点与Gulp＆amp; Browserify：错误无法找到模块

1 个答案: