如何在webpack中加载`bundle`安装的软件包?

时间:2017-12-06 06:52:06

标签: javascript ruby-on-rails webpack bundler webpacker

在Ruby on Rails应用程序中,我们如何requireimport未通过npmyarn安装但通过bundle安装的软件包?

我试过了:

//= require package-name

但这似乎不适用于webpacker

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

2 个答案:

答案 0 :(得分:1)

对于普通的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发生的魔力

答案 1 :(得分:0)

我没有webpack经验,也没有针对您的问题的解决方案。

这个怎么样

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

正如我在documentation paths chapter

中读到的那样
  

Paths

     

默认情况下,Webpacker附带了简单的约定,用于JavaScript应用程序文件和编译的webpack包将在Rails应用程序中的位置,但所有这些选项都可以从config/webpacker.yml文件进行配置。

     

默认情况下,webpack应该编译的配置依赖于app/javascript/packs/*中的每个文件(默认)或source_entry_path配置中为webpacker.yml设置的任何路径的约定。变成了自己的输出文件(或入口点,就像webpack调用它一样)。因此,您不希望在包目录中放置任何您不想成为条目文件的内容。根据经验,将您要在视图中链接的所有文件放在“pack”目录中,并将其他所有内容保存在app/javascript下。

     

假设您要将源目录从app/javascript更改为前端并输出到assets/packs。这就是你要做的事情:

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

public_output_path: assets/packs#outputs to =>公共/资产/包   同样,您也可以从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标记。

asset-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"]

当您在requireapplication.js中执行application.scss时,sprockets将使用ruby require语句在预定义路径中搜索该文件。

如果是GEM,它会在.rbenv/version/yourversion文件夹中找到它。

我解决此问题的方法是在正确的文件夹中包含您在前端应用程序所需的gem中的文件,因此只需从GEM访问存储库并将这些文件复制粘贴到正确的位置。 / p>

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

再见 的Fabrizio