0.0.3 • Published 5 years ago
lcgc-react-scripts v0.0.3
lcgc-react-scripts
该 npm 包,是在 react-scripts
的基础上修改的。
react-scripts
是 create-react-app
里面的一个依赖包,用来封装 webpack
的一些配置,给开发者直接提供一个 零webpack
配置的环境。
lcgc-react-scripts
则是在 react-scripts
的基础上,修改 webpack
的一些配置,把项目变成支持 多页面开发。
如果
react-scripts
更新时,可以升级下该脚手架, 当前对应react-scripts@2.1.1
如何使用
# 生成项目脚手架
npx create-react-app --scripts-version lcgc-react-scripts project-name
# 进入项目目录
cd project-name
# 运行项目
npm start
# 构建项目
npm run build
如何新增页面
在同一个目录下,创建一个同名的 pug 和 jsx 文件
WHY?
webpack
的 entry
是动态遍历 src
下后缀为 jsx
的文件, 而如何把 webpack 构建的文件注入到对应的 html
里面呢?
这个就根据项目里面的 config.js
中的 injectCheck
方法来判断。 默认为 pug 文件名、路径和 jsx 文件名、路径一样就会自动注入到 生成的 html 中
# eg
src/demo/index.pug src/demo/index.jsx
# 1. src目录下,新建一个 demo 目录
# 2. demo 目录下 新建一个 demo.pug
# 3. demo 目录下 新建一个 index.jsx
# 搞定
集成功能
- postcss-px2rem , 自动把 px 转成 rem,默认基准为 16px
- antd-mobile 按需加载功能
- less/css-module 解析
- 子项目可以用过项目根目录下的 config.js 来进行一些构建的配置
TODO
- 增加 TypeScript 项目的支持
- 模板项目的完善
CHANGE LOG
2018-11-05 12:01:05
新增 config.js
可以快速对构建进行一些简单的配置
module.exports = {
// 入口目录, 默认 src
inputPath: '',
// 构建目录 默认 build
outputPath: 'dist',
// px 转 rem 基准
basePixel: 16,
// 别名
alias: {},
// webpack 外部引用变量
externals: {},
// webpack-dev-server 代理配置
proxy: {}
}