webpack을 사용한다.

트위터로 Browserify 좋다든지 바보처럼 짹짹했던 곳 전 상사로부터

@mayutan 지금부터 사용한다면 webpack에서 좋지 않을까? nekoya (@nekoya) 2016년 7월 6일

라든지 반응이 있었기 때문에 webpack에 새장. 클라이언트 측은 템플릿과 끈적이기 때문에 완전 분리는 포기한다. 거기서 나누어 적당히 떼어 놓기로 한다. ↓여기를 참고로.

ㅜㅜㅜㅜㅜ 네 t/2015/01/호 w-토우세우ぇb파CK-우우 th-라 ls/
ぃ tp // 코 m / 고양이 c 또는 rc / ms / 아후 674 아 b10 아 아 후 9784

전제

Rails 초보자

Rails 4.2.1

Rails 짱에 인 되고 있는 JQuery 에서도 이것 실장되고 있다.

javascript 는 project/app/assets/javascripts/이하에 모두 배치하고 있다.

Rails 씨가 precompile 한 것이 project/public/assets/javascripts/이하에 카피된다.

project/app/assets/javascripts/app 아래에 angular 앱을 둔다.

너무 고집하면 죽음을 보니 느슨해진다.

설치 등 준비

ES6로 쓰려고 생각하기 때문에 project 바로 아래에

npm install -g webpack
npm install -D webpack babel babel-loader babel-core
npm install --save angular

babel 프리셋 사용

npm install -D babel-preset-es2015 babel-preset-stage-2

개발 환경에서 빌드할 수 있도록 설정

project/app/assets/javascripts/app/config/development.js

module.exports = {
  devtool: 'inline-source-map',
  entry: {
    application: './app/assets/javascripts/app/app.js',
  },
  output: {
    path: './app/assets/javascripts/app',
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel?presets[]=es2015,presets[]=stage-2'
      }
    ]
  }
}

적당히 angular 같은 것을 써 본다.

project/app/assets/javascripts/app/app.js

import angular from 'angular';
import testCtrl from './controllers/testCtrl';

export default angular.module('testapp', [])
  .controller(testCtrl.name, testCtrl)

app/assets/javascripts/app/controllers/testCtrl.js

export default class testCtrl {
  constructor() {
    console.log('test');
  }
}

app/views/test.html

<div ng-controller="testCtrl"></div>

빌드 명령 추가

package.json

"scripts": {
    "release": "webpack --config app/assets/javascripts/app/config/production.js",
    "build": "webpack --config app/assets/javascripts/app/config/development.js",
    "watch": "webpack --watch --config app/assets/javascripts/app/config/development.js"
  }

번거롭기 때문에 rake task 로 해 assets:precompile 로 실행되도록 한다

lib/tasks/precompile.rb

task :build_frontend do
  sh "npm install"
  sh "npm run release"
end

Rake::Task["assets:precompile"].enhance(%i(build_frontend))

이렇게 하면 bundle exec rake assets:precompile 의 앞에 마음대로 빌드해 준다.

view에 반영. Rails의 유의? 여기에 추가

project/app/assets/javascripts/application.js

//=require app/appllication.js

빌드하고 브라우저에 액세스하면



짱

결론

레일스는 빌어 먹을
angular1.x 시스템에서 ES6을 고집하는 것은 죽음. 억지로 쓰지 않는다

자꾸 썼지만, 저것 이것 에라하거나 그 외 여러분 정말로는 마리마리리마 크리스티. 어쨌든 Rails에 사악하게 짜여져있어 괴로움 밖에 없다. 대체로 뿌로케츠가 너무 쓰레기. 어쨌든 프레임 워크에서 지금은 사용할 필요 없다는 느낌.

그리고 이것이라면 모처럼 파일을 분할할 수 있다고 하는 webpack 의 장점이 전혀 살지 않는다.

angular2 를 사용한다면 react 사용하는 편이 좋은 생각도 한다.