@500tech/babel-preset-react-app 中文文档教程
babel-preset-react-app
此软件包包含 Create React App 使用的 Babel 预设。
请参阅其文档：
- Getting Started – How to create a new app.
- User Guide – How to develop apps bootstrapped with Create React App.
Usage in Create React App Projects
使用此配置的最简单方法是使用 Create React App，默认包含它. 你不需要在Create React App项目中单独安装它。
Usage Outside of Create React App
如果你想在一个不是用Create React App构建的项目中使用这个Babel预设，你可以通过以下步骤安装它。
首先，安装 Babel。
然后安装 babel-preset-react-app。
npm install babel-preset-react-app --save-dev
然后在项目的根文件夹中创建一个名为 .babelrc 的文件，其中包含以下内容：
{
"presets": ["react-app"]
}
此预设使用 useBuiltIns 选项和 transform-object-rest-spread 和 transform-react-jsx，它假定 Object.assign 可用或已填充。
Usage with Flow
确保在根目录中有一个 .flowconfig 文件。 您还可以在 .babelrc 上使用 flow 选项：
{
"presets": [["react-app", { "flow": true, "typescript": false }]]
}
Usage with TypeScript
确保您在根目录中有一个 tsconfig.json 文件。 您还可以在 .babelrc 上使用 typescript 选项：
{
"presets": [["react-app", { "flow": false, "typescript": true }]]
}
Absolute Runtime Paths
默认情况下为导入启用绝对路径。 要改为使用相对路径，请将 .babelrc 中的 absoluteRuntime 选项设置为 false：
{
"presets": [["react-app", { "absoluteRuntime": false }]]
}
babel-preset-react-app
This package includes the Babel preset used by Create React App.
Please refer to its documentation:
- Getting Started – How to create a new app.
- User Guide – How to develop apps bootstrapped with Create React App.
Usage in Create React App Projects
The easiest way to use this configuration is with Create React App, which includes it by default. You don’t need to install it separately in Create React App projects.
Usage Outside of Create React App
If you want to use this Babel preset in a project not built with Create React App, you can install it with the following steps.
First, install Babel.
Then install babel-preset-react-app.
npm install babel-preset-react-app --save-dev
Then create a file named .babelrc with following contents in the root folder of your project:
{
"presets": ["react-app"]
}
This preset uses the useBuiltIns option with transform-object-rest-spread and transform-react-jsx, which assumes that Object.assign is available or polyfilled.
Usage with Flow
Make sure you have a .flowconfig file at the root directory. You can also use the flow option on .babelrc:
{
"presets": [["react-app", { "flow": true, "typescript": false }]]
}
Usage with TypeScript
Make sure you have a tsconfig.json file at the root directory. You can also use the typescript option on .babelrc:
{
"presets": [["react-app", { "flow": false, "typescript": true }]]
}
Absolute Runtime Paths
Absolute paths are enabled by default for imports. To use relative paths instead, set the absoluteRuntime option in .babelrc to false:
{
"presets": [["react-app", { "absoluteRuntime": false }]]
}
