lukefan (Luke Fan)

webpack 打包，怎么将体积降下来？

lukefan — Sun, 07 Feb 2021 15:27:34 +0800

我的应用里面，使用了 react、apollo graphql、jQuery、bootstrap 等等一大堆的库，没多少代码，webpacker:compile 出来的包，就 1.6M 了。怎么调整，可以页面通过 cdn 调用各种库，只将自己的代码打包，并压缩到尽可能小呢？

通过 js 实现的方法

lukefan — Mon, 25 Jan 2021 18:19:32 +0800

以前写了一个美剧下载站的应用，遇到了一个尴尬的问题。所有的 torrent 文件，都存放到了七牛云存储的 cdn 上，链接上去之后，每次点击，浏览器会在新窗口中将 torrent 作为文本文件直接打开。后来发现，有一个 H5 的标记，可以写，浏览器收到这种标签，就知道要用什么文件名来下载文件。测试了几次，发现没有效果。再仔细看了看文档，这里面有一个限制，url 必须是本站的地址，不能是站外的地址。于是在网上找了一下，最后发现了一种还算简单地处理方法。用 fetch 直接将远端的 url 作为 blob 拉过来，然后通过 window.URL.createObjectURL 函数来生成一个临时的本地地址，再下载，然后注销掉临时本地地址。代码如下，没有用 torrent，用了一张图片，点击直接下载而不是打开：

<button onClick={(e) => {
          const url = "http://5b0988e595225.cdn.sohucs.com/images/20181229/39193e04345340818c0a5a0345f9d107.jpeg"
          fetch(url, {responseType: 'blob'}).then((response) => {
            return response.blob()
          }).then((blob) => {
            let bl = new Blob([blob], {type: "image/jpeg"})
            var a = document.createElement('a')
            a.href = window.URL.createObjectURL(bl)
            a.download = 'a.jpg'
            a.click()
            window.URL.revokeObjectURL(a.href)
          }).catch((e) => {
            console.log("Oops, error")
          })
        }}>download</button>

graphql 的 mutation 参数搞不明白了

lukefan — Fri, 01 Jan 2021 19:20:45 +0800

以前写过一些 graphql 的小练习，只用过 query，这是第一次用 mutation 去尝试更新数据。

我使用的是 gem 'graphql', '~> 1.11.6'

使用 rails g graphql:mutation Add_Person

创建了相关文件，然后去修改 add_person.rb

module Mutations
  class AddPerson < BaseMutation
    # TODO: define return fields
    # field :post, Types::PostType, null: false
    field :person, Types::PersonType, null: false

    # TODO: define arguments
    # argument :name, String, required: true
    argument :name, String, required: true
    argument :age, Integer, required: true
    argument :description, String, required: false

    def resolve(name: , age: , description: )
      person = Person.create!(name: name, age: age, description: description)
    end
    # TODO: define resolve method
    # def resolve(name:)
    #   { post: ... }
    # end
  end
end

遇到的问题是：

输入的参数，只有一个 AddPersonInput 类型的，叫做 input 的参数。我定义的 name、age、description 什么的都没有了。这是怎么个玩儿法？如果生写，就会报错，说是 input 定义了，但是没有填写。

在网上查了一下，没有看到更多的东西了。

另外，我看到网上的一些例子里面定义的 Type，都是继承自 Node，而我是用 rails g graphql:object 做的，所以都是继承自 object。不知道有什么差异。

mongoid、graphql 环境下，求推荐一种安全认证方式

lukefan — Tue, 29 Dec 2020 19:52:10 +0800

业余程序员，想要做一个基于 mongoid 和 graphql 的服务端。然后用 react 和 flutter 做 web 和移动的前端。想要找一种认证方法，可以让用户登录，并只为认证用户提供服务。有什么比较简单的方案吗？

尝试了 graphql_devise，改到 mongoid 下，就各种错误。 graphql_auth，还没看明白。

尝试使用 cancancan，数据是存在什么地方的啊？

