webpack常用插件及其作用

webpack作为一个打包工具,其plugin(插件)机制在很大程度上扩展了其功能。本文总结了在开发中常用的一些插件及其作用。通过在webpack配置的plugins数组中添加插件的实例,我们便可以在webpack的编译过程中的某个生命周期调用该插件。另外webpack文档中也给出了丰富的插件集合,详情见webpack plugins

浅谈webpack的打包机制

webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图表(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。

webpack作为一个模块打包工具,不仅可以打包js文件,还可以打包其他非js文件。下文仅针对js文件,从 CommonJS 模块和 ES6 模块两种处理模块的方式对 webpack 的打包机制进行解释。

Vue2.4版本中新添加的$attrs以及$listeners属性使用

Vue v2.4 版本中新添加了 $attrs 以及 $listeners 属性。之所以要提到这两个属性,是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的情况下变得简洁,业务清晰。

JS中的异步处理

记得2015年看一些node的代码时,示例中往往会使用回调函数做一些异步处理,去年的时候看会发现大部分成了promise,当今年再看时发现大部分已经成了async/await。为什么js的异步操作解决方案更新的如此之快,每种方案的使用场景以及弊端是什么,下文中给出了介绍。以下均为自己的一些理解,描述如有偏差欢迎指正。

JS单例模式的一种应用

来自 segmentfault 的问答,关于js构造函数的返回值的问题的讨论。

Node中使用ES6语法

目前nodejs的高级版本对es6的支持越来越大,大部分的es2015的特性在node高版本中不需要babel转码就可以直接使用。涉及到对es2016以及es2017的一些特性的支持目前还不是很广泛,只能借助于babel的转码编译。如 async/await 特性,... 对象扩展运算符等。下文介绍了在部分特性无法得到支持的情况下,如何在node环境中使用es6语法。

更新: Node7 通过 --harmony_async_await 参数已经支持了async/await 特性。

关于CommonJS模块和ES6模块的区别

基于 Webpack+Vue 的单页面开发过程中,准备全面尝试拥抱 ES2015 规范,尝试一些新的东西。在进行实践的过程中,感受比较深的就是 ES6 的模块机制。之前 Node 环境下实现了 CommonJS 规范的模块机制,使用 require/module.exports 进行模块的同步加载。ES6 的模块机制是什么,为什么在已有了 CommonJS 模块规范的情况下又冒出来一个 ES6 的模块机制,两者本质上以及在使用过程中有什么不同,下面针对上述问题针对对应的案例进行了详细的解释。

Node中处理文件路径的几种方式对比

Nodejs中提供了几种处理路径的方式,包括:

  • __dirname
  • __filename
  • process.cwd()
  • ./
  • ../

笼统的说前三种代表了绝对路径,后两种为相对路径。其中究竟有什么区别,通过下面的例子给出答案。

hexo添加自定义页面

hexo是一个快速搭建静态博客的利器,目前很多同学都在使用hexo在github上部署了自己的静态博客,用于记录平时的技术心得。github上可以搜到很多的关于hexo的主题,如何在主题之外添加自定义的页面?比如,添加 照片墙 或者 实验室 等页面。目前发现添加此类页面有两种情况:

  • 主题内渲染,添加的模块仍然包含在该主题中,主题头部等信息依然存在,仅仅是在特定区域进行渲染
  • 完全页面渲染,在主题内点击对应的链接后,跳转到一个完全崭新的页面

接下来对两种情况进行分别说明。

Vue不同版本文档说明


以下内容翻译自Vue dist 目录下英文文档,旨在理解 Vue 在不同情况下引用的版本区别,对于 Vue 的应用和理解有一定帮助。