UNPKG

react-scripts

Version:
179 lines (127 loc) 5.02 kB
## babel-preset-env [![npm](https://img.shields.io/npm/v/babel-preset-env.svg)](https://www.npmjs.com/package/babel-preset-env) [![travis](https://img.shields.io/travis/babel/babel-preset-env/master.svg)](https://travis-ci.org/babel/babel-preset-env) > Babel preset for all environments. ### How it currently works #### Determine browser support for ECMAScript features (up to `latest`) [#7](https://github.com/babel/babel-preset-env/issues/7) - Use external data such as [`compat-table`](https://github.com/kangax/compat-table) to determine browser support. We should create PRs there when necessary. ![](https://cloud.githubusercontent.com/assets/588473/19214029/58deebce-8d48-11e6-9004-ee3fbcb75d8b.png) We run the script [build-data.js](/scripts/build-data.js) which creates [plugins.json](/data/plugins.json). #### Make mapping between javascript features and plugins This should be straightforward to do in most cases. There might be cases were plugins should be split up more. Currently located at [pluginFeatures.js](/data/pluginFeatures.js). #### Support all plugins in Babel that are considered `latest` [#14](https://github.com/babel/babel-preset-env/issues/14) - It won't include `stage-x` plugins. env will support all plugins in what we consider the latest version of Javascript (by matching what we do in [`babel-preset-latest`](http://babeljs.io/docs/plugins/preset-latest/)). #### Determine the lowest common denominator of plugins to be included in the preset If you are targeting IE 8 and Chrome 55 it will include all plugins required by IE 8 since you would need to support both still. #### Support a `browsers` option like autoprefixer [#19](https://github.com/babel/babel-preset-env/pull/19) - Use [browserslist](https://github.com/ai/browserslist) to also queries like `> 1%, last 2 versions`. ## Install ```sh $ npm install --save-dev babel-preset-env ``` ## Usage via [`.babelrc`](http://babeljs.io/docs/usage/babelrc/) ### [Options](http://babeljs.io/docs/plugins/#pluginpresets-options) * `targets` - an object of browsers/environment versions to support (ex: chrome, node, etc). The data for this is currently at: [/data/plugins.json](/data/plugins.json) and being generated by [/scripts/build-data.js](/scripts/build-data.js) using https://kangax.github.io/compat-table. > We would like help to make sure the data is correct! This just means usage/testing! Currently: "chrome, edge, firefox, safari, node" > Some node features are > `6.5`. * `browsers` (array/string) - an query to select browsers (ex: last 2 versions, > 5%). > Note, browsers' results are overridden by explicit items from `targets`. > If your config is a js file, also do `"node": parseFloat(process.versions.node)` * `loose` (boolean) - Enable "loose" transformations for any plugins in this preset that allow them (Disabled by default). * `modules` - Enable transformation of ES6 module syntax to another module type (Enabled by default to `"commonjs"`). * Can be `false` to not transform modules, or one of `["amd", "umd", "systemjs", "commonjs"]`. * `debug` (boolean) - `console.log` out the targets and plugins being used as well as the version specified in `/data/plugins.json`. ```js { "presets": [ ["env", { "targets": { "chrome": 52, "browsers": "last 2 safari versions" }, "loose": true, "modules": false }] ] } ``` ### Example ```js // src export class A {} ``` ```js // default is to run all transforms { "presets": [ ["env", {}] ] } // ... var A = exports.A = function A() { _classCallCheck(this, A); }; ``` ```js // target chrome 52 { "presets": [ ["env", { "targets": { "chrome": 52 } }] ] } // ... class A {} exports.A = A; ``` ```js // target chrome 52 with webpack 2/rollup { "presets": [ ["env", { "targets": { "chrome": 52 }, "modules": false }] ] } // ... export class A {} ``` ```js // using browserslist { "presets": [ ["env", { "targets": { "chrome": 52, "browsers": ["last 2 versions", "safari 7"] } }] ] } // ... export var A = function A() { _classCallCheck(this, A); }; ``` ### Example with `debug: true` ```js Using targets: { "node": 6.5 } Using plugins: module: false transform-exponentiation-operator {} transform-async-to-generator {} syntax-trailing-function-commas {} ``` ## Caveats ### Using `babel-plugin-transform-object-rest-spread` and targeting node.js 6.5 or higher You may get a `SyntaxError: Unexpected token ...` error if using the [object-rest-spread](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-object-rest-spread) feature and targeting node.js 6.5 or higher. This is a known issue at [babel/babel#4074](https://github.com/babel/babel/issues/4074). A simple workaround would be to re-enable the following plugins: `babel-plugin-transform-es2015-destructuring` and `babel-plugin-transform-es2015-parameters`.