lukefan — Fri, 25 Dec 2020 17:07:47 +0800

尝试使用 cancancan 加入了： gem 'cancancan' gem 'cancancan-mongoid' 执行了： bundle install rails g cancan:ability

然后呢？ user.admin？这个 admin 是存在什么地方的？包括哪些 role 信息是存在什么地方的？是不是我少做了什么？

稍微折腾了一下 FontAwesome

lukefan — Fri, 25 Dec 2020 14:43:53 +0800

作为一个将编程作为业余爱好的老程序员，折腾一下前端技术，实在是比较痛苦的过程。前几天尝试着将老版本的 ruby on rails 程序升级上来的过程中学习了一下 webpack 和 react。然后就尝试着将 jquery 和 bootstrap 搞进去。于是参照了：@syutran 的新手问题 rails 6 boostrap 尝鲜中的代码。唯一差别的是，将 NavBar 的部分，搞到了一个 react 的组件中，这个过程中需要将所有的 class=替换成了 className=，将 tabindex 替换成了 tabIndex。没有问题。后来发现里面有个问题，就是 fontawesome 的引用出错了，文档中也说了这个没搞明白，于是我就自己试验了一下。

这种字体图标，一共尝试了三种方式：

1、直接从 FontAwesome 官网上注册，然后生成了一共 kit 的链接，在 app/views/layouts/application.html.erb 中做引用可以直接通过标记引用各种图标了这种方式据说是最快的（有 cdn 在工作），不过好像免费方式的调用次数是有限制的，具体没看

2、通过font-awesome-sass 这个 gem 来实现。先在 Gemfile 中添加

gem 'font-awesome-sass', '~> 5.15.1'

做 bundle install 然后修改 app/assets/stylesheets/application.css 先将其改名为 application.css.scss 然后添加

@import "font-awesome-sprockets";
@import "font-awesome";

就可以工作了。而且还可以通过 icon 这个函数，直接在 erb 文件中输出图标。

<%= icon('fas', 'flag') %>

不过这个方法有一个讨厌的地方，也是最后我舍弃了这种方式的主要原因。我将代码：

@import "font-awesome-sprockets";
@import "font-awesome";

添加到了 app/javascript/styles/application.scss 中，然后再/app/javascript/packs/application.js 中引用

import "../styles/application"

会报错，font-awesome-sprockets 文件找不到，也不工作。为了后面所有的前端代码都放在统一的地方 app/assets 里面不再添加代码，这种方式被舍弃了。

3、使用react-fontawesome 首先先读官方文档作为免费用户，先添加各种免费库

yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
yarn add @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons

然后就是在 React 中直接用组件来显示图标，这个过程中有一个比较麻烦的就是任何图标在调用之前，先要去做 import。

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

稍微简单一点儿的方法是，先引用一堆，并加入到一个库中，然后再在不同的组件中调用注册：

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee)

调用：

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Beverage = () => (
  <div>
    <FontAwesomeIcon icon="check-square" />
    Your <FontAwesomeIcon icon="coffee" /> is hot and ready!
  </div>
)

调用

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Showcase = () => (
  <div>
    <FontAwesomeIcon icon={['fab', 'apple']} />
    <FontAwesomeIcon icon={['fab', 'microsoft']} />
    <FontAwesomeIcon icon={['fab', 'google']} />

    <FontAwesomeIcon icon="check-square" />
    With Coffee Checked, these companies always know their coffee is hot and ready!
  </div>
)

前面引用并加入到 library 中的 fab 是品牌图标库中的所有 fab 图标。引用一次之后，就都可以调用了。这里面引用的格式我自己也有点儿晕，如果是直接 import 进来的图标，比如 import { faCoffee } from '@fortawesome/free-solid-svg-icons' ，那么调用的时候最好用如果是在 library 里面 add 过的，直接用也是可以的。如果是一次引入了一堆的那种情况，则需要用来调用。

这里面还有一个问题，加载了这种方式之后，是不工作的。需要再加上一段代码：

