2018年1月

腾讯云 COS webpack 插件开源

今天想把一个老的 Yii2 项目改成比较时髦的前后端分离的开发模式,于是试用了 webpack,感觉还不错。

项目线上我是想直接把编译后的文件传到带 cdn 的对象存储上,因为服务器用的是腾讯云的 cvm,所以对象存储就顺便选择了 cos。

Github 上搜了下没有现成的 webpack 插件,不过有几个现成的七牛的,比较了一下发现 https://github.com/lyfeyaj/qn-webpack 这个项目的代码最简洁清晰,于是就在这个项目的基础上自己改出了一个 cos 的 webpack 插件并开源了出来:https://github.com/takashiki/cos-webpack

npm 发布包的步骤参考:手把手教你用npm发布一个包

下面是该插件的安装和使用方式:

前提

需要 Node 版本在 v4.0 以上,COS V4 以上(APPID 为 125 开头)

安装

npm i -D cos-webpack

使用方法

支持的配置项:

  • secretId COS SecretId
  • secretKey COS SecretKey
  • bucket COS 存储对象名称,格式为对象名称加应用 ID,如:bucket-1250000000
  • region COS 存储地域,参见官方文档
  • path 存储路径, 默认为 [hash],也可以指定 hash 长度,如: [hash:8]
  • exclude 可选,排除特定文件,正则表达式,如: /index\.html$/
  • include 可选,指定要上传的文件,正则表达式,如: /app\.js$/
  • batch 可选,批量上传文件并发数,默认 20

注: Webpack 的 output.publicPath 要指向 COS(或自定义的)域名地址

// 引入
const CosPlugin = require('cos-webpack');

// 配置 Plugin
const cosPlugin = new CosPlugin({
  secretId: 'my-secret-id',
  secretKey: 'my-secret-key',
  bucket: 'my-125000000',
  region: 'ap-chengdu',
  path: '[hash]/'
});

// Webpack 的配置
module.exports = {
 output: {
    // 此处为 COS 访问域名(bucket-1250000000.file.myqcloud.com) 加上 path([hash]/)
    publicPath: "http://bucket-1250000000.file.myqcloud.com/[hash]/"
    // ...
 },
 plugins: [
   cosPlugin
   // ...
 ]
 // ...
}

Ajax 跨域解决方案

document.domain

该方案只能适用于跨子域的情况,无法跨不同二级域名。

jsonp

比较常见的一种跨域解决方案,利用 <script> 标签可以跨域的特性实现 ajax 请求跨域。

服务端设置 CORS 头

这种方式多见于上传文件的服务器,比如图床、云存储等。

代理请求

一般前端开发人员使用 node 进行代理比较方便,也可以用 php 等,也可以直接用 nginx 做反代。

postMessage

这个 html5 中新增的 api 非常强大,不仅可以用作跨域,最重要的是还能实现跨窗口消息传递,现在很多 h5 游戏平台都是用这个 api 来实现自己的 js sdk 来和 cp 进行对接的。

参考文档:

ajax跨域,这应该是最全的解决方案了

SSH 客户端中 zsh/vim 主题显示乱码的解决办法

zsh 和 vim 之类的工具有很多比较漂亮的主题,但是这些里面用到了一些比较特殊的字体,需要字体支持 powerline 才行,比如 zsh 的 agnoster,windows 上用 xshell 或者 mobaxterm 连接时均有不同程度的乱码。

解决方案就是安装支持 powerline 的字体,字体下载可以到 https://github.com/powerline/fonts

参考链接:

http://pdalinis.blogspot.tw/2013/08/putty-powerline.html

https://morecomputerstuff.wordpress.com/2017/04/30/oh-my-zsh-agnoster-theme-windows-10-client/