Question

我的bundle.js文件一直出现404错误。我一直在谷歌搜索，阅读，并尝试我可以花费数小时来解决它，但我还没有找到一个解决方案来帮助我。我在浏览器中遇到以下错误（Chrome）

“无法加载资源：服务器响应状态为404 http://localhost:3000/bundle.js（未找到）“

这是我的gulpfile.babel.js：

import gulp from 'gulp';
import babelify from 'babelify';
import browserify from 'browserify';
import source from 'vinyl-source-stream';
import browserSync from 'browser-sync';
import less from 'gulp-less';
import ghPages from 'gh-pages';
import gutil from 'gulp-util';
import fs from 'fs';

const sync = browserSync.create();

gulp.task('html', () => {
  gulp.src('src/**/*.html')
    .pipe(gulp.dest('dist'))
    .pipe(sync.reload({
      stream: true
    }));
});

gulp.task('json', () => {
  gulp.src('src/**/*.json')
    .pipe(gulp.dest('dist'))
    .pipe(sync.reload({
      stream: true
    }));
});

gulp.task('script', () => {
  browserify().transform(babelify.configure({
  presets: ["es2015", "react"] }))
    .bundle()
    .pipe(fs.createWriteStream("bundle.js"))
});

gulp.task('styles', ['fonts'], () => {
  gulp.src('src/styles/**/*.{css,less}')
    .pipe(less()
      .on('error', (error) => {
        gutil.log(gutil.colors.red('Error: ' + error.message));
        gutil.beep();
      }))
    .pipe(gulp.dest('dist'))
    .pipe(sync.reload({
      stream: true
    }));
});

// Fonts
gulp.task('fonts', () => {
  gulp.src('node_modules/font-awesome/fonts/*')
    .pipe(gulp.dest('dist/fonts/'));
});

gulp.task('build', ['html', 'script', 'styles', 'json']);

gulp.task("deploy", ["build"], () => {
  ghPages.publish("dist");
});

gulp.task('serve', ['build'], () => {
  sync.init({
    server: 'dist',
  });

  gulp.watch('src/**/*.html', ['html']);
  gulp.watch('src/**/*.json', ['json']);
  gulp.watch('src/**/*.{css,less}', ['styles']);
  gulp.watch('src/**/*.{js,jsx}', ['script'])
});

gulp.task('default', ['serve']);

我的package.json

{
  "private": true,
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "browser-sync": "^2.10.1",
    "browserify": "^12.0.1",
    "fs": "0.0.2",
    "gh-pages": "^0.8.0",
    "gulp": "^3.9.0",
    "gulp-less": "^3.0.5",
    "gulp-util": "^3.0.7",
    "react": "^0.14.3",
    "vinyl-source-stream": "^1.1.0",
    "webpack": "^1.12.9"
  },
  "dependencies": {
    "backbone": "^1.2.3",
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.5.0",
    "jquery": "^2.1.4",
    "parse": "^1.6.13",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "underscore": "^1.8.3"
  }
}

我的index.html在正文的底部有以下内容：

    <script type="text/javascript" src="bundle.js"></script>

另外，我使用es2015设置了.babelrc并对预设进行了反应

提前感谢您的任何反馈！

更新已解决：

gulp.task('script', () => {
  browserify().transform(babelify.configure({
  presets: ["es2015", "react"] }))
    .bundle()
    .pipe(fs.createWriteStream("dist/bundle.js"))
});

必须添加 - dist / - 到最后一行

Answer 1

您是否有多台网络服务器正在运行？例如在端口3000和端口80上？如果是这样，bundle.js是否放在正确的网络文件夹中？

.htaccess文件或类似文件是否可以阻止访问bundle.js？

如果您创建了一个随机文件（test.html），那么您可以从http://localhost:3000/test.html访问它吗？

找不到bundle.js（**不与webpack相关）

1 个答案: