lcgc-react-scripts

该 npm 包，是在 react-scripts 的基础上修改的。

react-scripts 是 create-react-app 里面的一个依赖包，用来封装 webpack 的一些配置，给开发者直接提供一个 零webpack 配置的环境。

lcgc-react-scripts 则是在 react-scripts 的基础上，修改 webpack 的一些配置，把项目变成支持 多页面开发。

如果 react-scripts 更新时，可以升级下该脚手架, 当前对应 [email protected]

如何使用

# 生成项目脚手架
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

# 搞定

集成功能

1. postcss-px2rem , 自动把 px 转成 rem，默认基准为 16px
2. antd-mobile 按需加载功能
3. less/css-module 解析
4. 子项目可以用过项目根目录下的 config.js 来进行一些构建的配置

TODO

• [ ] 增加 TypeScript 项目的支持
• [x] 模板项目的完善

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: {}
}