我正在用 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');
});

# 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"]

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

最佳答案

我在使用 docker 时遇到了同样的问题。实际上我的 jsx 文件名是 loginModal.jsx 我正在使用

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

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

关于build - Docker 容器中的 Browserify/Babelify gulp 构建故障 - 找不到组件模块，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31866058/