[英]Requiring a npm package in laravel mix?
我在网上看到这个问题被回答了几次。 但是,我只是没有让它发挥作用。 我希望你能帮忙。
我将 Laravel 5.5 与 Laravel Mix 一起使用。 我不想手动将一些我需要的 js 文件加载到特定目录中,而是想通过 npm 安装包并在 laravel mix 中要求它们。
这适用于开箱即用的引导程序。 我将 3.3.7 版本换成了 4.0.0 alpha6。
npm install bootstrap-v4-dev -D
然后在resources/assets/js/bootstrap.js
我把它改成这样
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-v4-dev');
} catch (e) {}
它有效。 我可以运行npm run dev
就好了。 现在,我想用另一个 npm 包做同样的事情。 所以我做npm install now-ui-kit -D
我的 package.json 现在看起来像这样
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.16.2",
"bootstrap-v4-dev": "^4.0.0-alpha.6",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"now-ui-kit": "^1.0.1",
"popper.js": "^1.11.1",
"vue": "^2.1.10"
},
"dependencies": {
"now-ui-kit": "^1.0.1"
}
}
然后在 bootstrap.js 文件中,我添加require('now-ui-kit');
,但现在当我尝试编译时,出现以下错误:
ERROR in ./resources/assets/js/bootstrap.js
Module not found: Error: Can't resolve 'now-ui-kit' in '/home/vagrant/code/user/resources/assets/js'
@ ./resources/assets/js/bootstrap.js 15:0-21
@ ./resources/assets/js/app.js
@ multi ./resources/assets/js/app.js
我也尝试放置require('now-ui-kit');
在app.js
甚至webpack.mix.js
..
没有任何效果,我真的不明白我做错了什么..有人可以帮忙吗?
请按照以下步骤操作:
npm
包让安装 jQuery npm i jquery
。.js
文件,比如resources/js/package.js
webpack.mix.js
在webpack.mix.js
添加package.js
mix.js([
'resources/js/package.js',
'resources/js/otherJsFile.js'
], 'js/app.js').extract([
// Extract packages from node_modules to vendor.js
'jquery'
])
在resources/js/package.js
写入:
import $ from 'jquery';
最后在.blade
文件上使用js/vendor.js
, js/app.js
。
现在您可以在从node_modules
导入的网站上使用 jQuery
运行命令
npm install -D bootstrap@4.0.0-beta.3
然后使用以下代码
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.