Babel and PostCSS-Loader are used to configure the postCSS-loader.
.babelrc
Plug-ins and presets
In fact, the.babelrc configuration file is used to enable us to use plug-ins to handle advanced or proposal syntax when parsing and compiling code using Babel. The difference between plugins and presets is that presets are actually a combination of plugins, which allows us to handle the packaging and compilation of a class of syntax without having to manually configure a series of plug-ins. .babelrc only needs to be written in a JSON format.
The default @ Babel/preset – env
According to the official website, @babel/preset-env is an intelligent preset that can parse and compile the latest JS syntax. It compiles a list of plug-ins appropriate to the target browser environment, enabling the compiled and packaged project to run properly in the target browser environment.
The target browser list can be set by using the browserslist property in package.json, setting targets as the default property, or creating.browserslistrc in the project root directory. For example:
// .browserslistrc
cover 95%
Copy the code
@babel/preset-env Besides the targets configuration item mentioned above, there are two other configuration items that are used in my project. One is useBuiltIns and the other is corejs. The two configuration items are related.
UseBuiltIns has three values, of which the default is false, meaning that the result of Babel compilation is not imported, and the location of the imported, imported polyfills are handed over to the user for processing. The previous approach was to install @bable/ Polyfill and then introduce it in the entry file, but that actually introduced a lot of unnecessary polyfills.
For clarification, polyfill is defined in MDN, and I will pick it up here:
Polyfill is a piece of code (usually JavaScript on the Web) that provides newer functionality to older browsers that it doesn’t have native support for. Polyfill, for example, lets IE7 use Silverlight plug-ins to emulate the functionality of the HTML Canvas element, or emulate CSS support for REM units, or text-shadow, or whatever else you want.
If the value is set to entry, the import ‘@babel/polyfilll’ statement in the file is converted into a series of targets import statements to remove the polyfilll module already supported by the target browser, regardless of whether it is used in the code. The corresponding Polyfilll module is introduced whenever the target browser does not support it. It’s better than introducing all of them, but there are still polyfills that you can’t use.
And now Babel has abandoned @bable/ Polyfill, so it’s up to us to choose which compatible library to use. UseBuiltIns is best set to Usage.
If usage is set, @babel/ Polyfill does not need to be manually introduced into the code, and the actual polyfill module is introduced when packaging according to the needs of the actual code. Also, since @babel/polyfill is deprecated, we need to specify which version of Core-JS to use by setting corejs.
@babel/polyfill encapsulates core-js and refers to regenerator-Runtime /runtime. Core-js actually implements all the new syntax through the pre-ES6 syntax (now supported into ES2019).
This can be set to 2 or 3, specifying which version of Core-JS to use. I haven’t quite understood whether Core-JS should use 2 or 3, how to choose it, and why. There are not many opinions about this on the Internet. Currently, I use 2 in my project, and the version is [email protected]. So this part needs to be sorted out after we understand it.
So the final default configuration is as follows:
{
"presets": [ // Presets, executed from bottom to top
["@babel/preset-env", {
"useBuiltIns": "usage".// The API used is automatically converted and loaded on demand
"corejs": 2 // Replace babel-polyfill, which is no longer recommended}]],// ...
}
Copy the code
The plug-in
Let’s go back to what a plug-in is. Because Babel is a compiler, it does parse, convert, and print, but it doesn’t actually do anything with the conversion. But it does support plug-ins, which can be used for code transformation. So a plug-in is a compilation tool that transforms the code parsed by Babel.
Configuration plug-ins are configured using the plugins configuration property. Plugins accept an array that enumerates plug-ins. The order of execution is top to bottom. If the plug-in needs further configuration, write it as an array. The first item in the array is the plug-in name, and the second item is to configure JSON.
Here is a brief introduction to the plugins I used in my project:
The @babel/plugin-proposal-decorators plugin is used to parse the support for the decorator draft syntax. As illustrated by Babel, it actually converts the decorator syntax into high-level functions that return classes or functions. This plug-in has two optional configurations, one is decoratorsBeforeExport, which specifies whether to use the decorator before the export syntax is supported. The values are true and false. The other is Legacy, which specifies whether the syntax and behavior of legacy decorators are supported. The default value is false.
The @babel/plugin-proposal-class-properties plugin is used to parse support class draft syntax. The plug-in has an optional configuration loose, which defaults to false, i.e
class A {
x = 1
}
Copy the code
In, x is strictly defined using Object.defineProperty. If loose is set to true, it is loose and x is handled directly using an assignment expression.
@babel/plugin-proposal-decorators must be called in front of @babel/plugin-proposal-class-properties. And if @babel/plugin-proposal-class-properties’ legacy is set to true, then @babel/plugin-proposal-class-properties’ loose is set to true.
The last plug-in is @babel/ plugin-transform-Runtime. The plugin also needs to install @babel/ Runtime, which is a use case that uses helper functions to compress the code. The function of the plug-in is to use the help function to deal with the repeated code blocks in the compiled code, so that the amount of code can be reduced.
The final configuration is as follows:
{
"plugins": [ // The plug-in executes from top to bottom
["@babel/plugin-proposal-decorators", {"legacy": true}].Legacy indicates that the decorator syntax is retained. The loose configuration of @babel/plugin-proposal-class-properties is set to true
["@babel/plugin-proposal-class-properties", {"loose": true}].Class A{A = 1} is translated into class A{this. A = 1}.
"@babel/plugin-transform-runtime" // You need to install @babel/ Runtime to compress the code using the help function]}Copy the code
postcss.config.js
Postcss is a javascript tool for converting CSS code. It supports configuring plug-ins to convert CSS code. You can configure options directly in webpack configuration or through postcss.config.js.
Unlike the outermost version of.babelrc, postcss.config.js needs to be exported as a module. There is only one configuration item in the plugins, and this configuration item needs to be passed in an array. Each item in this array is the plug-in that needs to be used, imported by require.
There are a lot of plug-ins listed in the official documentation, so I won’t go through them in detail here, but I will briefly summarize the two plug-ins used in the project.
The Autoprefixer plug-in is used to add browser prefixes. This plugin makes it easy to generate prefixes for different browsers when packaging.
Postcss-pxtorem is a plugin for converting PX units to REM. This plugin is mainly used on mobile devices. There are many different screen sizes on the mobile end, with different proportions. We usually use rem notation, which is just a classic solution. In this case, postcss-pxtorem is used. You can configure rootValue to specify how many px a unit of REM is. This allows you to use px only for development, convert the rem value of the width to 375px window width when packing, and then use this value to calculate the ratio of other widths when the project goes live. For example, if rootValue is set to 37.5, the window width will be fixed at 10rem and all other dimensions will be the standard.
This plugin takes the focus off screen adaptation on mobile. Of course, there are also some configuration items that need to be noted. For example, propList can configure the style attributes that do not need to be converted, unitPrecision is the number of decimal places reserved after converting to REM, and exclude is the directory that excludes transformation.
One more thing, if you don’t want to convert PX, you can write px.
Finally, attach the configuration:
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-pxtorem') ({rootValue: 30.1932367.// The body width is 12.42rem. If 37.5 is set here, the width is converted to 10rem
unitPrecision: 5.propList: [The '*'].// exclude: /node_modules/i}})]Copy the code
Next you clean up the plug-in plugins in the WebPack configuration.