使用 gulp、webpack 和 babel-loader：无法编译 jsx

Question

更新：vue-tables-2 现在已预编译，因此不需要加载器。对于 templates 选项，建议使用 scoped slots，它也不需要任何特殊设置

我正在使用 gulp、webpack 和 babel-loader 构建一些文件 (vue-tables-2)：

gulp.task('scripts-vue-tables', function() {
    gulp.src('node_modules/vue-tables-2/index.js')
        .pipe(webpackstream({
                output: {
                    path: __dirname,
                    filename: "vue-tables-2.js",
                    library: 'VueTables2',
                    libraryTarget: 'var'
                }
            }
        ))
        .pipe(gulp.dest('public/vendor/vue-tables-2/js/'));
}

在 webpack.config.js 我已经包括：

loaders: [
        {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            query: {
                presets: ["latest", "react", "stage-0"],
                plugins: ["transform-vue-jsx"]
            }
        },
    ]

并包含在 .babelrc 中：

{
  "presets": ["latest", "react", "stage-0"],
  "plugins": ["transform-vue-jsx"]
}

但是，运行 scripts-vue-tables 任务产生错误：

Module parse failed: \node_modules\vue-tables-2\lib\template.jsx Unexpected token (15:7)
You may need an appropriate loader to handle this file type.

注意：总的来说，我已尝试按照列出的步骤进行操作。

Answer 1

如果您使用 webpack CLI 界面，

webpack.config.js 是读取的文件，但在您的 Gulp 示例用例中，它不会被使用。你可能想要

    .pipe(webpackstream(Object.assign({
        output: {
            path: __dirname,
            filename: "vue-tables-2.js",
            library: 'VueTables2',
            libraryTarget: 'var'
        },
    }, require('./webpack.config')))

加载 Webpack 配置和特殊的 output 逻辑。

使用 gulp、webpack 和 babel-loader：无法编译 jsx

Using gulp, webpack, and the babel-loader: Fails to compile jsx

jsx

webpack

vue.js

babeljs

vue-tables-2