Upgrade to Pro — share decks privately, control downloads, hide ads and more …

フロントエンドのモダン化とJavaScriptモジュールの
依存解決

 フロントエンドのモダン化とJavaScriptモジュールの
依存解決

Modern Web App LT!(freee x WACUL)で発表した資料です
http://connpass.com/event/31305/

Takumi Ohashi

June 10, 2016
Tweet

More Decks by Takumi Ohashi

Other Decks in Programming

Transcript

  1. SprocketsͷrequireͰղܾʁ //= require jquery //= require jquery_ujs //= require underscore/underscore

    //= require backbone/backbone //= require models/foo //= require collections/foo //= require views/foo //= require views/bar //= require views/baz
  2. gulp.js & Webpackͷಋೖ • CoffeeScript, Sass, JSςϯϓϨʔτͷϏϧυΛ ׬શʹҠߦ • npm

    scriptͰ·ͱΊ࣮ͯߦɺ։ൃத͸watchλ εΫ • npmपΓͷΤίγεςϜ͕ར༻Մೳʹ
  3. JSϑΝΠϧ෼ׂv2 • ෼ׂ͚ͩͰ͸ͳ͘ɺϞδϡʔϧؒͷґଘؔ܎ Λղܾͯ͠WebpackͰϏϧυ͢Δ $ = require('jquery') _ = require('underscore')

    Backbone = require('backbone') FooModel = require('models/foo') FooView = require('views/foo')
  4. Webpack & Sprockets྆ରԠ require = -> unless require module =

    {} unless module views = Foo: BazView: require('views/foo/baz') if window.views views = window.views module.exports = class views.Foo.BarView extends views.Foo.BazView initialize: -> #…
  5. Webpack & Sprockets྆ରԠ require = -> unless require module =

    {} unless module views = Foo: BazView: require('views/foo/baz') if window.views views = window.views module.exports = class views.Foo.BarView extends views.Foo.BazView initialize: -> #… module, require͸Կ΋͠ͳ͍ requireͰґଘ͢ΔϞδϡʔϧΛಡΈࠐΉ globalม਺Ͱ্ॻ͖