如何在 webpack 中加载 `bundle` 安装的包?
How to load packages installed by `bundle` in webpack?
在 Rails 应用程序的 Ruby 中,我们如何 require
或 import
一个未通过 npm
或 [=14 安装的包=],但通过 bundle
?
我试过了:
//= require package-name
但这似乎不适用于 webpacker
。
require("package-name")
也不起作用(因为在 node_modules
中找不到)。
我没有 webpack 经验,无法解决您的问题。
这个怎么样
https://webpack.js.org/loaders/bundle-loader/
正如我在 documentation paths chapter
中所读
Paths
By default, Webpacker ships with simple conventions for where the JavaScript app files and compiled webpack bundles will go in your Rails app, but all these options are configurable from config/webpacker.yml
file.
The configuration for what webpack is supposed to compile by default rests on the convention that every file in app/javascript/packs/*
(default) or whatever path you set for source_entry_path
in the webpacker.yml
configuration is turned into their own output files (or entry points, as webpack calls it). Therefore you don't want to put anything inside packs directory that you do not want to be an entry file. As a rule of thumb, put all files you want to link in your views inside "packs" directory and keep everything else under app/javascript
.
Suppose you want to change the source directory from app/javascript
to frontend and output to assets/packs
. This is how you would do it:
# config/webpacker.yml
source_path: frontend
source_entry_path: packs
public_output_path: assets/packs
# outputs to => public/assets/packs
Similarly you can also control and configure webpack-dev-server settings from config/webpacker.yml file:
# config/webpacker.yml
development:
dev_server:
host: localhost
port: 3035
If you have hmr turned to true, then the stylesheet_pack_tag generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the stylesheet_pack_tag will create the appropriate HTML tags.
资产管道从 Rails.application.config.assets.paths
定义的路径加载文件
这是我的 rails console
的输出
["/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/config",
"/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/images",
"/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/javascripts",
"/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/stylesheets",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/font-awesome-rails-4.7.0.2/app/assets/fonts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/font-awesome-rails-4.7.0.2/app/assets/stylesheets",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/jquery-rails-4.3.1/vendor/assets/javascripts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/coffee-rails-4.2.2/lib/assets/javascripts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actioncable-5.1.4/lib/assets/compiled",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actionview-5.1.4/lib/assets/compiled",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/turbolinks-source-5.0.3/lib/assets/javascripts",
#<Pathname:/home/fabrizio/Documents/Sublime/Rails/surfcheck/node_modules>,
#<Pathname:/home/fabrizio/Documents/Sublime/Rails/surfcheck/vendor>,
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/stylesheets",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/javascripts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/fonts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/images"]
当您在 application.js
或 application.scss
中执行 require
时,sprockets
将使用 ruby require
语句来搜索预定义路径中的文件。
如果是 GEM,它将在 .rbenv/version/yourversion
文件夹中找到它。
我解决这个问题的方法是将前端应用程序所需的 gem 中的那些文件包含在正确的文件夹中,因此只需访问 GEM 中的存储库并将这些文件复制粘贴到正确的位置。
我知道这不能解决您的问题,但我只是想帮助您。
再见
法布里齐奥
对于正常的Rails环境,如果需要一些文件,可以使用正常的目录路径。
假设您的资产文件夹如下所示
├── application.js
└── something.js
并且你想要求 something.js
那么你只需要写
//= require ./something.js
给你的application.js
对于您手动放置在某处的包,则必须将包的位置添加到Rails.application.config.assets.paths
如果您使用的是 Rails v5,您可以查看 config/initializers/assets.rb
以了解加载 node_modules
的神奇之处
在 Rails 应用程序的 Ruby 中,我们如何 require
或 import
一个未通过 npm
或 [=14 安装的包=],但通过 bundle
?
我试过了:
//= require package-name
但这似乎不适用于 webpacker
。
require("package-name")
也不起作用(因为在 node_modules
中找不到)。
我没有 webpack 经验,无法解决您的问题。
这个怎么样
https://webpack.js.org/loaders/bundle-loader/
正如我在 documentation paths chapter
中所读Paths
By default, Webpacker ships with simple conventions for where the JavaScript app files and compiled webpack bundles will go in your Rails app, but all these options are configurable from
config/webpacker.yml
file.The configuration for what webpack is supposed to compile by default rests on the convention that every file in
app/javascript/packs/*
(default) or whatever path you set forsource_entry_path
in thewebpacker.yml
configuration is turned into their own output files (or entry points, as webpack calls it). Therefore you don't want to put anything inside packs directory that you do not want to be an entry file. As a rule of thumb, put all files you want to link in your views inside "packs" directory and keep everything else underapp/javascript
.Suppose you want to change the source directory from
app/javascript
to frontend and output toassets/packs
. This is how you would do it:
# config/webpacker.yml
source_path: frontend
source_entry_path: packs
public_output_path: assets/packs
# outputs to => public/assets/packs Similarly you can also control and configure webpack-dev-server settings from config/webpacker.yml file:
# config/webpacker.yml
development:
dev_server:
host: localhost
port: 3035
If you have hmr turned to true, then the stylesheet_pack_tag generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the stylesheet_pack_tag will create the appropriate HTML tags.
资产管道从 Rails.application.config.assets.paths
这是我的 rails console
["/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/config",
"/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/images",
"/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/javascripts",
"/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/stylesheets",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/font-awesome-rails-4.7.0.2/app/assets/fonts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/font-awesome-rails-4.7.0.2/app/assets/stylesheets",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/jquery-rails-4.3.1/vendor/assets/javascripts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/coffee-rails-4.2.2/lib/assets/javascripts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actioncable-5.1.4/lib/assets/compiled",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actionview-5.1.4/lib/assets/compiled",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/turbolinks-source-5.0.3/lib/assets/javascripts",
#<Pathname:/home/fabrizio/Documents/Sublime/Rails/surfcheck/node_modules>,
#<Pathname:/home/fabrizio/Documents/Sublime/Rails/surfcheck/vendor>,
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/stylesheets",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/javascripts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/fonts",
"/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/images"]
当您在 application.js
或 application.scss
中执行 require
时,sprockets
将使用 ruby require
语句来搜索预定义路径中的文件。
如果是 GEM,它将在 .rbenv/version/yourversion
文件夹中找到它。
我解决这个问题的方法是将前端应用程序所需的 gem 中的那些文件包含在正确的文件夹中,因此只需访问 GEM 中的存储库并将这些文件复制粘贴到正确的位置。
我知道这不能解决您的问题,但我只是想帮助您。
再见 法布里齐奥
对于正常的Rails环境,如果需要一些文件,可以使用正常的目录路径。
假设您的资产文件夹如下所示
├── application.js
└── something.js
并且你想要求 something.js
那么你只需要写
//= require ./something.js
给你的application.js
对于您手动放置在某处的包,则必须将包的位置添加到Rails.application.config.assets.paths
如果您使用的是 Rails v5,您可以查看 config/initializers/assets.rb
以了解加载 node_modules
的神奇之处