How to Create a Gem For JavaScript and CSS Libraries

2017-01-13

Sweetalert

sweetalert 是一个更好看的alert版本。和大多数js库类似，它主要包括2个文件，sweetalert.css和sweetalert.js，通常的引入方法是将这2个文件放在vender/assets1目录中，然后require以后再使用。

但是，当多个项目都要用的此库的话，就要一遍遍的重复拷贝粘贴引入，就不是很方便了。为此我们可以把这个前端库做成gem，以方便其他项目引入。下面开始创建。

Create a New gem

$ bundle gem sweetalert
create  sweetalert/Gemfile
     create  sweetalert/.gitignore
     create  sweetalert/lib/sweetalert.rb
     create  sweetalert/lib/sweetalert/version.rb
     create  sweetalert/sweetalert.gemspec
     create  sweetalert/Rakefile
     create  sweetalert/README.md
     create  sweetalert/bin/console
     create  sweetalert/bin/setup
     create  sweetalert/.travis.yml
     create  sweetalert/.rspec
     create  sweetalert/spec/spec_helper.rb
     create  sweetalert/spec/sweetalert_spec.rb
     create  sweetalert/LICENSE.txt
     create  sweetalert/CODE_OF_CONDUCT.md

修改必要的gem信息

这里主要修改sweetalert.gemspec文件中有todo标记的部分，不修改的话无法正常使用。

作为本地gem引入

假设我们的sweetalertgem位于/data/ruby-apps/目录下，在项目的Gemfile中添加如下：

gem 'sweetalert', path: '/data/ruby-apps/sweetalert'

执行bundle

require 进项目

application.js中：

//= require sweetalert

application.css中：

 *= require sweetalert

这里要注意的是，该库的效果可能与turbolinks冲突。可以把turbolinks注释掉。

在项目中使用

这里的项目使用一个scaffold作为例子。

rails g scaffold articles title:string text:text

articles/index.html.erb

<p id="notice"><%= notice %></p>

<h1>Articles</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Text</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @articles.each do |article| %>
      <tr>
        <td><%= article.title %></td>
        <td><%= article.text %></td>
        <td><%= link_to 'Show', article %></td>
        <td><%= link_to 'Edit', edit_article_path(article) %></td>
        <td><%= link_to 'Destroy', article,  data: { behavior: 'delete'} %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Article', new_article_path %>

articles.coffee

jQuery ->
  $("[data-behavior='delete']").on "click", (e) ->
    e.preventDefault()

    swal {
      title: 'Are you sure?'
      text: 'You will not be able to recover this imaginary file!'
      type: 'warning'
      showCancelButton: true
      confirmButtonColor: '#DD6B55'
      confirmButtonText: 'Yes, delete it!'
      cancelButtonText: 'No, cancel plx!'
      closeOnConfirm: false
      closeOnCancel: false
    }, (confirmed) =>
      if confirmed
        $.ajax(
          url: $(this).attr("href")
          dataType: "JSON"
          method: "DELETE"
          success: =>
            swal 'Deleted!', 'Your imaginary file has been deleted.', 'success'
            # TODO: Also remove the item from the page
            $(this).parent().parent().remove()
        )

      else
        swal 'Cancelled', 'Your imaginary file is safe :)', 'error'
        console.log($(this))
      return

这样一来，点击删除按钮，就会有漂亮的提示，删除后也会有确认按钮，并且是异步与后台交互的。如果删除后不想有确认按钮，可以将closeOnConfirm改为false。