Docker容器中的Browserify/Babelify gulp构建错误-找不到组件模块

Question

我在ES6/JSX中编写一个应用程序，所以我使用Browserify与Babelify来翻译我的脚本。

相关gulp任务在我的gulpfile.babel.js:

import gulp from 'gulp';
import browserify from 'browserify';
import babelify from 'babelify';
import buffer from 'vinyl-buffer';
import source from 'vinyl-source-stream';
import runSequence from 'run-sequence';
import gulpLoadPlugins from 'gulp-load-plugins';
const $ = gulpLoadPlugins();
const reload = browserSync.reload;
const path = {
  HTML: './src/*.html',
  CSS: './src/styles/css/*.css',
  IMAGES: './src/images/*.png',
  LESS: './src/styles/less/*.less',
  JS: ['./src/js/**/*.js', './src/js/*.js', './src/js/components/*.jsx', './src/js/components/*.js'],
  DEST: 'dist',
  OUT: 'bundle.js',
  MINIFIED_OUT: 'bundle.min.js',
  ENTRY_POINT: './src/js/app.js'
};
gulp.task('copy-html', () => {
  return gulp.src(path.HTML)
    .pipe(gulp.dest(path.DEST));
});
gulp.task('copy-css', () => {
  return gulp.src(path.CSS)
    .pipe(gulp.dest(path.DEST));
});
gulp.task('copy-less', () => {
  return gulp.src(path.LESS)
    .pipe($.less({}))
    .pipe(gulp.dest(path.DEST));
});
gulp.task('copy-images', () => {
  return gulp.src(path.IMAGES)
    .pipe(gulp.dest(path.DEST));
});
gulp.task('copy', ['copy-html','copy-css','copy-less','copy-images']);
gulp.task('buildReplace', () => {
  return gulp.src(path.HTML)
    .pipe($.htmlReplace({
      'js': path.MINIFIED_OUT
    }))
    .pipe(gulp.dest(path.DEST));
});
gulp.task('build', () => {
  return browserify({
    entries: [path.ENTRY_POINT],
    extensions: ['.jsx', '.js'],
    transform: [babelify]
  })
    .bundle()
    .pipe(source(path.MINIFIED_OUT))
    .pipe(buffer())
    .pipe($.concat(path.MINIFIED_OUT))
    .pipe($.uglify())
    .pipe(gulp.dest(path.DEST));
});
gulp.task('production', () => {
  return runSequence('copy', 'buildReplace', 'build');
});

我的<<p> strong> Dockerfile :

# Pull nginx base image
FROM nginx:latest
# Install Node.js and other dependencies
RUN apt-get update && 
    apt-get -y install curl && 
    curl -sL https://deb.nodesource.com/setup && 
    apt-get -y install python build-essential nodejs nodejs-legacy npm
# Provides cached layer for node_modules
ADD package.json /tmp/package.json
RUN cd /tmp && npm install
RUN mkdir -p /var/www/node_modules && cp -a /tmp/node_modules /var/www
# Copy custom configuration file from the current directory
COPY nginx.conf /etc/nginx/nginx.conf
# Copy static assets into var/www
COPY . /var/www
WORKDIR /var/www
# Install and utilize gulp build task
RUN npm install -g gulp
RUN gulp production
# Expose port 80
EXPOSE 80
# Start up nginx server
CMD ["nginx"]

在我的本地环境中，运行gulp production工作正常。然而，当我的docker构建到达gulp production步骤时，它在gulp build任务启动后出现以下错误:

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: Cannot find module './components/LoginModal' from '/var/www/src/js'
    at /var/www/node_modules/browserify/node_modules/resolve/lib/async.js:55:21
    at load (/var/www/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
    at onex (/var/www/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
    at /var/www/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
    at Object.oncomplete (fs.js:107:15)

它总是在找到组件模块时中断。我的文件结构看起来像这样:

public
  -- src
     -- images
        ... various pngs
     -- styles 
        -- css
           -- main.css
        -- less
           -- main.less
     -- js
        -- app.js
        -- components
           ... various jsx files
  -- Dockerfile
  -- gulpfile.babel.js
  -- package.json
  -- nginx.conf

任何帮助将不胜感激!

Answer 1

我在使用docker时面临同样的问题。实际上我的jsx文件名是loginModal。JSX，我使用

var LoginModal = require('./LoginModal'); //case problem

当我把它改成

var LoginModal = require('./loginModal'); 

它开始工作了。

这看起来像是docker中的一些错误，因为它在我的本地机器上运行良好。