• 这是一个例子,注意目录结构,外部的calendar.js里的这句话,会引用calendar/目录下index.js文件

  • @huacnlee 反向查询count时,如果之前没有请求一下Origin Object, 会导致Target Object xxx_by_users method undefined, 例如:

    #User Model
    action_store :star, :article, counter_cache: true, user_counter_cache: true
    
    #但是在测试里
    @article = create(:article)
    @article.star_by_users  #method missing error
    User #随便读一下user class
    @article.star_by_users # => []
    
  • 觉得CtrlP已经够用了,代码片段一边用ack-grep

  • 真要对比出来,可能要新开篇去说了。只能说下对于小公司来说,webpacker有点给我们带来这些好处: (1)以前前端同学写完后推代码,等运维同学拉代码部署到运行容器,接上数据查看有没出错,出错了还要重来一遍。现在直接本地可以同步效果,在同一个环境下不会再存在一些额外需要去把API服务器调跨域之类的问题。 (2) precompile后的工作和assets pipeline差不多,原来的部署脚本也一步到位了 (3) 像基本我们百分百对外项目静态文件都用到CDN的,用手动分离的方式中间要做很多的整合工作。 (4)和assets pipeline对比的优点就更不用说啦,yarn 对比gem,babel es6 es7 特性对比coffee,webpacker自带处理的各种vue-loader啊,portcss之类的,assets pipeline都会很别扭。

    综合地来说,就是对前端用得比较深的,都知道现在webpacker是大一统,前端最前沿的技术都在这里可以体验。assets pipeline和turbolinks是能顶大部分的需求,还是看项目情况使用吧。

  • 这种处理方式也是可行的。实际上我们现在一个在做的项目,已经会有多个分离出来的App入口,还有后台的前端部分也分离出来了,对于我们来说在webpack配置文件里做好入口判断会清晰点。

  • Rails里的webpack默认配置文件shared.js,是会把packs文件夹下根目录js文件都当作entry打包,会导致不必要的entry重复打包的问题。这里可以手动指定一下自己的entry,这样会大幅减少文件体积和提高打包速度。

    example:

    module.exports = {
      //手动指定两个入口
      entry: {
        'main': ["./app/javascript/packs/main"],
        'operate/main': ["./app/javascript/packs/operate/main"]
      },
      //下面是原来的配置
      //packPaths.reduce( 
        //(map, entry) => {
          //const localMap = map
          //const namespace = relative(join(paths.source, paths.entry), dirname(entry))
          //localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry)
          //return localMap
        //}, {}
      //),
    
      output: {
        filename: '[name].js',
        path: resolve(paths.output, paths.entry),
        publicPath
      },
    ........
    }
    
    
  • 更新了开发中遇到的一些小问题

  • 量产型炮灰工程师 at 2017年05月22日

    好文,观点都赞同

  • 当然可以的,引入webpack和yarn,复杂的部分只是在于开发和构建上,结果出来都是在页面引用JS而已。只要处理好assets pipeline和pack出来的静态文件引用顺序,两者是可以并存的。

    另外,打开webpacker的源码,找到javascript_pack_tag, 实际上也是调用了javascript_include_tag

    
      def javascript_pack_tag(name, **options)
        javascript_include_tag(Webpacker::Manifest.lookup("#{name}#{compute_asset_extname(name, type: :javascript)}"), **options) #从生成出来的manifest.json找到对应静态文件编译后的文件名
      end
    
    ```
    
    ```json
    //manifest.json example
    {
      "app.js": "/packs/app-c34667aca39442f786a0.js",
      "application.js": "/packs/application-912810e12140b29375d2.js",
      "page/Actor.js": "/packs/page/Actor-81e43cb17759d171104e.js",
      "page/Actors.js": "/packs/page/Actors-638afba3889927791378.js",
      "page/Movie.js": "/packs/page/Movie-c4cdf69886b211c14574.js",
      "page/Movies.js": "/packs/page/Movies-f04878a089ecec487810.js",
      "page/Search.js": "/packs/page/Search-f02e3e7031931ef876b9.js",
      "page/Tag.js": "/packs/page/Tag-75d6da5528f200354587.js",
      "page/Tags.js": "/packs/page/Tags-8aa0b6c7cc811618c51f.js",
      "router/index.js": "/packs/router/index-10afda1a26fd89c89880.js",
      "store/action_types.js": "/packs/store/action_types-aa75ce66ee2e3a622d51.js",
      "store/index.js": "/packs/store/index-5389b0582084ca0e4751.js",
      "store/module/actor.js": "/packs/store/module/actor-b67a50e248408fa8fa6a.js",
      "store/module/movie.js": "/packs/store/module/movie-20441ad04b207c3337cc.js",
      "store/module/search.js": "/packs/store/module/search-c7cae47a3a1058a7a6b5.js",
      "store/module/tag.js": "/packs/store/module/tag-8952d2f3ce45bf2fd3f7.js",
      "store/mutation_types.js": "/packs/store/mutation_types-e74d876aaaabbe43d43f.js"
    }
    

    所以webpack的静态文件要使用turbolink,在页面里这样用就行

    <%= javascript_pack_tag "application", :"data-turbolinks-track" => true %>
    
  • 可以的,原来的assets pipeline还在