今天在看到 create-react-app 仓库时，在其安装方式上看到这样一条指令，一脸懵逼，这是什么？

1
2
3

npx create-react-app my-app
cd my-app
npm start

nvm、 nrm、 npm、npx， 类似的名词屡见不鲜，npx 到底是什么？

又是忙碌的一年，忙碌到已经很久没有在此更新文字。终于在年尾处获得喘（反）息（思）的时间。借此地记录、总结、反思即将过去的一年。

以 vue 作为开发技术栈的前端开发者，往往会配合前端构建工具，进行项目的工程化管理。比如，大家常用的 vue 全家桶 + webpack 的方案进行一些中大型前端项目的开发。配合 webpack 后，vue 的组件化优势更加明显，我们可以通过单文件的组件化开发方式，在工作实践中搭建前端页面，从而提高开发效率。

Icon，在界面设计中，具有指代意义的图形符号。在前端开发中，图标往往由 UI 设计给出，然后经前端开发人员在 html 中使用。Icon 的设计和使用在近几年的发展中，也经历了由当初的 img 方案 到现如今的 svg 方案。下文将从 Icon 的发展历程以及到现如今的 svg sprite 技术给出具体的介绍。

最近踏上了学习使用 React Native 进行客户端开发的征途，因为之前的技术栈一直是 Vue, 在大致看了一下React Native 的相关介绍后，感觉有必要首先学习一下ReactJS。再看过相关文档后，以 CNode 社区的 API 上手体验了一下 React 的组件化开发方式，见 cnode-react-App。之后在边看文档边 Google 的过程中，完成了人生中第一次客户端开发。下文中将给出以 CNode 社区为原型进行React Native 开发过程中遇到的问题以及相关思考。

vue单文件的开发过程中，在单文件模版中可能会涉及到文件路径的处理，比如 <img>, style 中的 background 的处理等。下文中讨论了几种不同场景下的 <img> 的 src 处理，解释了在使用 vue+webpack 的开发过程中如何正确的引用静态资源（比如图片的处理）。

offsetTop，offsetLeft，clientHeight，clientWidth，scrollHeight…等等属性如果没有特殊的体会，往往看一遍忘一遍。下文中系统的总结了以上几种计算页面元素大小的属性的性质和区别。

HTTP cookie(web cookie, browser cookie)是服务器发送给客户端浏览器的数据片段。客户端浏览器将保存这段数据并在下次访问同一个服务器地址时带上这段数据。通常，它被用来识别两次请求是否来自同一个浏览器，保持用户的登录状态。比如，它为无状态的HTTP协议记录了状态信息。

webpack是目前被大家广为使用的模块打包器。从命令行输入webpack或者在package.json的npm scripts中配置webpack脚本都可以使用webpack。虽然效果是一样的，但是两者有区别吗？最近在阅读源码的过程中发现了这个事情，原来两者是有区别的。

阅读源码的正确姿势在大致了解该工具库如何使用之后，抱着知其所以然的目的去了解其实现。在几个vue单页应用的工程中应用了webpack作为模块的编译和打包工具。通过vue-cli的webpack模板可以一键傻瓜式的快速搭建单页应用的开发原型。在vue-cli内部的webpack模板帮我们提前写好了webpack的一些配置，让开发人员将精力集中在内容的开发上，而非打包工具的配置上。这一点对于刚接触webpack的开发人员来说，无疑节省了大量的精力。熟悉webpack的常用配置以及其内部运行机制，有助于我们对整个前端项目有更好的把控。