I have the following babel.config.js (not .rc) file:
module.exports = function (api) {
api.cache(true);
return {
"presets": [
"@babel/preset-react",
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"corejs": "3.8",
targets: {
chrome: 97 // January 2022
},
"modules": false
}
]
],
"plugins": [
["@babel/plugin-transform-react-jsx", {
"throwIfNamespace": false, // defaults to true
"runtime": "automatic" // defaults to classic
}],
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-object-assign",
"@babel/plugin-proposal-object-rest-spread",
["module:fast-async", { "spec": true }]
]
}
I find that even though I have targeted a modern browser (Chrome v97, released Jan 2022) Babel still transpiles async/await to promise-based code.
I would like to target ES2021 so Babel doesn't need to transpile async/await.
Additionally I want to use the ?? and ?. operators. In fact, anything ES2021 supports.
I know there are plugins to emulate most things but the browser I'm targeting already supports ES2021. I just don't know how to tell Babel "don't transpile if browser supports it already.".
How would I do this?
Here is my package.json:
{
"name": "scts-expenses",
"version": "0.1.0",
"description": "",
"scripts": {
"build": "webpack --config tools/webpack/config/build",
"ci": "webpack --config tools/webpack/config/integration",
"dev": "webpack --config tools/webpack/config/dev",
"lint": "node_modules/.bin/eslint src -c .eslintrc --ext js",
"start": "npm run dev",
"test": "node_modules/.bin/jest",
"watch-dev": "webpack --config tools/webpack/config/dev --watch"
},
"author": "scott",
"license": "MIT",
"devDependencies": {
"@babel/cli": "^7.18.10",
"@babel/core": "^7.12.10",
"@babel/node": "^7.18.10",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-object-rest-spread": "^7.12.1",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-object-assign": "^7.18.6",
"@babel/plugin-transform-react-jsx": "^7.18.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.18.6",
"autoprefixer": "^9.8.6",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.4.2",
"babel-loader": "^8.2.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"bluebird": "^3.7.2",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.3.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.2",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"css-loader": "^3.6.0",
"eslint": "^6.8.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-jest": "^23.20.0",
"eval": "^0.1.4",
"fast-async": "^6.3.8",
"filemanager-webpack-plugin": "^2.0.5",
"imagemin-webpack-plugin": "^2.4.2",
"jest": "^24.9.0",
"jest-axe": "^3.5.0",
"mini-css-extract-plugin": "^0.8.2",
"node-sass": "^4.14.1",
"postcss": "^7.0.35",
"postcss-css-variables": "^0.13.0",
"postcss-custom-properties": "^9.2.0",
"postcss-loader": "^3.0.0",
"preact": "^10.10.6",
"preact-render-to-json": "^3.6.6",
"preact-render-to-string": "^5.2.2",
"sass-loader": "^8.0.2",
"style-loader": "^1.3.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"@microsoft/applicationinsights-web": "^2.5.10",
"abortcontroller-polyfill": "^1.7.3",
"core-js": "^3.25.0",
"custom-event-polyfill": "^1.0.7",
"element-closest-polyfill": "^1.0.2",
"es6-object-assign": "^1.1.0",
"form-request-submit-polyfill": "^2.0.0",
"picturefill": "^3.0.3",
"promise-polyfill": "^8.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"storm-modal": "^1.2.1",
"storm-tabs": "^1.3.3",
"unfetch": "^4.2.0",
"url-search-params-polyfill": "^8.1.0"
}
}
OK, I found out how to use the latest (or, as modern as I need) features.
The key is to use babel/preset-env and deny Internet Explorer as browser targets.
I discovered this by tinkering around at https://babeljs.io/repl/ . When I found the settings that produced modern code (no converting await/async to promises, for example) I copied them to my babel config.
Here's my babel config:
module.exports = function (api) {
api.cache(true);
return {
"presets": [
"@babel/preset-react",
[
"@babel/preset-env",
Object.assign({}, process.env.NODE_ENV === "test"
? {
"loose": true,
"targets": {
"node": 8,
"browsers": [">0.25%","not IE"]
}
}
: {
"useBuiltIns": "entry",
"corejs": "3.8",
"targets": {
"browsers": "defaults, not ie 11, not ie_mob 11"
},
"modules": false
}
)
]
],
"plugins": [
["@babel/plugin-transform-react-jsx", {
"throwIfNamespace": false, // defaults to true
"runtime": "automatic" // defaults to classic
}]
]
}
};
And here's my package.json. Note: I believe some/all of the polyfills referenced (such as es6-object-assign and promise-polyfill) are no longer required. I will remove them in my project - please do not include them in yours unless necessary.
{
"name": "NeverYouMind ;)",
"version": "0.1.0",
"description": "",
"scripts": {
"ci": "webpack --config tools/webpack/config/integration",
"dev": "webpack --config tools/webpack/config/dev",
"lint": "node_modules/.bin/eslint src -c .eslintrc --ext js",
"start": "npm run dev",
"test": "node_modules/.bin/jest",
"watch-dev": "webpack --config tools/webpack/config/dev --watch"
},
"author": "Scotty T",
"license": "MIT",
"devDependencies": {
"@babel/cli": "^7.18.10",
"@babel/core": "^7.12.10",
"@babel/node": "^7.18.10",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-object-rest-spread": "^7.12.1",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-object-assign": "^7.18.6",
"@babel/plugin-transform-react-jsx": "^7.18.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.18.6",
"autoprefixer": "^9.8.6",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.4.2",
"babel-loader": "^8.2.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"bluebird": "^3.7.2",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.3.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.2",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"css-loader": "^3.6.0",
"eslint": "^6.8.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-jest": "^23.20.0",
"eval": "^0.1.4",
"fast-async": "^6.3.8",
"filemanager-webpack-plugin": "^2.0.5",
"imagemin-webpack-plugin": "^2.4.2",
"jest": "^24.9.0",
"jest-axe": "^3.5.0",
"mini-css-extract-plugin": "^0.8.2",
"node-sass": "^4.14.1",
"postcss": "^7.0.35",
"postcss-css-variables": "^0.13.0",
"postcss-custom-properties": "^9.2.0",
"postcss-loader": "^3.0.0",
"preact": "^10.10.6",
"preact-render-to-json": "^3.6.6",
"preact-render-to-string": "^5.2.2",
"sass-loader": "^8.0.2",
"style-loader": "^1.3.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"@microsoft/applicationinsights-web": "^2.5.10",
"abortcontroller-polyfill": "^1.7.3",
"core-js": "^3.25.0",
"custom-event-polyfill": "^1.0.7",
"element-closest-polyfill": "^1.0.2",
"es6-object-assign": "^1.1.0",
"form-request-submit-polyfill": "^2.0.0",
"picturefill": "^3.0.3",
"promise-polyfill": "^8.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"unfetch": "^4.2.0",
"url-search-params-polyfill": "^8.1.0"
}
}