@ackee/browserslist-config 中文文档教程
@ackee/browserslist-config
我们在 Akcee 中的项目的默认浏览器列表 - prod env 的浏览器列表。
我们的 PM 和我们的客户可以在此处找到更易读的版本。
Usage
yarn add @ackee/browserslist-config -D
将此添加到您的 package.json：
"browserslist": [
"extends @ackee/browserslist-config"
]
Browserslist in create-react-app
Usage
确保至少安装了
@ackee/react-scripts@1.1.1版本：yarn add @ackee/react-scripts@1.1.1 -D添加到
package.json< /code>："browserslist": [ "extends @ackee/browserslist-config" ]在项目的根目录中导入
core-js以进行正确的 polyfilling： <代码>sh 导入“核心js”；
Recommendations
由于节点模块通常对最终包大小的影响最大，因此仔细选择这些包至关重要：
要在项目中利用浏览器列表的功能，选择转换为现代（非- ES5 JavaScript) 尽可能多。
Structure
- CRA has its own babel preset called
babel-preset-react-app. - The preset is then used in Webpack configuration in
@ackee/react-scripts. babel-preset-react-appuses@babel/preset-envpreset that transpiles code based on provided browserslist.
Debugging
@babel/preset-env 可用 调试选项。 您可以将其设置为：
babel-preset-react-app/create.jsfor your source code.babel-preset-react-app/dependencies.jsfor node modules.
对于仅使用 Chrome 81 的浏览器列表，示例输出可能如下所示：
@babel/preset-env: `DEBUG` option
Using targets:
{
"chrome": "81"
}
Using modules transform: false
Using plugins:
syntax-nullish-coalescing-operator { "chrome":"81" }
syntax-optional-chaining { "chrome":"81" }
syntax-json-strings { "chrome":"81" }
syntax-optional-catch-binding { "chrome":"81" }
syntax-async-generators { "chrome":"81" }
syntax-object-rest-spread { "chrome":"81" }
syntax-dynamic-import { "chrome":"81" }
syntax-top-level-await { "chrome":"81" }
Using polyfills with `entry` option:
@ackee/browserslist-config
A default browsers list for our projects in Akcee - list of browsers for prod env.
More readble version for our PMs and our clients can found here.
Usage
yarn add @ackee/browserslist-config -D
Add this to your package.json:
"browserslist": [
"extends @ackee/browserslist-config"
]
Browserslist in create-react-app
Usage
Make sure to have installed at least
@ackee/react-scripts@1.1.1version:yarn add @ackee/react-scripts@1.1.1 -DAdd to
package.json:"browserslist": [ "extends @ackee/browserslist-config" ]Import
core-jsin root of your project for correct polyfilling:sh import 'core-js';
Recommendations
Since node modules often have the largest impact on the final bundle size, it's crucial to choose those packages carefully:
To leverage the power of browserslist on your project, it's important to choose packages transpiled to modern (non-ES5 JavaScript) as much as possible.
Lint the browser compatibility of your code by adding
eslint-plugin-compat
Structure
- CRA has its own babel preset called
babel-preset-react-app. - The preset is then used in Webpack configuration in
@ackee/react-scripts. babel-preset-react-appuses@babel/preset-envpreset that transpiles code based on provided browserslist.
Debugging
@babel/preset-env has available debug option. You can set it in:
babel-preset-react-app/create.jsfor your source code.babel-preset-react-app/dependencies.jsfor node modules.
An example output could look like this for browserslist only with Chrome 81:
@babel/preset-env: `DEBUG` option
Using targets:
{
"chrome": "81"
}
Using modules transform: false
Using plugins:
syntax-nullish-coalescing-operator { "chrome":"81" }
syntax-optional-chaining { "chrome":"81" }
syntax-json-strings { "chrome":"81" }
syntax-optional-catch-binding { "chrome":"81" }
syntax-async-generators { "chrome":"81" }
syntax-object-rest-spread { "chrome":"81" }
syntax-dynamic-import { "chrome":"81" }
syntax-top-level-await { "chrome":"81" }
Using polyfills with `entry` option:
