Question

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

我的 gulpfile.babel.js中的相关gulp任务：

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');
});

我的 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中的一些bug，因为它在我的本地机器上工作正常。

在Docker容器中Browserify / Babelify gulp构建故障 - 找不到组件模块

1 个答案: