[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20},"topics",[35,36],"user",{"_21":22,"_13":14,"_23":24,"_25":14,"_26":27,"_28":29,"_30":20,"_31":32,"_33":34},"loginname","xiadd","page",1,"limit",20,"total",2,"id","17486","avatar_url","https://avatars1.githubusercontent.com/u/8351437?v=4","githubUsername","create_at","2015-06-13 00:33:18.49","score",25,"topic_count","reply_count",3,"is_star",false,{"_21":54,"_38":22,"_39":40,"_41":55,"_43":56,"_45":57,"_47":34,"_48":34,"_31":58,"_49":59,"_26":57,"_52":60},{"_21":37,"_38":22,"_39":40,"_41":42,"_43":44,"_45":46,"_47":34,"_48":34,"_31":16,"_49":50,"_26":51,"_52":53},"28290","author_id","tab","share","content","这两天在看ts,也在入门中, 网上大部分教程都是前端配置ts开发调试,这个也有很多相当成熟的实践教程, 这篇文章主要是nodejs的ts配置, 说起来也是相当简单的, 不涉及任何ts的语法与概念, 同时也可以根据本文配置es6的nodejs开发环境(主要是模块部分).\r\n\r\n## ts-node的使用\r\n\r\n说起 babel-node 大家应该都挺熟悉了, ts-node是一个类似的工具,可以在不编译的情况的执行ts文件,方便我们开发, 当然是node环境下的.\r\n\r\n### 安装\r\n\r\n```\r\nnpm i -D typescript ts-node\r\n```\r\n\r\n创建app.ts文件:\r\n\r\n```ts\r\n//app.ts\r\nconsole.log(1)\r\n```\r\n\r\n调用命令`ts-node app.ts`(全局安装的情况下), 如果一切正常的话,我们应该可以看到想要的输出了.\r\n\r\n一直到上面都是常规话题, 没什么深入下去的意义. 下面讲到ts-node的调试\r\n\r\n### 调试\r\n\r\n根据[nodejs官网](https://nodejs.org/en/docs/inspector/) 我们知道nodejs的调试方法有下面几种:\r\n\r\n1. node-inspect 一个第三方开发的调试工具, 今天我们不涉及\r\n2. chrome 开发者工具, 下面会讲到\r\n3. vs code 今天的重点\r\n4. vs\r\n5. webstorm 也是相当方便的工具\r\n\r\n#### vs code的调试\r\n\r\n根据官网我们打开node的inspect模式(ts-node同样可以)`ts-node --inspect app.js`, 应该可以看到类似的的提示:\r\n\r\n![image](https://user-images.githubusercontent.com/8351437/31307824-1d895dea-ab31-11e7-8ee0-fa009b2ed002.png)\r\n\r\n这样表示已经可以进行调试了, 但是貌似不可以进行打断点之类的操作, 这个就要借助vscode了.\r\n\r\n打开vscode debug面板增加调试选项, 选择attach to progess:\r\n\r\n![image](https://user-images.githubusercontent.com/8351437/31307849-7b30ef94-ab31-11e7-8a05-934c828fd1d8.png)\r\n\r\n然后点击debug, 会弹出类似下面的弹窗:\r\n\r\n![image](https://user-images.githubusercontent.com/8351437/31307862-c41ccbb0-ab31-11e7-9c05-326525002abb.png)\r\n\r\n注意红框, 会有几个node进程, 选择带inpect的那个进程, 如果一切进行的正常的话就可以进行调试了:\r\n\r\n![image](https://user-images.githubusercontent.com/8351437/31307881-0c07b872-ab32-11e7-963c-dd5a594d6eb6.png)\r\n\r\n#### chrome 开发者工具\r\n\r\n这个更加简单, 在任意网页打开开发者工具, 我们可以看到如图\r\n\r\n![image](https://user-images.githubusercontent.com/8351437/31307898-45ed4da4-ab32-11e7-841e-40aece1b6987.png)\r\n\r\n点击node图标同样可以进行调试:\r\n\r\n![image](https://user-images.githubusercontent.com/8351437/31307925-b073aaec-ab32-11e7-86af-7153a64840d2.png)\r\n\r\n但是貌似不是很稳定, 经常崩溃, 而且windows上也有问题.\r\n\r\n最后是个示例: [https://github.com/xiadd/node-ts](https://github.com/xiadd/node-ts)\r\n\r\n感兴趣可以star","title","使用typescript开发调试nodejs","last_reply_at","2017-10-09 03:53:15.292","good","top","visit_count",10172,"2017-10-07 13:59:36.527","author",{"_13":14,"_23":24},"28698","2017年, vue, react, angular 已经占据前端的主流, 不得不承认这也是前端的未来发展方向. 但是后端渲染的开发方式仍然很常见, 不管是个人项目还是商业项目, 后端渲染搞起来真是糙猛快. 但是借着前端发展的东风, 后端渲染也有很大的改进空间. 这里就介绍一下我自己的实践经验: 前后端不分离的情况下实现热加载以及一定程度下的前端主导开发. 这里以koa为例, 但是仓库里也有django版. 有兴趣可以看下, 仓库地址在文末.\r\n\r\n## 效果图\r\n![gif](https://user-gold-cdn.xitu.io/2017/10/26/df10b5763c2b19867b81642ea6372c1c)\r\n\r\n## 原理\r\n\r\n原理说起来还是很简单的:\r\n\r\n1. 独立启动静态资源服务器打包生成资源列表(manifest)\r\n\r\n通过`webpack-manifest-plugin`插件生成manifest.json文件\r\n\r\n```js\r\nnew ManifestPlugin({\r\n writeToFileEmit: true,\r\n publicPath: 'http://localhost:5000/static/'\r\n})\r\n```\r\n\r\n文件结果如图:\r\n\r\n![image](https://user-gold-cdn.xitu.io/2017/10/26/07709c292ec77d745fb9d0dd1efe24f0)\r\n\r\n2. 服务器读取资源列表加载到模板文件中\r\n\r\n```js\r\napp.use(async (ctx, next) => {\r\n const manifest = await fs.readFile(path.resolve(__dirname, 'assets/bundles/manifest.json'))\r\n ctx.state = {\r\n static: JSON.parse(manifest.toString())\r\n }\r\n await next()\r\n})\r\n```\r\n这个中间件通过读去manifest.json将资源列表挂载到ctx.state(模板变量)中, 之后就可以直接在模板中引用静态资变量了\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n \r\n \r\n {{ title }}\r\n \r\n\r\n\r\n

