Github上的脚手架太多，大部分可能只专注于Web前端开发，比如流行的React生态中的create-react-app还有Vue生态Vue-cli，不过可能像我这样的全栈开发，一个只专注于前端开发的脚手架是不能满足所有需求的。我们可能需要开发更复杂的全栈JS项目，那么这里再介绍一个基于NodeJS的全栈开发框架koa-web-kit可能并不适合所有人，但至少多了一个选择。一些亮点?基于最流行的框架和库，包括但不限于Koa2、React、Bootstrap-v4（仅限CSS）、Webpack、ES6、Babel...？开箱即用的全栈开发经验？热加载函数HMR，bundle-size-analyzer分析依赖大小，模块之间的关系？异步/等待支持？SASS预编译器、PostCSS、autoprefixer支持？添加简单的API代理，无需繁琐的nginx配置？可以生成静态WebApp,?SSR(WIP)??一键部署到生产环境？长期维护……？服务器端框架的服务器端基于下一代NodeJSMVC框架koajs，开发人员依然是大名鼎鼎的expressjs的核心开发成员。koa支持最新的async/await语法，让你写出更好的异步代码。而且，Koa有更好的、更语义化的中间件机制，你可以专注于开发各种更小、更专注于特定功能的中间件，然后将它们组合起来形成一个强大的框架，而不是直接嵌入很多功能集成到koa的核心，让koa成为一个更轻量级的框架。任何现代的web应用程序都会有一个API层，可能用其他语言开发（例如java，go...），这些API可能部署在另一个域名上，再加上我们需要一个外部反向代理（nginx）的服务器配置，解决前端跨域问题。一般来说，这些都是运维配置的，这让你的前端开发环境的配置变得复杂且耗时。所以在koa-web-kit中，我们也预绑定了一个简单的API代理来加速你的前端环境配置。你只需要配置需要的api前缀指向对应的实际API地址即可。一个简单的例子如下：config={//...otherconfigs"API_ENDPOINTS":{//设置默认前缀"defaultPrefix":"/prefix",//e.ghttp://127.0.0.1:3000/prefix/api/login-->代理到-->http://127.0.0.1:3001/api/login"/prefix":"http://127.0.0.1:3001","/prefix2":"http://127.0.0.1:3002",}}所以你不需要单独配置你的反向代理，只需要输入一些简单的配置就可以了。一般来说，在生产环境中，建议配置一个反向代理，将你的api请求直接转发到后端，而不是直接发送到节点，再到后端，这样可能会让你的节点服务请求走得太远许多。实际情况以项目为准。那么日志服务对于一个服务器应用来说也是必不可少的。koa-web-kit还提供了基于著名异步日志库winston的简单日志服务，如：constlogger=require('./services/logger');logger.info(msg);logger.warn(msg);logger.error(msg);您可以根据不同的需要将自定义输出添加到不同的文件、数据库等。默认情况下，日志文件位于项目根目录的./logs文件夹中。一般来说，我们会优化和压缩前端资源文件（css、js、html...）来加快页面加载速度，但很少有人会考虑压缩节点端代码。在某些情况下，你不想让别人看到你将服务器端代码的节点端代码压缩也是必不可少的。在koa-web-kit中，我们还提供了一个构建脚本来压缩你的nodejs代码，干杯？。假设你需要动态模板渲染，除了静态html外加React渲染的内容，koa-web-kit默认使用Nunjucks作为模板渲染引擎，但如果你习惯其他模板引擎，安装你喜欢的库即可，版本引擎基于consolidate.js，因此您可以使用任何受支持的模板吗？对于ReactSSR（服务器端渲染），它正在开发中，但如果需要，您可以使用一些框架，如next.js。所谓全栈开发框架，应该有数据库集成吧？是的，那是必须的，但是为了让koa-web-kit更轻量，不局限于预加入数据库，现在的web开发，一切都需要模块化，这样你就可以很方便地npminstall任何你需要的数据库层库想要满足你的坚持需求。在另一种情况下，您的数据层服务可能是由另一个团队用另一种语言开发的。你只要调用API即可（就像上面的API代理配置一样），所以没有预先绑定的持久化库，根据你的需要安装即可。koa-web-kit的另一个很酷的特性是你可以用许多不同的方式设置你的应用程序环境变量。我们都知道每个项目都需要一个环境变量来设置不同的运行环境。比如在开发环境中，我们需要向开发地址发送API请求。在线部署时，需要配置API地址为在线地址；另一种情况是，在开发环境中，我们会把很多输出记录到控制台，但是到了生成的时候，我们需要去掉这些调试日志等等。。。还有很多第三方库比如React，会根据不同的NODE_ENV做不同的优化。所以环境变量的设置对我们的项目来说是非常重要的。在koa-web-kit中，你可以通过不同的方式设置你的环境变量：config文件夹下的app-config.js/app-config.js.sample，你可以将app-config.js.sample复制到app-config.js，然后为您的本地开发环境设置不同的变量。环境变量（EnvironmentVariables），当你运行一些脚本时，你可以使用命令行或者shell脚本来覆盖你本地配置文件app-config.js的配置。默认的config.default/dev(prod).js文件只有在你没有配置以上两种方式时才会使用。详情请参考koa-web-kit#ENV_Configuration。前端准备好了，终于到了前端开发部分。koa-web-kit使用社区最新的UI库和开发工具，让你的开发体验更好，包括：React-v16，目前最流行的UI库，强大的社区支持，你几乎可以找到任何你想要的功能（喜欢Vue.js？，可以看看vue-web-kit）。Bootstrap-v4，最流行的CSS/layoutFramework（只用到CSS部分，放心，没有jQuery）。拥抱ES6+，通过webpack和babel，我们可以使用最新的js标准来开发我们的应用程序，而无需关注浏览器的兼容性。新语法的编译会根据你配置的browserslist来处理.SASS/SCSS预编译器，包括PostCSS和autoprefixer无需关注浏览器厂商的css属性前缀，仍然基于browserslist；您可以添加任何您喜欢的CSS-in-JS方案作为您的主题/样式计划。生产环境部署当你完成前端和服务端的开发后，就可以部署到生产环境为你的用户提供服务了。使用koa-web-kit，部署过程会非常简单。通过一个简单的npm脚本就可以完成依赖安装、资源打包、节点服务启动的过程，也可以通过选项跳过一些步骤。npm脚本如下：:npmrundeploy，不加任何选项，完成过程，npmrundeploy--101，只构建资源文件，更多选项koa-web-kit#DeployBonusRound:Generateastatic站点虽然koa-web-kit是一个全栈开发框架。如果你不需要服务器端功能，你仍然可以只生成一个静态站点并将其直接扔到静态服务器上（GithubPages、Netlify等）。生成静态站点时，需要考虑前缀路径。在一些著名的静态站点生成器如Gatsby中，也有这方面的说明。比如需要部署在GithubPages上。项目根目录一般在http://user.github.io/project下，/preject这里是上面的前缀路径，所有的资源请求必须在/project下，否则可能会报404，koa-web中的配置-kit如下：{//optional，你的静态资产的cdn域如果你有"STATIC_ENDPOINT":"http://cdn.com",//optional,additionalprefixforyourcdndomain"STATIC_PREFIX":"/public/",//“APP_PREFIX”的尾部斜杠下面的详细信息）将是"/app1/""APP_PREFIX":"/app1",}那么如何在我们的代码中（比如在你的组件中）获取这个值呢？很简单，在你的组件中importenv.js://fullpath:"./src/modules/env.js"importenvfrom'modules/env';//->"/app1/public/"，加上额外的静态资产prefixconsole.log(env.prefix);//->"/app1/"console.log(env.appPrefix);//如果你的静态url不是由webpack加载器导入的，则连接它
