使用gulp、webpack和babel-loader:编译jsx失败

Question

UPDATE: vue-tables-2现在是预编译的，所以不需要加载器。对于templates选项，建议使用作用域插槽，它也不需要任何特殊设置

我使用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_modulesvue-tables-2libtemplate.jsx Unexpected token (15:7)
You may need an appropriate loader to handle this file type.

注意:总的来说，我已经尝试遵循这里列出的步骤。

Answer 1

webpack.config.js是使用webpack CLI界面时读取的文件，但在您的Gulp示例用例中，不会使用它。你可能需要像

这样的东西

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

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