如何加载WebPack中的“bundle”安装的软件包

Question

在Ruby on Rails应用程序中，我们如何require或import未通过npm或yarn安装的软件包，而是通过bundle？

我尝试了：

//= require package-name

，但这似乎不适用于webpacker。

require("package-name")也不起作用（因为它在node_modules中找不到）。

Answer 1

对于普通导轨环境，如果需要一些文件，则可以使用普通目录路径。

假设您的资产文件夹看起来像

├── application.js
└── something.js

您要需要something.js，然后您只需要写

//= require ./something.js

到您的application.js

对于您手动放置在某个地方的软件包，然后您必须将包裹的位置添加到Rails.application.config.assets.paths

如果您使用的是Rails V5，则可以检查config/initializers/assets.rb以查看加载node_modules的魔力

Answer 2

我没有Webpack经验，也没有解决您的问题的解决方案。

这个

呢

https://webpack.js.org/loaders/bundle-loader/

当我在文档路径章中阅读时

路径

默认情况下，webpacker发行了简单约定的javaScript应用程序文件和编译的webpack捆绑包在您的Rails App中，但是所有这些选项都是从config/webpacker.yml文件中配置的。

。

默认情况下，默认情况下应编译的webpack的配置都取决于app/javascript/packs/*中的每个文件（默认值）或您为webpacker.yml配置中为source_entry_path设置的任何路径都将其转换为他们自己的输出文件（或输入点，如WebPack称其为）。因此，您不想将任何您不想成为入口文件的包装目录中放置任何东西。根据经验，将所有要链接在"包装"目录中的视图中的文件中，并将其他所有文件保留在app/javascript下。

假设您想将源目录从app/javascript更改为前端，并将输出更改为assets/packs。这就是您的方式：

# config/webpacker.yml
source_path: frontend
source_entry_path: packs

public_output_path: assets/packs＃输出到=> public/assets/packs 同样，您还可以从config/webpacker.yml文件控制和配置WebPack-dev-server设置：

# config/webpacker.yml
development:
  dev_server:
    host: localhost
    port: 3035

如果您的HMR变为true，则stylesheet_pack_tag不会生成输出，因为您将需要配置要在JavaScript中嵌入的样式以进行热重新加载。在生产和测试期间，Stylesheet_pack_tag将创建适当的HTML标签。

资产pipeline从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语句在预定义路径中搜索该文件。

如果是宝石，它将在.rbenv/version/yourversion文件夹中找到它。

我解决此问题的方法是在正确的文件夹中包含您所需的前端应用程序中所需的这些文件，因此只需从宝石中访问存储库，然后将这些文件复制到正确的位置。<<<<<<<<

我知道这不是解决您的问题的方法，但我只是想帮助您。

再见Fabrizio