laravel 如何将 node_modules 中的库正确包含到您的项目中?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/51918932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to properly include a library from node_modules into your project?
提问by William
the question can maybe be stupid but did not find the answer till now.
I'm trying to include a library from node_modules, from what I've learn since yesterday we should include like that with asset:
这个问题可能很愚蠢,但直到现在才找到答案。
我正在尝试从node_modules 中包含一个库,根据我从昨天开始学到的知识,我们应该像这样包含asset:
{{-- bootstrap 4.1.3 --}}
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
I want to add selectize.jsinto my project so I used npm install selectize --saveto be directly install and save into package.json(dependencies).
我想将selectize.js添加到我的项目中,所以我使用npm install selectize --save直接安装并保存到package.json(dependencies)。
My question is, how can I include that now? Just like default bootstrap is. How can I go from node_modules/to public/?
Should I do it manually or there is a more professional/cleaner way to do it?
Thank you for the help.
我的问题是,我现在怎样才能包括它?就像默认引导程序一样。如何从node_modules/转到public/?
我应该手动完成还是有更专业/更清洁的方法来完成?
感谢您的帮助。
回答by William
So after a lot of youtube videos and google it, I found the answer i was looking for.
Here are the steps:
因此,在观看了大量 youtube 视频并在谷歌上搜索之后,我找到了我正在寻找的答案。
以下是步骤:
1- In the webpack.mix.js:
1- 在webpack.mix.js 中:
mix.scripts([
'node_modules/bootstrap/dist/js/bootstrap.js',
'node_modules/selectize/dist/js/selectize.js'
], 'public/js/app.js')
.styles([
'node_modules/bootstrap/dist/css/bootstrap.css',
'node_modules/selectize/dist/css/selectize.css',
'resources/assets/css/app.css'
], 'public/css/app.css');
2- npm run dev
3- importin the view
2- npm run dev
3-在视图中 导入
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<script src="{{asset('js/app.js')}}"></script>
回答by Erubiel
This should work, add this line to the either bootstrap.jsor app.jsfiles.
这应该有效,将此行添加到bootstrap.jsorapp.js文件中。
window.selectize = require('selectize');
Or if you just want to load the js, something like
或者,如果您只想加载 js,例如
require('selectize/dist/selectize.js');
Should work
应该管用
Don't forget to then do a: npm run devor npm run production
不要忘记然后做:npm run dev或npm run production
Note: i never used selectize so i cannot help you on the calls to the library... but something like that should load it.
注意:我从来没有使用过 selectize 所以我无法帮助你调用库......但是应该加载它。
The last step (npm run dev) adds selectize to the compiled app.js on your public folder
最后一步 ( npm run dev) 将 selectize 添加到公共文件夹中已编译的 app.js 中
The CSS part you add it on app.scssjust follow the example that is given.
您添加它的 CSS 部分app.scss只需按照给出的示例进行操作。
Also, before all that... you should have run php artisan preset none/bootstrap/vueand npm installrefer to the docs for more info on this: https://laravel.com/docs/5.6/frontend
此外,在此之前......你应该运行php artisan preset none/bootstrap/vue并npm install参考文档以获取更多信息:https: //laravel.com/docs/5.6/frontend