import { dom } from '@fortawesome/fontawesome-svg-core'

dom.watch()

才可以让工作起来。不过我没太搞清楚这个代码的作用域是什么样的。并不是每次都灵。

最终，因为想要用新的 rails6。各种前端的东西，准备交给 react 来搞定，所以选择了 react-fontawesome 的方式。

顺便说一下，我的 react 并不是直接上来就

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello name="React" />,
    document.body.appendChild(document.createElement('div')),
  )
})

生猛开干的。而是使用了 rails_react 的 gem 包，然后在 erb 文件中写<%=react_component("ComponentName") %>的方式来搞的。这种方式好像还可以服务端渲染，但是具体能够有什么差异，我也没太搞明白。

bosonnlp 好像停止服务了，调用百度的 api 总是不对，业余程序员求教

lukefan — Fri, 16 Oct 2020 12:15:04 +0800

我有一个小应用，用 ruby on rails 去爬一些电视剧资源原来是使用 bosonnlp 的 api 来计算美剧标题和简介中的关键词

最近发现 boson 好像是停止服务了于是尝试使用 baidu 的 nlp api

因为是业余程序员，所以先在网上抄了一段代码：

可以 post 到 baidu 的那些 https 的网址上

require 'json'
require 'net/https'
require 'open-uri'

#url：对应的https请求
#toSend：对应的参数{:name => 'lzy'} 形式
   def send_post(url,toSend)
    uri = URI(url)
    http = Net::HTTP.new(uri.host, uri.port)
        if uri.scheme == "https"
            http.use_ssl = true
            http.verify_mode = OpenSSL::SSL::VERIFY_NONE 
        end
    req = Net::HTTP::Post.new(uri.path, initheader = {'Content-Type' =>'application/json'})
    req.set_form_data(toSend)
    res = http.request(req)
    return JSON.parse res.body
    end

然后参考百度说明：https://ai.baidu.com/ai-doc/REFERENCE/Ck3dwjhhu 获取 access_token

params = {}
params[:grant_type] = 'client_credentials'
params[:client_id] = 'client_id'
params[:client_secret] = 'client_secret'
send_post 'https://aip.baidubce.com/oauth/2.0/token', params

成功获取了 access_token 下一步需要提取关键词了，就怎么都不对了。依据百度的说明：https://ai.baidu.com/ai-doc/NLP/7k6z52ggx

代码如下：

params = {}
params[:access_token] = "#{access_token}"
params[:title] = 'iphone手机出现“白苹果”原因及解决办法，用苹果手机的可以看下'
params[:content] = '如果下面的方法还是没有解决你的问题建议来我们门店看下成都市锦江区红星路三段99号银石广场24层01室。在通电的情况下掉进清水，这种情况一不需要拆机处理。尽快断电。用力甩干，但别把机器甩掉，主意要把屏幕内的水甩出来。如果屏幕残留有水滴，干后会有痕迹。^H3 放在台灯，射灯等轻微热源下让水分慢慢散去。'
send_post 'https://aip.baidubce.com/rpc/2.0/nlp/v1/keyword', params

得到的结果却总是：{"error_code"=>100, "error_msg"=>"Invalid parameter"}

不知道我是差了哪一步？请大家帮忙指点一下。

最近在用 VS Code 玩儿 Flutter，在跑 Ruby on Rails 的时候总觉的非常不顺手

lukefan — Wed, 11 Mar 2020 10:14:27 +0800

有没有 vscode 玩儿 ruby on rails 的指南？还是这东西就不适合 ruby on rails？

发个牢骚，刚刚被 CarrierWave 给玩儿了一下

lukefan — Fri, 06 Mar 2020 17:53:37 +0800

我使用 mongoid，用 carrierwave 存储信息。前面犯二，将一个图片格式的信息，通过 embed 嵌入表的形式存储了。每次做操作的时候都非常痛苦。今天下决心将所有的数据，重新导到了外面，变成了一个独立的表，从 embeds_many，变成了 has_many 结果发现，所有的图片都取不出来了。还为此打电话去七牛。

