使用 mix 将 jquery 恒星插件添加到 laravel 5.4 项目

Question

我是使用 Laravel Mix 的新手，我无法添加 jquery stellar 库，当我尝试 npm 运行 dev 时，它显示了这个错误: 找不到此依赖项： * jquery.stellar 在 ./resources/assets/js/bootstrap.js

但我已经使用 npm install --save jquery.stellar 或 npm install jquery.stellar 安装了它

这是我的 webpack 文件： webpack.mix.js:

const { mix } = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
   ;

app.js:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/*Ie10 windows phone fix*/
(function() {
  if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement("style");
    msViewportStyle.appendChild(
      document.createTextNode("@-ms-viewport{width:auto!important}")
    );
    document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
  }
})();


/*Android fix*/
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
});

/*my code*/
$(document).ready(function () {                

    $('.navbar-toggle').click(function () {
        $('.row-offcanvas').toggleClass('active');
    });        

    var w = $(window);
    if (w.width() >= 768 ){
        $('body').removeClass('margin-body');
        $('nav[role="navigation"]').removeClass('navbar-fixed-top');        
    }else{
        $('body').addClass('margin-body');
        $('nav[role="navigation"]').addClass('navbar-fixed-top');        
    }          

    $(window).stellar();    

});

bootstrap.js

window.$ = window.jQuery = require('jquery');

require('jquery.stellar');

require('bootstrap-less');

在我的 node_modules 目录中有一个 jquery.stellar 目录，里面有 3 个文件：README.md,jquery.stellar.js, package.js

不知道怎么回事，谢谢

Answer 1

这是添加 jquery.stellar!

的方法

假设你已经安装了 stellar 作为你的依赖你只需要写下这一行 require( 'jquery.stellar/jquery.stellar' ); 或者 require( 'jquery.stellar/jquery.stellar.js' ); 都可以正常工作

使用 mix 将 jquery 恒星插件添加到 laravel 5.4 项目

add jquery stellar plugin to laravel 5.4 project using mix

javascript

jquery

node.js

laravel-5

laravel-mix