代码之家 › 专栏 › 技术社区 › IonicÄ BizÄu

如何在网页包中加载“bundle”安装的软件包?

webpacker bundler webpack ruby-on-rails javascript

IonicÄ BizÄu · 技术社区 · 7 年前

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

我试过:

//= require package-name

但这似乎不适用于 webpacker .

require("package-name") 也不起作用(因为在 node_modules ).

2 回复 | 直到 7 年前

yeuem1vannam 7 年前

对于普通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 发生了

fabOnReact 7 年前

我没有网页设计经验,也没有解决你问题的方法。

这个怎么样

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

当我在报纸上读到 documentation paths chapter

Paths

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

默认情况下,Web包应该编译的配置取决于每个文件所在的约定 app/javascript/packs/* (默认)或为其设置的任何路径 source_entry_path 在 webpacker.yml 配置被转换成它们自己的输出文件(或webpack所称的入口点)。因此,您不想在packs目录中放入任何您不想成为条目文件的内容。根据经验,将所有要链接到视图中的文件放在“packs”目录中,其他所有文件都放在“packs”目录下 app/javascript .

假设您想将源目录从 应用程序/javascript 到前端并输出到 assets/packs . 这就是你要做的:

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

public_output_path: assets/packs #输出到=>公共/资产/包同样,您也可以从config/webpacker控制和配置webpack dev服务器设置。yml文件:

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

如果将hmr设置为true,则stylesheet\u pack\u标记不会生成输出,因为您需要将样式配置为内联到JavaScript中以进行热重新加载。在生产和测试期间,stylesheet\u pack\u标记将创建适当的HTML标记。

资产管道从用定义的路径加载文件 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"]

当你做一个 require 在你的 application.js 或 application.scss , sprockets 将使用ruby 要求 语句在预定义路径中搜索该文件。

如果是宝石,它会在 .rbenv/version/yourversion 文件夹

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

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

再见法布里齐奥