开源软件名称:davidtom/react-babel-plugins-web-060517开源软件地址:https://github.com/davidtom/react-babel-plugins-web-060517开源编程语言:JavaScript 100.0%开源软件介绍:React Babel PluginsOverviewWe'll explain what Babel does and how to use it for React development. Objectives
Babel recapBabel is used to transform our ES2015 (and even newer) code to ES5 — the previous version of JavaScript that all browsers know and understand. Most of the ES2015 features are already present in browsers, but it's best to transpile your code using Babel anyway. This ensures that every browser can run your code and gives you the possibility of writing even more modern code (using features that haven't been released yet). Babel, installed by itself, does nothing to your code. It only starts transforming your code once you tell it which plugins to use. Plugins?Plugins are small, composable dependencies that transform parts of our code. These plugins get applied to the code when compiling it with Babel, each doing its own little job and changing our code. For example, the // Source code
const { foo, bar } = myLib;
// Gets transformed by the plugin to:
var _myLib = myLib;
var foo = _myLib.foo;
var bar = _myLib.bar; Having small, separate plugins like this allows us to tweak our configuration to our heart's desire. However, installing every single plugin just to write ES2015 and React code seems like such a hassle... Luckily, there's a thing in Babel called plugin presets! These dependencies are basically a collection of plugins that are grouped together. For example, to transform the code we're writing in this course, we use Using plugins and presetsNow that we know how plugins and presets work, let's take a look at how to tell Babel to actually use them. We install them using {
"presets": ["es2015", "react"],
"plugins": ["an-example-plugin", "another-example-plugin"]
} Now when Babel compiles our code, it'll use the presets and plugins we've defined above. Babel has a great list of all available plugins that you can use to see if you'd like to add anything else. Notable pluginsWhile the following plugins are at an experimental stage, they're still worth checking out — they make the development of React applications even easier! Object rest & spreadUsing the // Rest properties
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
// Spread properties
let n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 } Class propertiesUsing the ResourcesView Babel Plugins on Learn.co and start learning to code for free. |
2022-08-15
2022-08-17
2022-09-23
2023-10-27
2022-08-18
请发表评论