Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

lcgc-react-scripts

0.0.3 • Public • Published

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 项目的支持
  • 模板项目的完善

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

Keywords

none

Install

npm i lcgc-react-scripts

DownloadsWeekly Downloads

1

Version

0.0.3

License

MIT

Unpacked Size

156 kB

Total Files

49

Last publish

Collaborators

  • avatar
  • avatar