Storybook: [Question] Is it possible to use Storybook without transpilation, writing stories using pure ES6?

Created on 20 Oct 2020  路  2Comments  路  Source: storybookjs/storybook

Hi, I just have a general question about usage of Storybook. Is it possible to use Storybook without babel, writing stories using pure ES6? I would like to use it in a project which does not use transpilation (React components are written in pure ES6).

PN babel / webpack question / support

Most helpful comment

You can change the webpack config to what you see fit, you can you remove the babel-loader and any other loader you don't want.

If you don't want your stories and components to be passed through babel, it could be "as simple as":

// main.js ( pseudo-code )

module.exports = {
  webpackFinal: async(config)=> {
    const filesNotPassedThroughBabelRegex = /some regex that excludes the files you don't want to pass through babel/
    config.module.rules[0].exclude.push(filesNotPassedThroughBabelRegex)
  }
}

All 2 comments

There's a prebuilt version of Storybook that supports this

https://github.com/open-wc/open-wc/tree/master/packages/demoing-storybook

I'm not sure how to achieve this in standard Storybook cc @ndelangen

You can change the webpack config to what you see fit, you can you remove the babel-loader and any other loader you don't want.

If you don't want your stories and components to be passed through babel, it could be "as simple as":

// main.js ( pseudo-code )

module.exports = {
  webpackFinal: async(config)=> {
    const filesNotPassedThroughBabelRegex = /some regex that excludes the files you don't want to pass through babel/
    config.module.rules[0].exclude.push(filesNotPassedThroughBabelRegex)
  }
}

Was this page helpful?
0 / 5 - 0 ratings