gulp, webpack 및 babel-loader 사용 : jsx

업데이트 : vue-tables-2이 컴파일되지 않아 컴파일되지 않아 로더가 필요하지 않습니다. templates 옵션의 경우 특정 설정이 필요없는 범위가 지정된 슬롯을 사용하는 것이 좋습니다.gulp, webpack 및 babel-loader 사용 : jsx

일부 파일 (vue-tables-2)을 빌드 할 때 gulp, webpack 및 babel-loader를 사용하고 있습니다.

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"] 
}

을

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.

참고 : 다음 scripts-vue-tables 작업을 실행 16,

그러나이 오류를 얻을 수 일반적으로, 나는 here 설명 된 단계를 수행하기 위해 노력했다.

출처

2016-11-10 asemahle

'webpackstream'이'webpack.config.js'를 읽으려고합니까? 나는 당신이 당신의 꿀꺽 마는 일 안에 그 구성을 가질 것으로 기대했을 것입니다. – loganfsmyth

감사합니다. 이 주석을 대답으로 바꾸면 솔루션 – asemahle

webpack.config.js은 webpack CLI 인터페이스를 사용하는 경우 읽는 파일이지만 Gulp 예제 사용법에서는 사용되지 않습니다. 당신은 아마 웹팩 구성 및 특수 output 논리를 모두로드

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

뭔가를 원하는 것입니다.

출처

2016-11-11 07:54:59 loganfsmyth

으로 표시하고 vue-tables-2는 미리 컴파일되어 제공되므로 로더가 필요하지 않습니다. 템플릿 옵션의 경우에는 특수 설정이 필요없는 범위가 지정된 슬롯을 사용하는 것이 좋습니다. – Matanya

gulp, webpack 및 babel-loader 사용 : jsx

답변

관련 문제