reactjs - Transpiling React code, but leave ES6 alone -

i'm writing chrome extension using es6/react/redux babel , gulp.

i using babel presets es2015, stage-2 , react.

then realized i'm targeting chrome rid of es2015/estage-2 stage it's supported chrome.

so first tried .babelrc , remove references es2015 , stage-2.

not fast... before running webpack gulp script fails run. tried first make gulp file es5 compatible.

then got errors of spread operators not being supported, re-added "stage-2" loader.

then got errors in different modules:

> warning in ./background/src/index.html module parse failed: > /my_path/my_project/src/index.html unexpected token (1:0) may need > appropriate loader handle file type. syntaxerror: > unexpected token (1:0) >     @ parser.pp$4.raise (/my_path/my_project/node_modules/acorn/dist/acorn.js:2221:15) 

to understand how code structured, it's in 3 main folders: background, content , popup. each 1 representing chrome environment. each one, have separated webpack.config.js file, similar one: https://pastebin.com/hsevyqaw gulp calls webpack each config file , generated bundle output file each one, during build process.

there's way make gulp/webpack works es6 syntax, while not transpiling deployment? what's best approach issue?

gulp version

> [17:32:27] requiring external module babel-register  > [17:32:27]cli version 3.9.1  > [17:32:27] local version 3.9.1 

webpack version: 1.14.0

update after adding html-loader suggested @michael jungo seems run fine, gives me warning, not sure how bad ignore it:

warning in ./background/src/index.js critical dependencies: 17:29-52 request of dependency expression  @ ./background/src/index.js 17:29-52 

update 2 oh, chrome complaining modules syntax of extension, based on read it's suppose supported:

uncaught syntaxerror: unexpected token import 

your error not related babel or es6 features. you're trying import html file ./background/src/index.html in config you've posted, there no rule .html handle these files, therefore webpack tells you might need appropriate loader file type.

you can use html-loader , add following rule loaders array:

{   test: /\.html$/,   loader: 'html-loader' } 

as babel config, should work wanted. keep in mind if you're using es modules (import/export) still need transpile them or switch webpack 2 supports them out of box. uglifyjs doesn't understand es6 syntax, if want uglify es6 have use alternative babili babili-webpack-plugin.