rails - 新版rails需要使用webpack server 以及如何新增图片, js , css 等静态资源

refer to: https://guides.rubyonrails.org/webpacker.html

新版rails出现了,之前没有用过webpack server, 

现在发现它的功能很强大,可以在 rails中直接使用 node module.  不需要browserfy了.

webpacker的使用

1. bundle exec rails webpacker:install (凭记忆)

2. 会生成一个配置文件 config/webpacker.yml 

development:
  <<: *default
  compile: true
  dev_server:
    https: false
    host: localhost
    port: 3035   # 注意这个port 

3. 然后就需要启动 rails server之前,先确定这个port,并启动服务:  

./bin/webpack-dev-server

4. 然后再启动  rails server 就可以了. （如果没有yarn的话，就安装 node , 安装yarn , 然后运行yarn install ）

使用图片

1. 编辑 /app/javascript/application.js

+const importAll = (r) => r.keys().map(r)
+importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));

2. 把图片放在 app/javascript/images 目录下

3.  在 erb文件中,使用

<%= image_pack_tag('metamask.png' %>

如何使用node module

1. 在package.json 中增加你想要的dependency 

2. npm install

3. 在对应的js 文件中(注意是一个独立的js文件,不能是 erb中的script片段 例如app/javascript/application.js )   

增加对应的import即可

import {
  web3Accounts,
  web3Enable,
  web3FromAddress,
  web3ListRpcProviders,
  web3UseRpcProvider
} from '@polkadot/extension-dapp';

window.polka = { 
  web3Accounts,
  web3Enable,
  web3FromAddress,
  web3ListRpcProviders,
  web3UseRpcProvider
}

然后,在对应的页面,直接 var a =  web3Enable() 即可. (注意  await 与 async 的使用,这个是题外话了) 

跟asset pipeline的区别

应该是可以同时使用,互不干扰的.

但是建议使用了一个就别用第二个,太容易混淆了.

个人感觉可以使用node_module 这个太赞了.