Giter Club home page Giter Club logo

react-boilerplate's Introduction

React脚手架

Feature:

  • 支持 eslint ,预置一些规则

  • 配置了 babel7 及其他配置

  • 真正的 antd 按需加载

  • 预置 webpack 配置(包括开发和生产环境配置),包括了几个 常用的loader,terser

  • 支持 HMR

  • 使用2空格缩进

  • git commit 使用 AngularJS commit conventions

  • 使用 husky 保证提交都必须通过 eslintcommit 检查

  • 支持 less + css module

  • 支持一键生成Changelog

  • 支持自动打开浏览器窗口

  • 使用happypack加速

  • 启用React.StrictMode

  • 支持build相关报告,包括build产物分析图表,build耗时报告

使用方法

开始项目

先点击这里创建自己的项目,clone你的代码,进入目录之后

rm -rf .git
git init
npm i

记得修改 package.json 内的初始化信息

如果你不需要markdown预览组件,请自己 npm remove showdown

预览本示例项目

  npm i
  npm start

提交代码

  git add $yourfile
  npm run cz

生成changelog

  npm run changelog

使用husky

husky已经预先设置了常用的hook。原理:安装husky后,它在.git目录下生成一些hook script,当满足条件(比如pre-commit),它会查找.huskyrc内是否包含对应的配置,如果有就执行。本脚手架的强制eslint和 commit message检查就是这样实现的。因此,想自定义hook,可以自己在 .huskyrc内添加就可以了。

分析build结果

运行build之后,会自动打开一个分析页面,显示了最终产物的大小。build文件夹内还包含speedReport.txt(配置webpack.production.config.js可以改成其他格式),用来记录build耗时

注意

  1. 如果你使用antd的话,必须保留 src/antd/icon.js 。如果你需要使用图标库,请参照样例添加需要的图标 antd@4 已经优化了这里,手动优化暂时可以不用了

  2. 升级到1.7.0后,要先移除.eslintcache,然后重新npm run lint:fix。如果报告如下错误

TypeError: Cannot read property 'range' of null

则进行如下尝试

  1. showdown依赖低版本的mem,不需要md预览功能的,移除showdown即可解决安全警告

  2. momentjs太大了?罪魁祸首是这个

antd@4 优化了这部分,现在应该没有这个问题了

  1. 启用了React.StrictMode,要格外注意这里

  2. 暂时不要用css-loader@>3.2.0

react-boilerplate's People

Contributors

deemoding avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.