- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经在网上看到这个问题被回答过几次了。但是,我只是没有让它工作。我希望你能帮上忙。
我正在使用 Laravel 5.5 和 Laravel Mix。我不想手动将一些我需要的 js 文件加载到特定目录中,而是想通过 npm 安装软件包并在 laravel mix 中需要它们。
这适用于开箱即用的 Bootstrap 。我将 3.3.7 版本替换为 4.0.0 alpha6。
npm 安装 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
关于laravel - 在 laravel mix 中需要一个 npm 包吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47224228/
任何调用 npm run升级到 Mix v4.x 后导致 mix 未定义。我在每次运行时都会看到这样的错误: > npm run development > @ development /projec
升级到 Laravel-Mix 6 之前: Laravel-Mix 版本:5.0.9(支持 Webpack 4) NPM 版本:6.14.5 通过这个 laravel 混合版本,我能够通过运行 pac
在 Laravel 5.5 中,我使用 laravel-mix 来编译我的 Assets 。 但是我不清楚:mix.js 之间有什么区别?和 mix.scripts为什么我要使用一个而不是另一个? 最
我有以下 webpack.mix.js: const { mix } = require('laravel-mix'); mix.scripts([ 'resources/assets/js/
目前,我正在寻找在运行 mix 任务时添加 SQL 语句日志记录的方法。例如,mix ecto.rollback 和 mix ecto.migrate 等命令输出信息: ... 13:45:53.01
我知道这个问题已经被问过了,答案总是单独的答案。 但是我看到 Mix.EctoSQL.ensure_started 提到了很多,这似乎是公认的方法。 然而,在 ecto_sql 3.1.2 中,此功能
mix compile ==> gettext could not compile dependency :gettext, "mix compile" failed. You can recompi
我正在使用 Laravel 5.5 ,在 webpack.mix 文件中,mix.styles 函数完美运行,我完美地编译了我的 css 文件,但是mix.scripts 不编译我在文档中找到的 js
如果我有一个mix.exs文件,例如: defmodule Mix.Tasks.My_task do use Mix.Task @shortdoc "Perform my task" de
这是我第一次使用 Laravel Mix、NodeJS 和 NPM。我试图遵循 Laravel 的文档并相信我做得对,但谁知道呢。 我正在尝试将多个 CSS 文件合并为一个。 webpack.mix.
我对系统发育回归模型比较陌生。过去,当我的树中每个物种只有 1 个条目时,我使用了 PGLS。现在我有一个包含总共 9 个物种的数千条记录的数据集,我想运行一个系统发育模型。我阅读了最常见软件包(例如
TLDR; 您是否必须链接 Laravel Mix 方法来维护执行顺序?是否有任何异步方法会阻止使用以下非链接模式,mix.scripts(); mix.js(); mix.sass(); ? 我运行
我想为支持“显示:网格”但不支持 IE/MS Edge 的浏览器提供特定部分的 CSS。你如何混合正面和负面的@support 查询? 你能写“and not”还是有类似的符号?不幸的是,以下方法不起
在生产中,加载我使用的 Assets ,例如: 并期望在编译时看到: 但是我只是看到相对路径: webpack.mix.js: mix .js('resources/assets/js/ap
有人可以向我解释一下 MIX 中的除法(来自 Knuth 的 TAOCP)是如何在字节到字节的基础上工作的吗? rA = |-| . . . .0| rX = |+|1235|0|3|1| 内存位置
我正在尝试使用我从 themeforest 与 Laravel 购买的主题 我已经使用 mix.copy 将我的字体从 node_modules 移动到我的 public 目录,这工作正常。/ 但是,
至少就在两周前,我一直在代理后面使用mix。但是我昨天发现 mix 无法在代理后面工作。混合版本是1.1.1。mix local.hex 运行。但是mix deps.get 出现错误。 $ mix d
我有一个 C++ 程序,我在其中使用递归迭代器遍历我作为参数提供给程序的文件夹。 问题是,当我在路径上调用 .string 时,我在路径中混合了\和/。使用 .generic_string 修复了这个
所以我有一个 JS 文件,我想使用 Laravel mix 进行混合、复制和压缩;我的 webpack.mix.js 文件如下所示: const mix = require('laravel-mix'
我有一个 Elixir 伞形项目。这个项目中的每个应用程序都可以使用 mix escript.build 编译成可执行文件。 我正在尝试从伞项目的根目录运行此命令并收到以下错误 ** (Runtime
我是一名优秀的程序员,十分优秀!