javascript - Gulp/Webpack 不转译 Vue 文件

Question

当我从命令行运行 Webpack 时，一切都运行良好:生成的包已正确转译/丑化，并且在浏览器中运行良好。但是，当我尝试从 Gulp 调用 Webpack 时(我使用的是 Gulp@4，FWIW)，我总是收到此错误:

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
Error: bundle.js from UglifyJs
Unexpected token: name (Vue) [bundle.js:47,8]

我从带有 .babelrc 的 Babel 开始，手动将 Webpack-stream 指向 Webpack 2^.X.X，甚至在 reading this 之后给了 Buble 一个机会。 。有什么建议吗？

package.json

"dependencies": {
  "body-parser": "^1.16.0",
  "csv-parse": "^1.2.0",
  "express": "^4.14.1",
  "express-handlebars": "^3.0.0",
  "knex": "^0.12.7",
  "marked": "^0.3.6",
  "sass": "^0.5.0",
  "sqlite3": "^3.1.8"
},
"devDependencies": {
  "browser-sync": "^2.18.8",
  "buble": "^0.15.2",
  "buble-loader": "^0.4.1",
  "css-loader": "^0.27.3",
  "eslint": "^3.14.1",
  "eslint-plugin-html": "^2.0.1",
  "eslint-plugin-vue": "^2.0.1",
  "gulp": "github:gulpjs/gulp#4.0",
  "gulp-nodemon": "^2.2.1",
  "gulp-sass": "^3.1.0",
  "gulp-uglify": "^2.1.2",
  "gulp-webpack": "^1.5.0",
  "jsdoc-to-markdown": "^3.0.0",
  "uglify-js": "^2.8.14",
  "vue": "^2.2.4",
  "vue-loader": "^11.2.0",
  "vue-template-compiler": "^2.2.4",
  "webpack": "^2.3.1",
  "webpack-stream": "^3.2.0"
}

webpack.config.js

const path = require('path');

const webpack = require('webpack');

module.exports = {
  entry: path.resolve(__dirname, 'src/views/vue.js'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'src/public/js')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'buble-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
};

gulpfile.js

const path        = require('path');
const browserSync = require('browser-sync');
const gulp        = require('gulp');
const nodemon     = require('gulp-nodemon');
const uglify      = require('gulp-uglify');
const webpack     = require('webpack-stream');

const BROWSER_SYNC_DELAY    = 1000;
const NODEMON_RESTART_DELAY = 5000;

gulp.task('compile-js', (done) => {
  // Use webpack to transpile, bundle, and uglify front-end JS
  gulp.src(path.resolve(__dirname, 'src/views/vue.js'))
    .pipe(webpack(require(path.resolve(__dirname, 'webpack.config.js'))))
    .pipe(gulp.dest(path.resolve(__dirname, 'src/public/js')));

  done();
});

vue.js

import Vue from 'vue';
import App from './index.vue';

new Vue({
  el: '#app',
  render: (createElement) => {
    return createElement(App);
  }
});

index.vue

<template>
  <p>{{ message }}</p>
</template>

<script>
  export default {
    data() {
      return { message: 'Hello world!' };
    }
  };
</script>

Answer 1

我对 vue 和 webpack 没有太多经验，因为我自己也在学习过程中。也许您可能希望将 vue-loader 应用于 js 测试，因为您要将 vue 组件发送到 bundle.js。

仅供引用，欢迎指正。