各种方法都试了一遍，最后突然想起来，carrierwave 的路径名，是自己生成的。数据库里面只有一个字段，就是最终的文件名。

def store_dir
  "#{mounted_as}/#{model.id}/"
end

uploader 模块中有上面这个函数。我重新倒了一遍数据库，model.id 变化了。于是原来存储的所有文件，路径都错了。

还在折腾中。应该问题不大了。

切忌，尽量少在 mongid 里面使用嵌入表，查询修改都很麻烦。在使用 carrierwave 的时候，各种文件名，都是计算出来的。比如远程的 url，就是路径加上数据库字段里面存储的文件名。如果有 avatar 之类的图像版本，就再把这个前缀加到文件名里面去。就是这样神奇。

一直希望可以在 mongoid 里面使用 ActiveStorage，不过这么长时间了，好像一直都没有人去折腾。

carrierwave 在备份的数据库上，无法获得 url

lukefan — Tue, 18 Feb 2020 15:30:46 +0800

carrierwave 用了一段时间通过 mount_uploader :picture, PictureUploader 工作。信息是存在数据了中 picture_filename 字段里面，然后再配合着相关的云端配置来获取正确的 url 我现在出现了一个奇怪的问题，我把一个数据库迁移到了一个新的应用中，并还原的代码，picture_filename 字段里面的内容也是正确的。但是不知道为什么，在取 picture.url 的时候，返回的永远是 nil。检查了各处代码，都是照着原来可以工作的代码复制的，包括 config/initializers/carrierwave.rb /app/uploaders/picture_uploader.rb 但是原来的数据就是读不出来。数据在数据库里面的 picture_filename 里面，可以看到。就是在命令行就读不出来。在原来的应用中没有问题，可以使用。

不知道影响 carrierwave 还有哪些因素。

业余程序员，想要找一个完整的 GraphQL 的教程和案例

lukefan — Sun, 09 Feb 2020 18:03:21 +0800

我现在只能算是一个业余程序员了。想要找一些 GraphQL 完整的教程和案例。网上很多好像都是一些 get start 之类的东西。详细的，也多是 nodejs 的，不是 rails 的。我现在可以建立简单的 graphql，但是每次可以返回一个记录。但是返回多个记录，分页，查询，修改，登陆相关的，还不太会玩儿。本站的一些相关帖子，使用的版本太旧，参考价值已经降低了。

请多多帮忙。

field :person, PersonType, null: true do
    argument :id, ID, required: true
end

def person(id:)
    Person.find(id)
  end

  field :people, Types::PersonType, null: false

  def people
    ::Person.all
  end

我照着网上的例子，把 query 写成这样。 curl -XPOST -d 'query={person(id:6) {id name age desc}}' http://localhost:3000/graphql 可以工作

curl -XPOST -d 'query={people {person{name}}}' http://localhost:3000/graphql 就出不来了。

Ruby-vips 继续，尝试一了下 carrierwave-vips

lukefan — Sun, 31 Mar 2019 20:42:57 +0800

在 Gemfile 中添加：

gem 'carrierwave-vips'

然后在 uploader 中添加：

include CarrierWave::Vips

各种 resize，version 和原来没有什么差异，这里主要说一下添加水印，也就是 watermark

process :make_watermark => Rails.root.join('film.png')
def make_watermark(watermark)
  manipulate! {|img| img.composite(Vips::Image.new_from_file(watermark.to_s).gravity('south-east', img.width, img.height), :over)}
end

这里有一个小坑，Rails.root.join 返回的是一个 pathname 而不是简单地 string。mini_magick 是可以认可这种形式的，但是 vips 不行，所以需要在 new_from_file 的参数里面加上 to_s 的 method。

趟过了这个坑，一行搞定。

在 uploader 中，如果需要对图像进行相对比较复杂的处理，则需要使用到 manipulate! 方法。可以取出 image 进行操作。

