[英]bundle.js not found (**not webpack related)
我的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 /-
您是否正在运行多个Web服务器? 例如在端口3000和端口80上? 如果是这样, bundle.js
放置在正确的Web文件夹中?
.htaccess
文件或类似文件是否可能阻止对bundle.js的访问?
如果创建随机文件( test.html
),那么可以从http://localhost:3000/test.html
访问它吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.