 |
|
登录注册 |
| ☦ 上海财经大学论坛 > 信息平台 > 浏览当前帖子 | 手机版 - 认证发帖 - 隐藏左侧栏 |
| 如何在ruby on rails中配置webpack | |
| 【返回本版】 【发表帖子】 【回复帖子】 | 浏览量 457 回帖数 0 |
 |
展示美好 等级 瓶子 楼主 发表于 2016/4/13 23:32:57 编 辑 |
|
|
Webpack是一个模块打包工具，可以兼容多种js书写规范，并且具体requireJS和browserif有的功能，有空的时候在项目的前端搭上了webpack，能更好地模块化管理前端代码，下面就和大家分享一下ruby on rails框架（http://www.maiziedu.com/course/ruby/）中配置webpack的基本信息，期待更多交流。 基本配置 安装 webpack 在项目的目录下创建 package.json 来管理需要的外部 module： { "name": "app", "description": "the app", "version": "1.0.0", "dependencies": { "coffee-loader": "^0.7.2", "coffee-script": "^1.10.0", "exports-loader": "~0.6.2", "expose-loader": "~0.6.0", "imports-loader": "~0.6.3", "css-loader": "~0.6.3", "underscore": "~1.8.3", "webpack": "~1.4.13", "jquery": "~2.1.4" }} 安装需要的 module（墙内可以使用淘宝镜像 https://npm.taobao.org/ ） npm install 安装 webpack npm install -g webpack 配置 webpack 由于webpack本身功能的强大，配置文件也可以很复杂，这里简单配置一下，添加一个叫 webpack.config.js 的文件 var path = require('path');var webpack = require('webpack'); var config = module.exports = { context: __dirname, // 告诉 webpack 去哪里找 entry 文件 // entry 文件最终会被 compile 出来 // 我们将新的 js 代码都统一放在 app/frontend/javascritps 文件夹下面 entry: './app/frontend/javascripts/entry.js'}; config.output = { // 告诉 webpack 根据 entry 文件编译出来的文件叫 bundle.js // 并把文件生成到 app/assets/javascripts 目录下，这样 Rails 的 Asset Pipeline 便可以直接使用 path: path.join(__dirname, 'app', 'assets', 'javascripts'), filename: 'bundle.js', publicPath: '/assets'}; config.resolve = { // 告诉 webpack 可引用文件的后缀 // 比如我们添加了 '.js'，所以可以用 require('app') 来代替 require('app.js') extensions: ['', '.js', '.coffee']}; config.module = { loaders: [ // 用来 load CoffeeScript { test: /\.coffee$/, loader: 'coffee-loader' }, ],}; entry.js 可以是任何 js 文件，里面可以通过 require 来引用其他的 module，举个例子： _ = require('underscore')console.log(_.keys({"foo": "bar"})) 运行 webpack 运行以下命令，webpack 会根据上一步的配置文件生成一个 bundle.js webpack -d --display-reasons --display-chunks --progress 之后只需要在 view 里引用生成的 js 文件（bundle.js） <%= javascript_include_tag 'bundle' %> 配置bower 因为有些 module 只有 bower 有，所以我们可以在使用 npm 的同时也使用 bower 安装 bower npm install -g bower 添加 bower.json { "name": "app", "version": "1.0.0", "description": "the app", "dependencies": { "jquery": "~1.11.0" }} 在 webpack 配置里添加 bower_components config.resolve = { ... modulesDirectories: [ 'node_modules', 'bower_components' ], ...}; 再添加一个 plugin （这里感叹一下 webpack 的 plugin 相当之丰富） config.plugins = [ // 告诉 webpack 除了 package.json，还可以去哪里寻找 module 的描述 new webpack.ResolverPlugin([ new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main']) ])]; 配置好之后就可以同时使用 npm 和 bower 的 package 啦 bower install 多个 entry 文件 以上的配置都只是一个 entry 文件（entry.js），有时候需要多个 entry 文件来更好分离不同页面的 js，那么可以使用以下配置： var config = module.exports = { ... entry: { entry1: './app/frontend/javascripts/entry1.js', entry2: './app/frontend/javascripts/entry2.js } ... }; config.output = { ... // 生成的文件直接使用 entry 的名称来命名 filename: '[name]_bundle.js', ...}; 之后我们在 view 里需要的地方便可使用 entry1_bundle.js 和 entry2_bundle.js 开发环境设置 开发环境里可以使用以下的命令让 webpack 保持自动编译前端代码： webpack --watch --colors 当然也可以使用 foreman 统一设置，比如我们项目的 Procfile： sidekiq: bundle exec sidekiq web: rails server webpack: webpack --watch --colors 教程里还提到了一些高级的配置，感兴趣的同学可以试试 配置全局 module，比如配置 jQuery 之后，不需要在每个文件都 $ = require('jquery')。 自动提取共享 module，使用 webpack.optimize.CommonsChunkPlugin 来自动抽取不同 entry 文件里面共用的 module，生成一个新文件。 生产环境可以给生成的 js 文件添加类似 Rails 的 fingerprint。 待解决问题 生产环境下 Rails 会给图片添加 fingerpint，所以之前有些 js 文件添加了 .erb 后缀通过服务器渲染来使用 asset_path 调用图片。 webpack 对于此类 js 似乎没有一个优雅的解决方案。目前我的做法是将这些 js 继续保留在了 Asset Pipeline 里。 webpack 是支持打包 css 和 image 的，还在研究如何将 Rails 里的 CSS/SASS 也使用 webpack 打包。 |
||
| 1 |
| 论坛帮助 会员认证删帖申请 联系我们 |