Hello, World

\r\n \r\n \r\n\r\n\r\n```\r\n\r\n需要注意的是由于后端渲染的一般是多入口, 所以只需要在对应的模板中引入需要的入口文件.\r\n\r\n## 热加载\r\n\r\n热加载其实也有很多解决方案: browsersync, live reload 等等, 但是这些都是full reload 只是减少了f5的频率, webpack的热加载就方便很多了通过websocket(具体我也不清楚), 配置起来也很简单.\r\n\r\n在入口文件中加上\r\n\r\n```js\r\nhot: 'webpack/hot/only-dev-server',\r\ndevServerClient: 'webpack-dev-server/client?http://0.0.0.0:5000'\r\n\r\n/**\r\n完整版\r\nentry: {\r\n index: './assets/index.js',\r\n test: './assets/test.js',\r\n hot: 'webpack/hot/only-dev-server',\r\n devServerClient: 'webpack-dev-server/client?http://0.0.0.0:5000'\r\n},\r\n*/\r\n```\r\n\r\n插件中加上: `new webpack.HotModuleReplacementPlugin()`\r\n\r\n需要注意的有两点:\r\n\r\n1. extract-text-webpack-plugin 加上之后就无法hot reload, 开发配置不要加上这个插件\r\n\r\n2. 根据webpack的文档, 每个入口文件都需要加上下面一段代码才能实现 js的hot reload\r\n\r\n```js\r\nif (module.hot) {\r\n module.hot.accept()\r\n}\r\n```\r\n\r\n完整配置和代码这里就不贴了, 仓库地址(django部分代码在master分支): [https://github.com/xiadd/wepack-mutipage](https://github.com/xiadd/wepack-mutipage)\r\n\r\n原文地址: https://github.com/xiadd/blog/issues/11","webpack配置之后端渲染","2017-10-26 03:36:55.015",0,3515,{"_13":14,"_23":24}]