那些最近工作中遇到的插件(上个世纪版)

Posted 2020-12-01 newttt

es5-shim

　　es5-shim.js 是指在模拟不兼容es5语法的浏览器, 典型的ie 6/7/8浏览器

extract-text-webpack-plugin

　　他会将所有required的*.css模块抽取到分离的CSS文件, 所以你的样式不会内联到JS bundle, 而是在一个单独的CSS文件, 如果你的样式文件很大, 这样会提速, 因为CSS bundle和JS bundle 是平行加载的

使用

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}
file-loader
　　安装 npm install -S file-loader
　　用法 默认情况下,生成的文件的文件名就是文件内容的MD5哈希值并会保留所引用资源的原始扩展名
　　webpack.config.js
　

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: ‘file-loader‘,
            options: {}
          }
        ]
      }
    ]
  }
}

　生成文件file.png, 输出目录并返回public URL

　　　　"/public/path/0dcbbaa7013869e351f.png"

JSZip
　　jszip是一个用于创建 读取和编辑.zip文件的javascript库, 且API的使用也很简单
　安装 npm i jszip
　官方实例: 

var zip = new JSZip();　　　　　　　　　　　　　　// 创建一个JSZip 实例
zip.file("Hello.txt", "Hello World\n");　　　　　// 使用.file(fileName,fileContent) 添加一个txt 文件
var img = zip.folder("images");　　　　　　　　　// 使用.folder(folderName) 添加一个文件夹
img.file("smile.gif", imgData, {base64: true});　　// 使用.file(fileName,fileContent,,{base64:Flag}) 在文件夹下添加一个图片文件
　　　　　　　　　　　　　　　　　　　　　　　　　　// fileContent可以是File文件也可以是Blob二进制数据

zip.generateAsync({type:"blob"}) 　　　　　　　　　// 生成一个zip 文件 type:"blob" 压缩的结果为二进制, 可用作文件上传
.then(function(content) {　　　　　　　　　　
    // see FileSaver.js
    saveAs(content, "example.zip");　　　　　　　　// 直接在浏览器达成example.zip包并下载, saveAs依赖的js是FileSave.js
});

Koa 基于Node.js平台下一代web开发框架