Ruby-vips 下通过 composite 进行 watermark 测试

lukefan — Sun, 31 Mar 2019 20:41:33 +0800

最开始处理图像都是使用 rmagick，后来说是 rmagick 内存泄漏，就开始使用 mini_magick。最近，看到 active_storage 里面提到了一种新的图像处理库，vips。

于是打开看了看，发现 vips 的效率奇高，基本上比 mini_magick 快上很多。所有 vips 的 github 库，都写着 benchmark，各种速度比较。于是就拿过来玩耍了一下，测试了一下水印。

composite 函数，就是合成。基本流程应该是这样的：

require 'vips'
img = Vips::Image.new_from_file 'DSC00536.JPG'
img = img.resize 500.0 / img.width
logo = Vips::Image.new_from_file 'film.png'
logo = logo.gravity 'south-east', img.width, img.height
img.composite(logo, :over).write_to_file 'watermarked.jpg'

这里面，需要注意的是 composite 中的参数，blend_mode 具体的解释如下： https://github.com/libvips/ruby-vips/blob/master/lib/vips/blend_mode.rb

下面是相关的各种实验数据附件：原始图片：水印的 logo：以及各种 blend_mode 的结果： :clear - where the second object is drawn, the first is removed :source - the second object is drawn as if nothing were below :over - the image shows what you would expect if you held two semi-transparent slides on top of each other :in - the first object is removed completely, the second is only drawn where the first was :out - the second is drawn only where the first isn't :atop - this leaves the first object mostly intact, but mixes both objects in the overlapping area :dest - leaves the first object untouched, the second is discarded completely :dest_over - like :over, but swaps the arguments :dest_in - like :in, but swaps the arguments :dest_out - like :out, but swaps the arguments :dest_atop - like :atop, but swaps the arguments :xor - something like a difference operator :add - a bit like adding the two images :saturate - a bit like the darker of the two :multiply - at least as dark as the darker of the two inputs :screen - at least as light as the lighter of the inputs :overlay - multiplies or screens colors, depending on the lightness :darken - the darker of each component :lighten - the lighter of each component :colour_burn - darken first by a factor of second :colour_dodge - brighten first by a factor second :hard_light - multiply or screen, depending on lightness :soft_light - darken or lighten, depending on lightness :difference - difference of the two :exclusion - somewhat like :difference, but lower-contrast

被 Google Cloud Storage 搞得晕头转向

lukefan — Tue, 19 Feb 2019 12:45:44 +0800

开了 google cloud 账号，领取了 google 的 300 美金测试金。然后尝试 google cloud storage，各种不对。总是连不上。今天测试了一下，如果是在 google cloud 的云主机上，各种操作都是没有问题的。 bucket 需要单独授权，这个提示很清晰，并不难搞定。

最终得到的结论是：在国内电脑上，即使处于翻墙状态，google cloud 的认证也会出现连接失败的情况，还不知道怎么解决。

有人知道 gcloud 的存储怎么配置吗？

lukefan — Fri, 01 Feb 2019 15:52:32 +0800

我尝试使用 carrierwave-google-storage，将内容上传到 google 云上。

我已经使用了科学上网手段。

对了现在有每人 300 美金的一年免费账号，不用白不用。

根据提示，我去创建了 keyfile。然后怎么都连接不上。

我选择的角色是对象存储管理员和存储管理员，两个都连不上。

也没有地方看到任何提示信息，不知道有没有人玩儿过？

我有试验了另外一种模式：



gem install google-cloud-storage
Preview
require "google/cloud/storage"

storage = Google::Cloud::Storage.new(
  project_id: "my-todo-project",
  credentials: "/path/to/keyfile.json"
)

依然不对，返回都是一样的：

Traceback (most recent call last):

1: from (irb):2

Faraday::ConnectionFailed (execution expired)

求助。

使用 Active Storage 往七牛上存东西，发生问题，求解

