GithubHelp home page GithubHelp logo

cmouseg / webframework Goto Github PK

View Code? Open in Web Editor NEW

This project forked from yllg/webframework

0.0 2.0 0.0 157 KB

写一个类似 阿里egg🥚的前后端通用脚手架🔧

JavaScript 91.09% HTML 7.57% CSS 1.34%

webframework's Introduction

WebFramework

自己写一个类似egg的前后端通用脚手架

运行

开发环境,npm run build:dev

生产环境,npm run build

!脚手架搭好,就可以开始尽情表演了

Image text

目录结构

Image text

用到的包及其作用说明

1.node后台用gulp编译打包

(避免用webpack打包node出现过于冗余代码)

(1)babel-plugin-transform-es2015-modules-commonjs,编译import等ES6语法
(2)cross-env ,跨平台的设置和使用环境变量NODE_ENV
(3)gulp-rollup,tree shaking 代码清理
(4)koa-simple-router, 路由中间件
(5)koa-swig, 渲染swig模板,koa v2.x需要co包配合。
(6)koa-static,设置静态资源文件
(7)log4js,配合ErrorHandler进行容错处理并打印错误日志。
(8)awilix,awilix-koa,实现IOC控制反转和DI依赖注入,
(9)babel-plugin-transform-decorators-legacy,翻译装饰器语法,使用装饰器语法 优雅的定义路由并设置路由守卫。

2.前端用webpack打包

(1)better-npm-run,更方便的运行webpack配置脚本
(2)lodash,函数式编程的库,克隆两份配置文件,防止开发环境和生产环境配置发生混淆。
(3)babel-loader:翻译前端ES6语法
(4)happypack: webpack好盆友,项目大时可明显提升webpack打包速度
(5)postcss,面向未来的下一代css,使用了下面两个
cssnext:忘掉sass,less,stylus这些旧的预处理器吧。
cssnano:像JS的tree shaking一样清理到无用的css,并进行css优化和压缩
(6)html-webpack-plugin,webpack中html文件创建的包,用它提供的钩子来扩展我们自己的一个webpack插件,将数据流中的css,js静态文件正确的插入到swig模板的正确位置。
(7)uglifyjs-webpack-plugin,生产环境一个超给力的压缩插件,
(8)copy-webpack-plugin,不需要处理的文件直接copy到build下

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.