使用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的步骤。

来源

2016-11-10 asemahle

你确定'webpackstream'会试图读取'webpack.config.js'吗？我曾希望你在你的吞咽任务中有这样的配置。 – loganfsmyth

谢谢！如果您将此评论转换为答案，我会将其标记为解决方案 – asemahle

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逻辑。

来源

2016-11-11 07:54:59 loganfsmyth

vue-tables-2现在已提供预编译，因此不需要加载器。对于模板选项，建议使用有范围的插槽，这也不需要任何特殊设置。 – Matanya

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

回答

相关问题