代码之家  ›  专栏  ›  技术社区  ›  Taylor Austin

使用gulp/webpack并使用spread运算符获取意外令牌错误

  •  0
  • Taylor Austin  · 技术社区  · 7 年前

    enter image description here

    我已安装 stage-2 我从帖子上看到,这应该能让这一切顺利。然而,当我构建项目时,它不起作用。我将添加我的:

    .babelrc
    webpack.config.js
    gulpfile.js
    package.json
    

    让你看看我在做什么。文件将按顺序排列。

    {
      "presets": ["es2015", "react", "stage-3", "stage-0", "stage-1", "stage-2", "env"],
      "plugins": ["transform-object-rest-spread"]
    }
    

    var webpack = require('webpack');
    var path = require('path');
    var CommonsChunkPlugin = new require('webpack/lib/optimize/CommonsChunkPlugin');
    var chunks = ['app'];
    var config = require('./package.json');
    
    module.exports = {
      entry: {
        app: './src/index.js'
      },
      output: {
        path: __dirname + '/dist',
        filename: 'bundle/[name].js',
        sourceMapFilename: 'bundle/[name].map'
      },
      node: {
        fs: 'empty'
      },
      devtool: '#source-map',
      plugins:
        process.env.NODE_ENV === 'production'
          ? [
              new CommonsChunkPlugin({
                name: 'commons',
                chunks: chunks
              }),
              new webpack.DefinePlugin({
                'process.env': {
                  NODE_ENV: JSON.stringify('production')
                }
              }),
              new webpack.optimize.UglifyJsPlugin({
                minimize: true,
                compress: {
                  warnings: false,
                  drop_console: true
                }
              })
            ]
          : [
              new CommonsChunkPlugin({
                name: 'commons',
                chunks: chunks
              })
            ],
      module: {
        loaders: [
          {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
              presets: ['react', 'es2015', 'env', 'stage-2']
            }
          },
          {
            test: /\.json$/,
            loader: 'json-loader'
          },
          {
            test: /\.(jpg|png|svg)$/,
            loader: 'file-loader',
            query: {
              name: '[name].[ext]',
              outputPath: 'images/',
              publicPath: config.server ? '/' : 'dist/',
              useRelativePath: false
            }
          }
        ]
      }
    };
    

    var gulp = require('gulp');
    var minifyCSS = require('gulp-minify-css');
    var autoprefixer = require('gulp-autoprefixer');
    var gp_concat = require('gulp-concat');
    var gp_rename = require('gulp-rename');
    var gp_uglify = require('gulp-uglify');
    var less = require('gulp-less');
    var to5 = require('gulp-6to5');
    var path = require('path');
    
    gulp.task('less', function() {
      return gulp
        .src('./assets/style.less')
        .pipe(
          less({
            paths: [path.join(__dirname, 'less', 'includes')]
          })
        )
        .pipe(gulp.dest('./assets/css'));
    });
    
    gulp.task('css', ['less'], function() {
      return gulp
        .src([
          './assets/css/bootstrap.css',
          './assets/css/style.css',
          './assets/css/swiper.css',
          './assets/css/dark.css',
          './assets/css/font-icons.css',
          './assets/css/animate.css',
          './assets/css/magnific-popup.css',
          './assets/css/responsive.css',
          './assets/css/custom.css'
        ])
        .pipe(minifyCSS())
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
        .pipe(gp_concat('style.min.css'))
        .pipe(gulp.dest('./dist/css/'));
    });
    
    gulp.task('copy-fonts', function() {
      return gulp.src(['./assets/css/fonts/**']).pipe(gulp.dest('./dist/css/fonts/'));
    });
    
    gulp.task('style', ['css', 'copy-fonts'], function() {});
    
    gulp.task('js', function() {
      return gulp
        .src(['./assets/js/jquery.js', './assets/js/plugins.js', './assets/js/functions.js', './assets/js/custom.js'])
        .pipe(gp_concat('vendor.min.js'))
        .pipe(gulp.dest('./dist/js/'))
        .pipe(gp_rename('vendor.min.js'))
        .pipe(gp_uglify())
        .pipe(gulp.dest('./dist/js/'));
    });
    
    gulp.task('es6-es5', ['js'], function() {
      return gulp
        .src(['./src/*/**.js', './src/*/*/**.js'])
        .pipe(to5())
        .pipe(gulp.dest('./dist/es5/'));
    });
    
    gulp.task('watch', function() {
      gulp.watch(['./src/*/**.js', './src/*/*/**.js', './assets/js/**.js'], ['es6-es5']);
    });
    
    gulp.task('prod', ['style', 'es6-es5'], function() {});
    
    gulp.task('default', ['es6-es5', 'watch'], function() {});
    

    {
      "name": "ghost-blog",
      "version": "0.0.0",
      "server": false,
      "private": true,
      "scripts": {
        "dev": "concurrently \"webpack -w\" \"turbo devserver\"",
        "clean": "rimraf ./dist/*",
        "build": "npm run clean && set NODE_ENV=production && webpack && gulp prod",
        "postinstall": "npm run build"
      },
      "dependencies": {
        "babel-preset-env": "^1.6.1",
        "babel-preset-stage-0": "^6.24.1",
        "babel-preset-stage-1": "^6.24.1",
        "babel-preset-stage-2": "^6.24.1",
        "bluebird": "latest",
        "body-parser": "latest",
        "cheerio": "latest",
        "concurrently": "^3.5.0",
        "cookie-parser": "latest",
        "debug": "latest",
        "dotenv": "latest",
        "file-loader": "latest",
        "firebase": "latest",
        "moment": "latest",
        "react": "^16.0.0",
        "react-bootstrap": "^0.31.3",
        "react-dom": "latest",
        "react-dropzone": "^4.2.0",
        "react-player": "^0.25.2",
        "react-redux": "latest",
        "react-router-dom": "^4.2.2",
        "react-time": "^4.3.0",
        "redux": "latest",
        "redux-thunk": "latest",
        "stripe": "latest",
        "superagent": "latest",
        "sweetalert2": "^6.10.3",
        "turbo360": "^1.4.69",
        "webpack": "latest"
      },
      "devDependencies": {
        "babel-core": "latest",
        "babel-loader": "latest",
        "babel-preset-es2015": "latest",
        "babel-preset-react": "latest",
        "json-loader": "latest",
        "gulp": "latest",
        "gulp-autoprefixer": "latest",
        "gulp-6to5": "latest",
        "gulp-concat": "latest",
        "gulp-less": "latest",
        "gulp-minify-css": "latest",
        "gulp-rename": "latest",
        "gulp-uglify": "latest",
        "chai": "latest",
        "chai-http": "latest",
        "nodemon": "latest",
        "mocha": "latest",
        "mocha-jscs": "latest",
        "mocha-jshint": "latest",
        "rimraf": "latest"
      },
      "functions": {
        "turbo360": "latest"
      },
      "babel": {
        "presets": ["es2015", "react", "stage-2"]
      },
      "deploy": ["index.html", "dist"],
      "app": "59e0c137221d130012ee41dc"
    }
    
    1 回复  |  直到 7 年前
        1
  •  2
  •   loganfsmyth    7 年前

    堆栈跟踪显示这是一个错误,因为网页包部分没有显示错误。问题是您正在使用

    var to5 = require('gulp-6to5');
    

    这根本不是巴别塔,而是巴别塔更古老的版本,称为“6to5”。如果你改成使用 gulp-babel 安装好后,一切都会好起来的。

    根据您发布的配置,您可以将内容缩减到

    {
      "presets": ["env", "react", "stage-0"]
    }
    

    使用该配置,您还可以删除

    query: {
      presets: ['react', 'es2015', 'env', 'stage-2']
    }
    

    因为它已经在 .babelrc .

    如果对象静止/扩散是您计划使用的唯一实验功能,那么您也可以这样做

    {
      "presets": ["env", "react"],
      "plugins": ["transform-object-rest-spread"]
    }