Rails5.1과 Webpacker로 모던한 Rio.처리 js

15663 단어 riot.jswebpackerriotRails
Webpacker를 사용하는 Rails의 새로운 프런트엔드 환경에 적응하기 위해 Riot.js를 가져와 Babel로 ES6 코드를 편집하고 브라우저로 이동하는 샘플을 만듭니다.
우리도 본격적인 촬영 환경에서 디자인을 하고 마지막으로 히로쿠로 운영해 보려고 한다.

이 보도는 리우이다.js를 사용합니다.실수하지 마세요.

1. rails new


우선 평소와 같이 라일스를 초기화합니다.--webpack Webpacker가 옵션으로 설치됩니다.
$ mkdir rails5.1-riot-example; cd $_
$ bundle init
Gemfile 을 편집하여 rails 활성화
Gemfile
gem "rails"

$ bundle exec rails new . --webpack
gem를 설치한 후webpacker:install에서 babel와 webpack 등 노드를 자동으로 수행합니다.yarn를 통해 js 모듈을 설치합니다.
자동 생성package.json은 다음과 같다.
package.json
{
  "name": "rails5_1-riot-example",
  "private": true,
  "dependencies": {
    "autoprefixer": "^7.1.1",
    "babel-core": "^6.24.1",
    "babel-loader": "7.x",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.5.1",
    "coffee-loader": "^0.7.3",
    "coffee-script": "^1.12.6",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "glob": "^7.1.2",
    "js-yaml": "^3.8.4",
    "node-sass": "^4.5.3",
    "path-complete-extname": "^0.1.0",
    "postcss-loader": "^2.0.5",
    "postcss-smart-import": "^0.7.4",
    "precss": "^1.4.0",
    "rails-erb-loader": "^5.0.1",
    "resolve-url-loader": "^2.0.2",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.18.1",
    "webpack": "^2.6.1",
    "webpack-manifest-plugin": "^1.1.0",
    "webpack-merge": "^4.1.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.4.5"
  }
}

2. 빈 페이지 만들기


config/routes.rb
Rails.application.routes.draw do
  root 'application#index'
end
app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  def index
  end
end
app/views/application/index.html.erb
배치에서 Sprockets의 도우미stylesheet_link_tag와 javascript_include_tag를 삭제하고 추가javascript_pack_tag를 대체합니다.<%= javascript_pack_tag 'application' %>의 경우public/packs/application.jsjavascript_pack_tag 표시된 JavaScript 파일은 나중에 작성됩니다.
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Rails51RiotExample</title>
    <%= csrf_meta_tags %>
  </head>

  <body>
    <%= yield %>
    <%= javascript_pack_tag 'application' %>
  </body>
</html>

3. Rio 환경 설정 사용


포장의 이름을 주의하십시오. (Rio t 호스트는 riot이고 loader는 riotjos-loader입니다.)npm install와 달리yarn add는 선택적으로 업데이트package.json한다.
$ bin/yarn add riot riotjs-loader
riotjs-loader에 파일을 던지도록 설정
config/webpack/loaders/riot.js
module.exports = {
  test: /\.tag$/,
  loader: 'babel-loader!riotjs-loader'
}
전 세계에서 riot를 참조할 수 있도록 하다.
config/webpack/shared.js
// ---
plugins: [
    new webpack.ProvidePlugin({riot: 'riot'}), // 追加
    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
// ---

4. 자바스크립트 준비


시작점으로 JavaScript 파일 만들기
app/javascript/packs/application.js
const riot = require('riot')
require('../tags/app.tag')

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('app'))
  riot.mount('*')
})
Riot.js 사용자 정의 태그 만들기
(1초마다 한 번씩 업데이트하는 프로그램)
app/javascript/tags/app.tag
<app>
  <div>
    <p>Hello world</p>
    <p>
      <strong>{time}</strong>
    </p>
  </div>

  <script>
    this.on('mount', () => {
      setInterval(this.updateTime, 1000)
    })

    updateTime() {
      this.update({time: Date()})
    }
  </script>
</app>

5. 동작 확인


웹 패키지-dev-server를 시작하면 변경 사항이 감지되면 자동으로 연결됩니다.
$ bin/webpack-dev-server
다른 단말기에서 railshttp://localhost:3000/를 시작하면 동작을 확인할 수 있습니다.

6. 헤로쿠로 이동

Gemfile에 PostgreSQL용gem을 미리 추가합니다.
Gemfile
# ---
gem 'pg', group: :production
gem 'sqlite3', group: [:development, :test]
# ---
heroku에 프로그램을 만듭니다.
Webpack으로 편집하기 위해 노드입니다.js의 구축 패키지를 추가해야 합니다.루비의 빌드 패키지도 명확히 추가해야 한다.
$ heroku create
$ heroku addons:create heroku-postgresql:hobby-dev

# ビルドパックの追加
$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/ruby

# デプロイ
$ git push heroku master
$ heroku run rake db:migrate

# アプリケーションを開く
$ heroku open
production용으로 잘 Uglify로 만들어져요.
초간단!

총결산


전단에 npm, bower, yoeman, grunt, glop 등 환경을 구축하는 것이 힘들다는 인상을 받았지만 이번에는 설정 파일을 거의 건드리지 않고 간단하게 디자인만 해서 놀랐습니다.
이것은 자신에게 있어서 바로 수공으로 JS를 쓰는 느낌입니다!(・∀・)
Kotlin SpringBoot는 Apache Log4j2를 구성합니다.
HTML 독서 노트

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage