Giter Club home page Giter Club logo

woshiqiang1 / fe-boilerplates Goto Github PK

View Code? Open in Web Editor NEW

This project forked from wx-chevalier/web-examples

0.0 2.0 0.0 17.05 MB

Lucid & Futuristic Production Boilerplates For Frontend(Web) Apps, React/RN/Vue, with TypeScript(Optional), Webpack 4/Parcel, MobX/Redux :dizzy: 多技术栈前端项目模板

Home Page: https://wxyyxc1992.github.io

License: MIT License

JavaScript 60.23% HTML 9.06% Vue 1.87% CSS 1.21% TypeScript 22.51% Shell 0.03% Java 0.38% Ruby 0.36% Objective-C 1.00% Dart 2.84% Python 0.29% Rust 0.23%

fe-boilerplates's Introduction

中文版本 | English Version

fe-boilerplate

fe-boilerplate 是笔者对于日常工作中的基于 React/Vue.js 技术栈与实践的收集(*部分模板修改自其他项目)与沉淀,dev-config/* 与 package.json 构成了基础的脚手架,支持最新的开发流程与默认的生产环境优化。

为了方便不同级别/熟练程度的开发者使用,笔者将模板尽可能地泛化为多个项目,包含了从入门级到生产环境,微前端等多个不同层次/复杂度的模板项目。其中,模板特性可能包括或不限于以下:

  • 技术栈支持:使用 ES6/ES7 语法、允许使用 CSS Modules、SCSS、Less(CSS Modules) 并且使用 PostCSS 进行自动 Polyfill、支持使用 styled-component 进行 CSS-in-JS 样式控制、使用 TypeScript 作为静态语言、使用 Jest 作为默认的测试框架;

  • 开发环境:使用 WebpackDevServer 部署开发服务器、支持组件热加载、使用 TS/Babel 进行代码转换、使用 ESLint 进行代码检测、使用 DllPlugin 作为开发环境下公共代码提取工具以优化编译速度;

  • 生产环境:使用 CommonChunksPlugin*(Webpack 4 中提供了 optimization 选项) 作为生产环境下公共代码提取工具、使用 Prepack & prepack-webpack-plugin 进行代码优化、使用 offline-plugin 添加简单的 PWA 特性增强;

  • 部署方式:支持独立部署(HashRouter)、支持服务端部署、支持服务端渲染;


TOC | 目录索引

Micro Frontend | 微前端架构

Bundler | 前端构建工具

Framework | 前端框架

  • react: 基于 React 的前端项目

    • webpack: 基于 Webpack 的生产环境项目模板
    • webpack-ts: 基于 Webpack & TypeScript 的生产环境项目模板
    • parcel: 基于 Parcel 的应用模板
    • parcel-ts: 基于 Parcel & TypeScript 的应用模板
    • jest: 基于 Jest 的单元测试与组件测试
    • rrv4: React Router V4 应用详解
    • graphql: GraphQL 客户端实例
    • umd: 可发布的 React 组件项目库模板
  • vue: 基于 Vue.js 的前端项目

  • redux: Redux 典型应用

  • mobx: MobX 典型应用

Mobile | 移动应用

Desktop | 桌面应用


延伸阅读

About

  • 子项目命名方式:主体-子关键字 混合项目命名方式:框架-语言/机制-工具

fe-boilerplates's People

Contributors

wx-chevalier avatar

Watchers

James Cloos 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.