lukefan — Sun, 24 Jun 2018 15:43:47 +0800

我在使用 Active_Storage 的时候，遇到了一个奇怪问题。这么多年来，一直都在使用七牛云，做了设置： storage.yml 里面

qiniu:
    service: Qiniu
    access_key: <%= Rails.application.credentials.dig(:qiniu, :access_key) %>
    secret_key: <%= Rails.application.credentials.dig(:qiniu, :secret_key) %>
    bucket: <%= Rails.application.credentials.dig(:qiniu, :bucket) %>
    domain: <%= Rails.application.credentials.dig(:qiniu, :domain) %>

development.rb 里面

config.active_storage.service = :qiniu

_form.html.erb 里面

<%= form.file_field :image, direct_upload: true%>

在上传文件的时候，却得到了这样的提示：

NameError (Cannot load `Rails.config.active_storage.service`:
uninitialized constant ActiveStorage::Service::QiniuService::Qiniu):

使用 local 的时候，没有问题。七牛的全套设置，是在其他项目里面一直在用的，肯定没有问题。

请问我少设置了什么吗？

当我添加了： rb config.active_storage.analyzers = [ ActiveStorage::Analyzer::QiniuImageAnalyzer, ActiveStorage::Analyzer::QiniuVideoAnalyzer ] 之后，显示 analyzers 失败。

我很喜欢用 CarrierWave 里面的 remote_url，直接抓取外面的资源，现在怎么搞？另外，原来 carrierwave 里面，是在上传的时候，做图像处理的，还可以添加水印、圆角什么的，现在怎么搞？是不是都要到显示的时候来处理？这样的话，是不是每次显示的时候都要运算，原来是分成不同的版本存下来的，显示的时候直接调用就好了。

另外，询问一下，mongoid 上怎么用这个东西？CarrierWave 是有 mongoid 的整合 gem 的。

使用 axios.put 的时候，反馈 Can't verify CSRF token authenticity

lukefan — Sat, 29 Jul 2017 00:21:57 +0800

Started PUT "/products/597074f958efe52639ad261a" for 127.0.0.1 at 2017-07-29 00:17:11 +0800 Processing by ProductsController#update as HTML Parameters: {"title"=>"abc", "desc"=>"hehe", "id"=>"597074f958efe52639ad261a", "product"=>{"title"=>"abc", "desc"=>"hehe"}} Can't verify CSRF token authenticity. Completed 422 Unprocessable Entity in 1ms

ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):

我用 react 写了个例子。 get 信息的时候没有问题，但是 put 的时候，就 422 了。

我尝试了添加：axios.defaults.headers.common['Authorization'] = 'L2yn79biL79xYPVV7N3997FEyLUeN9Av7DfweSocco4ircVzTs+qli8tcVgd8Hx+Y2CNRgFAPrMLAFrOxoCRsg=='; 在代码中，依然无效。请问应该怎么解决 token 的问题？

carrierwave-mongoid 的数据，找不到了

lukefan — Tue, 18 Jul 2017 17:31:26 +0800

我在一个项目中使用 carrierwave-mongoid，作为附件管理的工具

在 mongodb 中，没有发现存储的相关信息在什么地方

dump 了 mongodb 的数据库，到新的数据库中进行 restore

原来的 picture_url，就不工作了，返回的都是 nil

请问应该如何处理？

如何在爬虫中运行网页中的 JavaScript

lukefan — Sat, 03 Dec 2016 10:15:45 +0800

我写了个爬虫程序。但是，目标网站经常改变域名，所以会在首页中执行一个 JavaScript，从而获得当前正确的域名。我怎么才能搞在自己的爬虫程序中，执行这段 JS，获得正确的域名呢？

eeepub 有替代品吗？好像几年没有更新了

lukefan — Sun, 18 Oct 2015 09:48:03 +0800

想要做一个 epub 生成的功能。使用 eeepub，结果好几年没有更新的东西，和 zip 版本不兼容。有什么简单一点儿的方法吗？