使用gulp,webpack和babel-loader:无法编译jsx
问题描述:
UPDATE:vue-tables-2现在处于预编译状态,所以不需要加载器。对于templates
选项,建议使用范围插槽,这也不需要任何特殊设置我使用gulp,webpack和babel-loader来构建一些文件(vue-tables-2):使用gulp,webpack和babel-loader:无法编译jsx
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.
注:一般情况下,我都试图按照所列here的步骤。
答
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
逻辑。
+0
vue-tables-2现在已提供预编译,因此不需要加载器。对于模板选项,建议使用有范围的插槽,这也不需要任何特殊设置。 – Matanya
你确定'webpackstream'会试图读取'webpack.config.js'吗?我曾希望你在你的吞咽任务中有这样的配置。 – loganfsmyth
谢谢!如果您将此评论转换为答案,我会将其标记为解决方案 – asemahle