问题
I inadvertently introduced a backwards compatibility issue in my React app by using Array.prototype.flat
. I was very surprised this didn't get resolved by transpiling - I thought this would result in es2015 compatible code.
How can I get Babel 7 to transpile this? (If my reading of the sources is right in Babel 6 there was still a plugin for this but since this has begun to roll out to browsers support has been dropped?)
Tools:
- @babel/core@7.0.0
- webpack@4.18.0
My top-level configuration files look like this:
webpack.config.js
var path = require('path')
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, 'dist', 'assets'),
filename: "bundle.js",
sourceMapFilename: "bundle.map"
},
devtool: '#source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader'
}
]
}}
.babelrc
{
"presets": [ "@babel/preset-env", "@babel/react" ],
"plugins": [["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }]]
}
.browserslistrc
chrome 58
ie 11
回答1:
Here is an important note: You cannot "transpile it away". You can only polyfill this.
In order to do this you can use
- core-js@3 installed as runtime dependency
- a configuration of @babel/preset-env to have useBuiltIns: usage, this imports the needed polyfills where needed instead of manually having import @babel/polyfill in the source code
The entire .babelrc is configured like so
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": 4
},
"useBuiltIns": "usage",
"corejs": 3
}
]
]
}
Alternatively you could have @babel/polyfill as a runtime dependency in your package.json and import "@babel/polyfill"
in your code.
All of the details you need are on this page https://babeljs.io/docs/en/babel-polyfill but there is a lot of subtlety
I created this minimal example to demonstrate
https://github.com/cmdcolin/babel-array-flat-demo
After compiling you get proper imports added to your file https://github.com/cmdcolin/babel-array-flat-demo/blob/master/dist/index.js and this works with old versions of node.
来源:https://stackoverflow.com/questions/52283892/transpiling-array-prototype-flat-away-with-babel