在Docker容器中Browserify / Babelify gulp构build失效 – 无法find组件模块
我在ES6 / JSX中编写应用程序，所以我使用Babelify的Browserify来传输我的脚本。
在我的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
任何帮助，将不胜感激！
我在使用docker时遇到同样的问题。 其实我的jsx文件名是loginModal.jsx，我正在使用
var LoginModal = require('./LoginModal'); //case problem
当我改变它
var LoginModal = require('./loginModal');
它开始工作。
它看起来像泊坞窗中的一些错误，因为它在我的本地机器上正常工作。