webpack简单插件开发

对插件的认识

官方解释：插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 loader 无法实现的其他事。

webpack 的插件有很多，有内置插件当然还有社区提供的插件，当然你自己也可以开发一个插件。社区的插件我们需要使用 npm 先进行安装，然后再引入使用。内置的插件在webpack.optimize对象上，我们可以直接使用。常见的内置插件

准备工作

文档

首先需要看下官方教程和 api 官方教程

简单介绍

TypeScript 扩展了JavaScript语法，任何已经存在的JavaScript程序，可以不加任何改动，在TypeScript环境下运行。TypeScript只是向JavaScript添加了一些新的遵循ES6规范的语法，以及基于类的面向对象编程的这种特性

优势

• 支持ES6规范：

  2015年发布的，它指出了未来一段时间内，客户端脚本语音的发展方向。

• 强大的IDE支持：

  体现在三个特性上：1.类型检查，在TS中允许你为变量指定类型。2.语法提示。3.重构。

  Read more »

修饰器

修饰器（Decorator）是一个函数，用来修改类的行为。这是ES7的一个提案，目前Babel转码器已经支持。本文参考阮一峰老师的文章。

环境搭建

目前es7还没出，要让es6支持Decorator就需要安装与配置Babel转码器的插件。

1 前言

1.1

像我们熟悉的 vue-cli，taro-cli 等脚手架，只需要输入简单的命令 taro init project，即可快速帮我们生成一个初始项目。在日常开发中，有一个脚手架工具可以用来提高工作效率。

1.2 为什么需要脚手架

• 减少重复性的工作，从零创建一个项目和文件。
• 根据交互动态生成项目结构和配置文件等。
• 多人协作更为方便，不需要把文件传来传去。

JS简写技巧总结

1 三目运算符

2 循环语句

循环的时候采用foreach方法之类，尽量不用for循环。

关于图片加载是否支持webp格式

• js前端检测：

利用img标签加载时候触发的onload以及onerror事件，判断图片是否具有宽高，若有，则表示支持WebP，否则，就不支持。

• 后台判断：

判断浏览器的请求头Accept是否支持WebP。

具体实施方案：

关于Date对象的使用经验

YY-MM-DD

JSON.stringify( new Date()  ).replace(/T.*|"/g, "")
//2017-07-06

yyyy-mm-dd HH:mm:ss:fff

JSON.stringify(
        new Date()
      ).replace(/T|"|\..*/g," ").trim()    //2017-07-06 03:25:11

今天工作遇到此问题，主要是根据对象某属性去除重复的。

数组根据对象属性去重

• 1采用lodash的uniqBy方法
• 2 reduce

数组

目录

• 1 数组的定义
• 2 数组对象属性
• 3 数组对象的方法
  • concat(),pop(),join(),push()
  • reverse(),shift(),unshift(),slice()
  • splice(),toSource(),toString(),sort()
  • toLocaleString(),valueOf()
• 4 es6数组新增
  • Array.from(),Array.of()
  • copyWihin(), fill()
  • find()和findIndex()
  • entries(),keys(),values()
  • includes()
• 5 数组的空位

1.入门

1.1 安装使用

$ npm install vue-router --save-dev

1.1.1 使用vue-cli搭建