如何使用webpack在Rails6中使用第三方js？
在Rails 6中使用第三方JavaScript库，可以通过Webpack来实现。Webpack是一个模块打包工具，可以将各种资源（包括JavaScript、CSS、图片等）打包成静态文件，方便在浏览器中加载和使用。
以下是在Rails 6中使用Webpack来使用第三方JavaScript库的步骤：
- 安装Webpack：首先，确保你的Rails项目已经安装了Webpack。可以通过在Gemfile中添加
webpackergem来安装Webpacker，然后运行bundle install命令进行安装。 - 安装第三方JavaScript库：使用npm或yarn来安装需要使用的第三方JavaScript库。例如，如果要使用jQuery，可以运行以下命令来安装：
- 安装第三方JavaScript库：使用npm或yarn来安装需要使用的第三方JavaScript库。例如，如果要使用jQuery，可以运行以下命令来安装：
- 安装完成后，该库将出现在项目的
node_modules目录中。 - 创建Webpack配置文件：运行以下命令来生成Webpack的配置文件：
- 创建Webpack配置文件：运行以下命令来生成Webpack的配置文件：
- 这将在项目根目录下生成一个
config/webpack目录，并包含一些默认的Webpack配置文件。 - 配置Webpack：打开
config/webpack/environment.js文件，添加以下代码来引入第三方JavaScript库： - 配置Webpack：打开
config/webpack/environment.js文件，添加以下代码来引入第三方JavaScript库： - 这样配置后，你就可以在Rails应用的任何地方使用
$或jQuery来访问jQuery库了。 - 使用第三方JavaScript库：在需要使用第三方JavaScript库的地方，可以直接在JavaScript文件中引入。例如，在
app/javascript/packs/application.js文件中，可以添加以下代码来引入并使用jQuery： - 使用第三方JavaScript库：在需要使用第三方JavaScript库的地方，可以直接在JavaScript文件中引入。例如，在
app/javascript/packs/application.js文件中，可以添加以下代码来引入并使用jQuery： - 这样，你就可以在Rails应用的前端代码中使用第三方JavaScript库了。
请注意，以上步骤是在Rails 6中使用Webpack来使用第三方JavaScript库的一般步骤。具体的配置和使用方式可能因项目的具体情况而有所不同。另外，对于不同的第三方JavaScript库，可能还需要进行其他的配置或使用方式，请参考相应库的官方文档或社区资源。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯区块链服务（TBaaS）：https://cloud.tencent.com/product/tbaas
- 腾讯云游戏引擎（GSE）：https://cloud.tencent.com/product/gse
- 腾讯云直播（CSS）：https://cloud.tencent.com/product/css
相关·内容
1回答
如何在Rails 6.0.3.3中使用jQuery？
jquery、ruby-on-rails、ruby
这里是packs/application.js require("@rails/ujs").start()require("@rails/activestorage
浏览 29提问于2020-10-04得票数 1
1回答
添加jQuery rails 6.1
javascript、jquery、node.js、ruby-on-rails、webpack
我试图在rails 6.1中设置jQuery，但是我遇到了错误，但我相信它的设置是正确的。我做了以下工作：2在config/webpack/environments.js，我有const webpack = require("webpack"
浏览 1提问于2021-06-21得票数 0
1回答
Rails 6的webpack抛出了'Uncaught：$ is not defined‘
javascript、jquery、ruby-on-rails、webpack、ruby-on-rails-6
您好，我最近开始使用Ruby2.6.5开发Rails6。由于Rails6已经引入了webpack，所以我尝试用webpack加载我的js文件。尽管我已经在appliation.js中需要了jquery，但我还是得到了下面的错误：application.jsstart()
require("@rail
浏览 0提问于2019-11-03得票数 7
1回答
/node_modules/babel-loader/lib/index.js)：语法错误意外令牌，预期"，“
javascript、jquery、ruby-on-rails、webpack
我在javascript/packs/style.js中有这段代码，我在application.js中使用了` `require("packs/style")需要它。/app/javascript/packs/application.js (application.js:1)
at __webpack_require__ (bootstrap:19)&#x
浏览 1提问于2021-04-26得票数 1
1回答
有没有替代Node.js来创建Rails 6应用程序的方法？
node.js、ruby-on-rails-6、rhino
Rails的“入门”指南说，你需要安装Node.js和Yarn。有没有像Rhino这样的Node.js JavaScript运行时的替代品？
浏览 24提问于2020-09-07得票数 1
1回答
如何在rails 6版本中使用Rails的js.erb特性
ruby-on-rails、webpack、ruby-on-rails-6
如何在rails 6版本中使用Rails的js.erb特性？ 对于带有webpacker的Rails6，我们需要添加Jquery作为自定义选项。有没有办法让js.erb正常工作。我让jquery使用下面的设置 const { environment } = require('@rails/webpacker')
environmen
浏览 16提问于2020-01-24得票数 1
1回答
使用rails 6的引导程序
ruby-on-rails、twitter-bootstrap
我试图让bootstrap在我的rails 6 web应用程序中工作，但它不起作用。我在youtube和这里关注了多个教程，但似乎都不起作用。在我可能出错的地方，任何帮助都将不胜感激。4.1'gem 'bootstrap-sass', '~> 3.4.1'
gem 'sass-rails', '>= 6' Application.js
浏览 14提问于2020-03-23得票数 5
回答已采纳
2回答
如何使用webpack在Rails6中使用第三方js？
rubygems、webpack-4、ruby-2.7、ruby-on-rails-6
在Rails项目中使用ruby 2.7.1p83和rails 6.0.3.2。 进口huebee在钢轨内的应用程序，webpack。yarn add huebee 将其css和js文件分别导入到application.js和application.css文件中： for application.js
import 'huebee/huebee工作正常，并显示颜色选择器的drow框： 但是当我在js
浏览 57提问于2020-08-10得票数 0
回答已采纳
1回答
如何在Rail6版本的application.html中添加特定于控制器的js文件
ruby-on-rails
使用webpack在Rails6中包含.js文件
<%= javascript_include_tag params[:controller] if javascript_exists?
浏览 3提问于2019-07-11得票数 0
1回答
Rails & Webpack:如何调用应用程序包中的函数？
webpack、ruby-on-rails-6
我似乎不知道如何使用Webpacker调用Rails6中的函数。如果在控制台中调用它们，我会得到未定义函数的消息。如何调用这些函数？或者有没有一个好的理由让我不这么做？最简单的问题是:在application.js中，我有一个名为something的函数。).on("turbolinks:load", something())
something 但是，当我在带有onClick()的链接中<e
浏览 10提问于2019-08-29得票数 3
回答已采纳
1回答
在Rails 6中使用Webpack解析来自node_modules的SCSS中的相对图像链接
webpack、webpacker、ruby-on-rails-6
我正在尝试将MediaElement.js整合到一个Rails6应用程序中，并且我正在尝试使用对于Rails6来说似乎是“正确的方式”，即，使用yarn安装模块并使用Webpacker管理它。在普通的超文本标记语言中，使用CDN，我只需在我的<head>标记中添加以下内容： <script src="https://cdn.jsdelivr.net
浏览 18提问于2019-09-12得票数 1
回答已采纳
1回答
导航栏中的下拉列表在rails 6中不起作用
jquery、ruby-on-rails、bootstrap-4、rubygems、ruby-on-rails-6
在导航栏中使用bootstrap 4的下拉菜单不工作。我正在使用rails6。gemfile和application.js如下所示。Bootstrap和jquery已正确安装。Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7' application.js文件：- require("@rails
浏览 19提问于2020-09-24得票数 1
回答已采纳
1回答
Rails 6 Web Packer -添加引导程序模板。“未捕获的函数：$(...).dateRangePicker不是一个函数”的问题
jquery、ruby-on-rails-6、webpacker、daterangepicker
我正在尽我最大的努力将Webpacker和Rails6分解开来。我正在遵循一个教程，该教程描述了如何最好地在一个新的Rails6项目中添加一个bootstrap主题。当通过yarn添加到js库中时，所有工作都正常。然后，我通过在javascripts中创建供应商文件夹并使用import调用它来添加datepicker-category.js y.js文件。当我将新的js文件添加到供
浏览 46提问于2021-02-11得票数 0
2回答
Rails Webpacker -未捕获的TypeError：$(...).tooltip不是一个函数
javascript、ruby-on-rails、node.js、webpack
我有一个Rails6应用程序，资产是使用Webpack 4.39.1 ()编译的。我已经将JQuery 3.4.1和Popper.js添加到了webpack ProvidePlugin，如下所示(config/webpack/environment.js)：
const { environment它是webpack的入口点。我已经添加了Bootstrap 4.1.1并将其导入到application.js中
浏览 0提问于2019-09-26得票数 5
1回答
无法使用Bootstrap-5脚本和Rails6 (尽管这里有许多问答：
javascript、ruby-on-rails、ruby-on-rails-6、webpacker、bootstrap-5
这里是JS/Bootstrap和webpack的超级初学者(熟悉超文本标记语言、(S)CSS和PHP，现在尝试RoR ...) 我正在尝试将Bootstrap-5连接到Rails-6。我手动将引导程序脚本与其CDN中的<script>标记链接起来-这确实起到了作用，但当然不应该是解决方案。那么，我忽略了什么让引导脚本在Rails6上工作的愚蠢事情呢？config/webpack/environment.js ment.j
浏览 22提问于2021-04-08得票数 1
5回答
如何在rails 6 webpacker中添加jquery第三方插件
javascript、ruby-on-rails、webpacker、ruby-on-rails-6
我知道这很简单，但随着Rails6的更新，在Rails6中有了新的语法来管理javascript资产，这是由webpacker维护的。//application.jsrequire("turbolinks").start()
require("@rails/activestorage
浏览 2提问于2019-02-27得票数 18
1回答
WebPacker未加载模块(metisMenu)
jquery、ruby-on-rails、webpacker、metismenu
我在Webpacker/Rails6中加载插件metisMenu时遇到了一个问题 我一直收到错误：Uncaught TypeError: $(...).metisMenu is not a function$('[data-toggle="popover"]').popover()impor
浏览 42提问于2020-09-05得票数 0
1回答
如何在Webpack中将供应商模块peerDependencies排除在导出之外？
javascript、angularjs、webpack、angular-material
问题背景
我想创建一个在angular-material框架上使用自定义组件的UIkit。有了Webpack，我可以将我定制的组件和angular-material捆绑成类似uikit.js的东西，然后移植到其他应用程序中。但是，我不想在这个uikit.js中包含angula
浏览 1提问于2016-05-14得票数 9
1回答
导入并使用带有Webpack和Vue.JS的第三方包
javascript、node.js、webpack、vue.js
日安，基本上，我正在尝试使用已经安装在我的node_modules中的第三方包。在本例中，我安装了一个名为"Vuex Toast“(针对vue.js的警报)的包。
.../src-modules/app.js (bl
浏览 1提问于2017-12-14得票数 1
1回答
在Rails 6.1上使用咖啡加载器时，我得到`this.getOptions不是一个函数错误
ruby-on-rails、ruby、webpack、coffeescript、webpacker
我用Ruby 2.7.2和Ruby on Rails 6.1.3创建了一个全新的Rails应用：然后我使用CoffeeScript命令安装了Rails编译器：但是当我启动webpack-dev-server时，他无法正确编译：
Asset.js 515 KiB application [emitted] [immutable] appli
浏览 19提问于2021-03-11得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
