学习webpack和yarn、bootstrap引用方法

webpack好像是替代assert的一套新的前端库管理方法。
可以通过rails new xxx --webpack来添加webpack的支持。
也可以在传统项目中的Gemfile中直接添加 gem ’webpacker’来添加。
可以添加各种熟悉的库,比如react或vue之类的,也可以添加coffeescript和erb相关的支持,具体玩法,可以用 rake -T命令来查看。
需要注意的是,添加了webpack之后,必须要有nodejs的安装和支持,否则是不工作的。
react之类的东西,还是有些麻烦的,试了两次之后就放弃了。有些地方还不是很明白。
我总是喜欢在js里面将组件写好,然后到HTML中去调用,但始终不是很成功的样子。
现在看到的例子,大多是直接在load的时候把组件画出来,时态搞得还不是很清晰。

下面说说bootstrap的加法。

分两种状态,第一种是使用webpacker的;第二种则是不适用webpacker,只使用yarn。

在只使用yarn,不使用webpacker

也是需要nodejs支持的,但相对来说要简单一些。

rake yarn:install
yarn init
yarn add bootstrap

然后继续修改
config/initializers/assets.rb
添加:
Rails.application.config.assets.paths << Rails.root.join('node_modules')

我用的是rails 5.2.2,上面那句好像不再需要手工添加,默认就在。
继续修改:
app/assets/stylesheets/application.css

*= require bootstrap/dist/css/bootstrap

app/assets/javascripts/application.js

//= require bootstrap/dist/js/bootstrap

这就可以工作了。

使用webpacker

也需要 yarn add bootstrap
不过每次编译或调用的时候,都会反馈缺乏popper和jquery支持,做了yarn add popper jquery之后,依然报相关错误,不过好像并不影响使用。

添加文件:
/app/javascript/stylesheets/application.scss
文件内添加代码:

@import '~bootstrap/scss/bootstrap';

再在 /app/javascript/packs/application.js 中添加:

import 'stylesheets/application'
import 'bootstrap'

就可以工作了。

总结

webpacker的安装确实是很慢的。调试期每次修改之后的调用都需要进行编译,速度也不是很快,不过好在都是自动化的,还算方便。特别是js代码很多的时候,这套东西还是相当不错的。
如果仅仅是想用bootstrap来刷一下格式的话,完全没必要使用webpack,直接用yarn就可以了。
yarn和webpack都彻底摆脱了对gem库的依赖。以前rails项目想要调用前端库,必须要有人协议gem库,再封装一次,现在则完全不需要了,直接可以调用js库,要比以前方便很多。