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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-14 17:59:23  来源:igfitidea点击:

How to properly include a library from node_modules into your project?

laravelnpmassetsnode-modulesselectize.js

提问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 devnpm 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/vuenpm install参考文档以获取更多信息:https: //laravel.com/docs/5.6/frontend