首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在js-file中出错后,Webpack手表崩溃

在js-file中出错后,Webpack手表崩溃
EN

Stack Overflow用户
提问于 2018-12-26 02:59:55
回答 1查看 734关注 0票数 2

我创建了*.scss到main.css和*.js到main.js的组合环境。同时使用gulp和webpack。

看起来scss文件(https://prntscr.com/lzexyt)没有问题,但是如果我在js文件中有错误(例如删除了花括号)-进程崩溃和手表停止(https://prntscr.com/lzf14w)。

gulpfile.js

代码语言:javascript
运行
复制
'use strict';

const gulp = require('gulp'),
      sass = require('gulp-sass'),
      autoprefixer = require('gulp-autoprefixer'),
      browserSync = require('browser-sync').create(),
      webpack = require('webpack'),
      webpackStream = require('webpack-stream'),
      rename = require('gulp-rename'),
      uglify = require('gulp-uglify');

sass.compiler = require('node-sass');

gulp.task('sass', function () {
  return gulp.src('./src/scss/**/*.scss')    
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
            browsers: ['last 10 versions'],
            cascade: false
        }))
    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(gulp.dest('./public'))
    .pipe(browserSync.stream());
});

gulp.task('serve', function() {
    browserSync.init({
        server: "./public"
    });

    gulp.watch("public/*.html").on('change', browserSync.reload);
    gulp.watch("public/*.js").on('change', browserSync.reload);

});

gulp.task('scripts', function () {
  return gulp.src('./src/js/*.js')
    .pipe(webpackStream({
      module: {

        rules: [
          {
            test: /\.(js)$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
              presets: ["@babel/preset-env"]
            }
          }
        ]
      },

      output: {
        path: __dirname + '/public',
        filename: 'main.js'
      }
    }))
    .pipe(gulp.dest('./public'))
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('./public'))
    .pipe(browserSync.stream());
});

gulp.task('default', gulp.parallel('serve', function() {   
    gulp.watch('./src/scss/**/*.scss', gulp.series('sass'));
    gulp.watch('./src/js/*.js', gulp.series('scripts'))
}))

package.json

代码语言:javascript
运行
复制
{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.1",
    "node-sass": "^4.11.0",
    "webpack": "^4.28.2",
    "webpack-stream": "^5.2.1"
  },
  "dependencies": {}
}

package-lock.json (如果需要) https://drive.google.com/open?id=1PSNT8O43x4X1CWKExhS7ea3KKWQbw9MV

文件夹层次结构https://prntscr.com/lzfmvl

主要问题-如何让webpack在出错后继续关注js文件,并在修复错误后重建main.js并重新加载浏览器(就像scss-css watch一样)?

EN

Stack Overflow用户

回答已采纳

发布于 2018-12-28 03:01:06

得到了答案--在webpack的烟斗之后添加

代码语言:javascript
运行
复制
.on('error', function handleError() {
      this.emit('end'); // Recover from errors
    })

https://github.com/shama/webpack-stream/issues/34#issuecomment-171644957

票数 1
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53924907

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档