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.js
or app.js
files.
这应该有效,将此行添加到bootstrap.js
orapp.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 dev
or 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.scss
just follow the example that is given.
您添加它的 CSS 部分app.scss
只需按照给出的示例进行操作。
Also, before all that... you should have run php artisan preset none/bootstrap/vue
and npm install
refer 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