lcgc-react-scripts
modified base on react-scripts, support multiple pages development with zero webpack config
Last updated 10 months ago by wealthworks .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install lcgc-react-scripts 
SYNC missed versions from official npm registry.

lcgc-react-scripts

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

react-scriptscreate-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?

webpackentry 是动态遍历 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: {}
}

Current Tags

  • 0.0.3                                ...           latest (10 months ago)

3 Versions

  • 0.0.3                                ...           10 months ago
  • 0.0.2                                ...           10 months ago
  • 0.0.1                                ...           10 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 3
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |