[英]How to use npm installed package in laravel application?
I want to use select2 package in my laravel 5 application.我想在我的 Laravel 5 应用程序中使用select2包。
I installed it using npm install select2
and also ran npm run dev
.我使用
npm install select2
安装它并运行npm run dev
。 It appears in my node_modules folder.它出现在我的node_modules文件夹中。
But how do I actually refer to the files - js and scss of select2 package in my app.blade.php
?但实际上,我怎么参阅文件-选择2包的JS和SCSS在我
app.blade.php
?
Run npm run watch
, because keeps track of all changes in .js
. 运行
npm run watch
,因为它跟踪.js
的所有更改。
In app.js add 在app.js中添加
require('select2/dist/js/select2');
In app.blade.php example: 在app.blade.php示例中:
<div>
<select class="js-select2 css-select2-50">
<option>1</option>
</select>
</div>
I suggest an answer to this thread because it isn't marked as resolved and despite the answer given it didn't allow me to resolve the issue as of the time of reading this.我建议对这个线程给出一个答案,因为它没有被标记为已解决,尽管给出了答案,但在阅读本文时它并没有让我解决问题。
I have since found a functional solution of which here are the details in relation to the question of the OP.从那以后,我找到了一个功能解决方案,这里是与 OP 问题相关的详细信息。 Verified and working with Laravel 8
已验证并与Laravel 8一起使用
Install package via npm通过 npm 安装包
npm install select2
Edit /resources/js/app.js
to import javascript from package编辑
/resources/js/app.js
以从包中导入 javascript
require('./bootstrap'); /* ... */ require('select2'); // Add this /* ... */ Alpine.start();
Edit /resources/css/app.css
to import styles from package编辑
/resources/css/app.css
以从包中导入样式
/* ... */ @import 'select2'; // Add this
Edit /resources/js/bootstrap.js
to enable the use of .select2();
编辑
/resources/js/bootstrap.js
以启用.select2();
window._ = require('lodash'); /* ... */ window.select2 = require('select2'); // Add this
Run NPM运行 NPM
npm run dev npm run watch
NPM result in my case在我的情况下,NPM 结果
Laravel Mix v6.0.39
Laravel Mix v6.0.39
✔ Compiled Successfully in 2982ms✔ 2982ms 编译成功
√ Mix: Compiled successfully in 3.05s
√ Mix:3.05s编译成功
webpack compiled successfullywebpack 编译成功
According to configuration documentation根据配置文档
HTML HTML
<input type="text" class="form-control js-example-basic-single">
JS JS
<script type="text/javascript">
$(document).ready(function () {
$('.js-example-basic-single').select2({
placeholder: 'Select2 testing purpose'
});
});
</script>
Render使成为
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.