Reuse babel options and specify polyfills for karma explicitely

babelOptions.js

@@ -0,0 +1,9 @@
+exports.getBabelOptions = ({useESModules}) => ({
+  presets: [['@babel/env', {loose: true}], '@babel/flow', '@babel/react'],
+  plugins: [
+    ['@babel/proposal-class-properties', {loose: true}],
+    ['@babel/transform-runtime', {useESModules}],
+    ['@babel/plugin-proposal-export-namespace-from'],
+    ['dev-expression']
+  ]
+})

docs/environment-requirements.md

@@ -0,0 +1,7 @@
+## JavaScript Environment Requirements
+
+We run our tests against a [number of browsers](../browsers.json) but we do NOT include polyfills for older browsers. It is up to the user to include polyfills depending on what environment they want to support.
+
+It is hard to compile and maintain a full list of required polyfills for each runtime for each version of JSS, so we think you should test your application in the browser you support, and you will see if any polyfill is missing.
+
+We recommend using [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env), which is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

karma.conf.js

@@ -17,14 +17,11 @@ module.exports = config => {
     frameworks: ['mocha'],
     files: [
       'node_modules/@babel/polyfill/dist/polyfill.js',
-      'node_modules/raf/polyfill.js',
-
       './packages/*/tests/*.js',
       './packages/*/tests/**/*.js',
       './packages/*/src/**/*.test.js'
     ],
     preprocessors: {
-      'node_modules/raf/polyfill.js': ['webpack'],
       './packages/**/*.js': ['webpack', 'sourcemap']
     },
     webpack,

rollup.config.js

@@ -8,6 +8,7 @@ import {terser} from 'rollup-plugin-terser'
 import {sizeSnapshot} from 'rollup-plugin-size-snapshot'
 import camelCase from 'camelcase'
 
+const {getBabelOptions} = require('./babelOptions')
 const getPackageJson = require('./scripts/get-package-json')
 
 const pkg = getPackageJson()
@@ -33,18 +34,12 @@ Object.keys(pkg.peerDependencies || {}).forEach(key => {
 
 const external = id => !id.startsWith('.') && !path.isAbsolute(id)
 
-const getBabelOptions = ({useESModules}) => ({
+const getBabelConfig = ({useESModules}) => ({
   babelHelpers: 'runtime',
   exclude: /node_modules/,
   babelrc: false,
   configFile: false,
-  presets: [['@babel/env', {loose: true}], '@babel/flow', '@babel/react'],
-  plugins: [
-    ['@babel/proposal-class-properties', {loose: true}],
-    ['@babel/transform-runtime', {useESModules}],
-    ['@babel/plugin-proposal-export-namespace-from'],
-    ['dev-expression']
-  ]
+  ...getBabelOptions({useESModules})
 })
 
 const commonjsOptions = {
@@ -85,7 +80,7 @@ export default [
     external: Object.keys(globals),
     plugins: [
       nodeResolve(),
-      babel(getBabelOptions({useESModules: true})),
+      babel(getBabelConfig({useESModules: true})),
       commonjs(commonjsOptions),
       replace({
         'process.env.NODE_ENV': JSON.stringify('development'),
@@ -107,7 +102,7 @@ export default [
     external: Object.keys(globals),
     plugins: [
       nodeResolve(),
-      babel(getBabelOptions({useESModules: true})),
+      babel(getBabelConfig({useESModules: true})),
       commonjs(commonjsOptions),
       replace({
         'process.env.NODE_ENV': JSON.stringify('production'),
@@ -124,7 +119,7 @@ export default [
     external,
     plugins: [
       createFlowBundlePlugin,
-      babel(getBabelOptions({useESModules: false})),
+      babel(getBabelConfig({useESModules: false})),
       replace({'process.env.VERSION': JSON.stringify(pkg.version)}),
       sizeSnapshot(snapshotOptions)
     ]
@@ -135,7 +130,7 @@ export default [
     output: {file: pkg.module, format: 'esm'},
     external,
     plugins: [
-      babel(getBabelOptions({useESModules: true})),
+      babel(getBabelConfig({useESModules: true})),
       replace({'process.env.VERSION': JSON.stringify(pkg.version)}),
       sizeSnapshot(snapshotOptions)
     ]
@@ -146,7 +141,7 @@ export default [
     output: {file: pkg.unpkg, format: 'esm'},
     plugins: [
       nodeResolve(),
-      babel(getBabelOptions({useESModules: true})),
+      babel(getBabelConfig({useESModules: true})),
       commonjs(commonjsOptions),
       replace({
         'process.env.NODE_ENV': JSON.stringify('development'),

webpack.config.js

@@ -4,6 +4,7 @@
 
 const webpack = require('webpack')
 const lerna = require('./lerna.json')
+const {getBabelOptions} = require('./babelOptions')
 
 const plugins = [
   new webpack.DefinePlugin({
@@ -29,10 +30,7 @@ module.exports = {
         loader: 'babel-loader',
         test: /\.js$/,
         exclude: /node_modules/,
-        options: {
-          presets: ['@babel/react', '@babel/flow', '@babel/env'],
-          plugins: ['@babel/proposal-class-properties', '@babel/proposal-object-rest-spread']
-        }
+        options: getBabelOptions({useESModules: true})
       }
     ]
   },