Canopy's browsers list config. Use this in conjunction with @babel/preset-env to compile your code down to the correct browser targets. Babel's preset-env uses browserslist underneath the hood to determine what target to compile your code down to.
Notes:
- This is for the end user app and the config includes safari, chrome, firefox, and edge.
- This should not be used in the SME tool since that doesn't have to support old, crappy browsers.
- You must use
@babel/preset-env
in order for this to work.babel-preset-env
won't work because it uses an old version of browserslist that doesn't support inheriting configs. This means you have to be using babel 7 or greater. - See this file to see which browsers are supported.
- The snapshot test shows exactly
which browsers were captured by the config the last time we updated the browserslist library. Since our browser versions are a moving target that changes over time,
the only way that the browsers support is updated is by updating the
browserslist
library in this repo.
In your package.json, create a browserslist property that extends the canopy config. Read here for more details.
{
"browserslist": [
"extends browserslist-config-canopy"
]
}
In your .babelrc, add 'babel-preset-env'. You do not need to add any config options to it in here because babel-preset-env
uses browserslist which already looks at your package.json's "browserslist"
config by default.
{
presets: ['@babel/preset-env']
}
If you use css-loader
, you may have issues where it uses an older version of browserslist that doesn't support inheriting configs.
If so, please upgrade css-loader to at least version 1.0.0.