内建配置
@react-go/scripts
基于 webpack、ESLint、Babel、postcss 等,并已配置了大量、具有通用性的配置项。你可以先了解已内置的配置有哪些,以便于针对自身需求进行配置扩展。
入口文件
默认入口文件为 ./src/index.js
,默认模板文件为 ./public/index.html
。
输出目录
打包编译时,默认输出目录为 ./dist
,并且会将 ./public
目录下的文件原样复制到 ./dist
目录下,index.html
文件除外。
JavaScript
默认仅编译 ./src
目录下的 JavaScript 文件,Babel 配置使用 @babel/preset-env
和 @babel/preset-react
,并使用 @babel/plugin-proposal-class-properties
插件以支持新的类属性语法。
ESLint
内置 @react-go/eslint-config,本地开发和编译时均有效,无需单独安装,不支持自定义。你可以在 package.json
中添加如下配置,使编辑器能够读取到此配置:
@react-go/eslint-config
仅包含一些能帮你避免一些 Bug 的 ESLint 规则,代码样式(是否加分号等)的格式化建议使用 Prettier 完成。
CSS
默认支持 .css
、.scss
、.sass
文件,同时支持 CSS Modules,并且 ./src
下的样式文件会经过 PostCSS 处理,PostCSS 配置了 postcss-flexbugs-fixes
和 postcss-preset-env
,支持 Stage 3+ 的 CSS 语法。
通常导入 CSS 的方式为
import './styles.css'
直接导入,当使用import styles from './styles.css'
方式导入时会自动启用 CSS Modules。
环境变量
默认会读取 .env
和 .env.[NODE_ENV]
环境变量文件,并使用 webpack 的 DefinePlugin 将以 REACT_GO_
为前缀的环境变量注入的项目中,你可以在项目代码中通过 process.env.REACT_GO_xx
读取到。其中 NODE_ENV
在本地开发时为 development
,在打包编译时为 production
。
除了上述的 process.env.REACT_GO_xx
环境变量,还可以读取到 process.env.NODE_ENV
和 process.env.APP_ENV
。其中 APP_ENV
可用于区分你的项目运行环境,如开发环境、测试环境、线上环境等,默认值为 development
,start
和 build
命令均可通过 --app-env xx
方式传入任意值。
使用 APP_ENV
区分多种环境时,在 package.json 中配置示例如下: