web-dev-qa-db-ja.com

node_modulesのライブラリをプロジェクトに正しく含めるにはどうすればよいですか？

質問は馬鹿げているかもしれませんが、今まで答えを見つけることができませんでした。
node_modulesからライブラリを含めようとしています。昨日から学んだことから、そのようにassetで含める必要があります。

{{-- bootstrap 4.1.3 --}} 
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">

selectize.jsをプロジェクトに追加したいので、npm install selectize --saveを使用して、直接インストールしてpackage.json（dependencies）に保存します。

私の質問は、どうすれば今それを含めることができるのですか？デフォルトのようにbootstrap is is。どのようにしてnode_modules /からpublic /に移動できますか？
手動で行うべきですか、それとももっと専門的でよりクリーンな方法がありますか？
お手伝いありがとう。

laravelnpmassetsnode-modulesselectize.js
10
William

だから多くのyoutubeビデオとそれをグーグルで検索した後、私は探していた答えを見つけました。
手順は次のとおりです。

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- importビュー内

<link rel="stylesheet" href="{{asset('css/app.css')}}">  
<script src="{{asset('js/app.js')}}"></script>
18
William

これは動作するはずです。この行をbootstrap.jsまたはapp.jsファイル。

window.selectize = require('selectize');

または単にjsをロードしたい場合は、次のようなもの

require('selectize/dist/selectize.js');

うまくいくはず

次に行うことを忘れないでください：npm run devまたはnpm run production

注：私はselectizeを使用したことがないので、ライブラリの呼び出しを支援することはできません...しかし、そのようなものはそれをロードするはずです。

最後のステップ（npm run dev）パブリックフォルダーのコンパイル済みapp.jsにselectizeを追加します

追加するCSSパーツapp.scss与えられた例に従ってください。

また、その前に... php artisan preset none/bootstrap/vueおよびnpm installこれについての詳細は、ドキュメントを参照してください： https://laravel.com/docs/5.6/frontend

4
Erubiel