blog
blog copied to clipboard
huruji
红日初升，其道大光:sun_with_face::house_with_garden:请star或watch，不要fork
lerna 作为多个包依赖的管理解决方案，确实解决了很多痛点，我目前在工作和生活中已经大量使用了lerna，但同时也会遇到一些问题，发布失败后的问题是遇到比较频繁的问题，因此记录一下 `lerna publish` 主要做了以下几件事： + 检查从上一个 `git tag` 之后是否有提交，没有提交就会显示 `No changed packages to publish` 的信息，然后退出 + 检查依赖了修改过的包的包，并更新依赖信息 + 提交相应版本的 `git tag` + 发布修改的包及依赖它们的包 看上去非常理想，但是使用起来可能很蛋疼，往往出问题的可能就是最后一步，发布包的问题，有可能你的网络情况有问题，有可能你没有登录npm（包括公司内部的 registry ），如果你需要发布到指定的 `registry` 上，你可以在 `lerna.json`...
 JWT 是 Json Web Token 的缩写，是一种轻量级的用户与服务器信息传递规范，相应规范的标准可以在 [RFC 7519](https://tools.ietf.org/html/rfc7519) 查看，你也可以在网站 [jwt.io](https://jwt.io/)上看到更详细的介绍。 jwt 本质上是一个加密过的字符串，由header（头部）、payload（载荷）、signature（签名）三部分组成，并通过符号 `.` 对这三部分进行拼接，一个jwt类似于 `xxxxx.yyyyy.zzzzz` ### Header Header 部分描述了相应的 JWT 的类型和相应的签名算法，如下： ```json { "alg": "HS256", "typ": "JWT" } ```...
 ## code spliting 接下来说的 code spliting 都是指 dynamic imports （动态导入），不涉及如何设置多个入口起点问题 关于动态导入，有两种方法：一种是处于ES提案第三阶段的 [import()](https://github.com/tc39/proposal-dynamic-import)，另一种是 commonjs 草案的 [require.ensure](http://wiki.commonjs.org/wiki/Modules/Async/A)，这个只是个草案，并没有纳入规范，但是 webpack 利用这个实现了早期的动态导入。 以 `import()` 语法为例，测试用例如下： ```js // index.js import(/* webpackChunkName: "foo" */ './foo').then(({ foo...
 这是一个被很多人忽略的模板字符串的特性，在我的工作生活中反反复复出现了很多次，并且当我向一些大咖介绍这个特性的时候，发现其实他们似乎也忽略了这点。 模板字符串中我们使用 `${exporession}` 作为占位符，而作为字符串连接的语法糖是其最基本的用法，而带标签的模板字符串则是一种函数调用，这能够让模板字符串更加强大，拥有真正模板引擎的功能。 ```js var a = function (strs, ...args) { console.log(strs) console.log(args) } var name ='huruji' var age = 12 a `name: ${name}, age: ${age}` ``` 输出如下：...
 关于前端脚本异常监控的思考 --- ### 最简单的上报 这里讲的是如何高效合理的捕捉与定位问题，不涉及 pv、uv、埋点之类的业务监控 首先我们要明白一点，前端如何捕获错误，在代码中我们可以经常使用 `try...catch` 来捕获错误，但是 `try...catch` 无法捕获语法错误和异步错误，如下   所以 `try...catch` 不适合做全局的异常监听，当然对于已知的可能会发生的错误，这个时候主动上报还是有用的 这个时候我们要想到在 `window` 上监听 `error` 事件，监听 `error` 事件可以返回相应的错误信息、脚本的url、行号、列号、error对象，如下（具体可参考[https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onerror](https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onerror)）: ```js window.onerror = (message, source, line,...
 JSONP的原理就不细说了，就是利用script可以跨域的特点来实现跨域，首先我们考虑一个最简单的jsonp，就是简简单单创建script标签， 添加url的功能，如下： ```javascript function jsonp(url) { const script = document.createElement('script'); script.src = url; script.type = 'text/javascript'; document.body.appendChild(script); } ``` 此时我们使用服务端的代码如下： ```javascript const http = require('http'); const data = {'data':'hello'};...
 async await 从语法层面给人一种非常直观的方式，可以让我们避免 callback hell 与 Promise hell 。 ```js async function getUserInfo() { const id = await request.getCurrentId() const info = await request.getUserInfo(id) return info } ``` 但是每一步...
创建一个具有指定的命名空间URI和限定名称的元素： ```js document.createElementNS ``` https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElementNS
 chunk 可以简单理解为 code spliting 出来的包，如果代码没有 code spliting 那么基本上可以认为对应于所输出的 bundle，webpack 1.0的文档中将 chunk 分为的三种类型，如下：  目前官方文档中已经找不到这些描述了，/(ㄒoㄒ)/~~，不过可以在这两篇博文中看到比较详细的解释 [「前端」看懂前端脚手架你需要这篇webpack](https://github.com/ShowJoy-com/showjoy-blog/issues/7) [webpack 进阶](https://zhuanlan.zhihu.com/p/21318102) 我们在使用 webpack 的时候对于 chunk 比较关注的可能就是使用 code spliting 和写插件的时候，code spliting 这个话题留到之后说，现在主要聊一聊写 webpack 插件时和...
 虽然现在是 9102 年了，但是不得不面对的现实是仍然有大量的老旧的采用回调的方式的函数，如果你在业务开发中受不了了，那么就可以考虑一下 Promise 化你的 callback 调用 其实我们仔细想想，最简陋的方式就是用一个 Promise 包装一下，将 resolve 替换为 callback 传给原函数就可以了，如下： ```js const promisify = (fn) => (...args) => new Promise((resolve, reject) => { args.push(resolve) fn.apply(this,...