安装node.js
命令行执行添加js库
//添加jquery
npm install juery;
//添加select2
npm install select2;
js库会安装在/node_modules
检查根目录package.json,是否包含了所需的js库
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@babel/preset-react": "^7.13.13",
"@popperjs/core": "^2.10.2",
"axios": "^0.21",
"bootstrap": "^5.1.3",
"jquery": "^3.7.1",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1"
},
"dependencies": {
"postcss": "^8.4.37",
"select2": "^4.1.0-rc.0"
}
}
检查根目录webpack.mix.js是否定义了要加入的js库。实例代码是将各js库独立出来。方便独立使用。
const mix = require("laravel-mix");
const path = require("path");
const webpack = require("webpack");
/*
|--------------------------------------------------------------------------
| 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/js/app.js", "public/js")
.react()
.sass("resources/sass/app.scss", "public/css")
.css("resources/css/app.css", "public/css")
.sourceMaps()
// 提取公用库到单独的文件
.extract(["jquery", "select2"])
// 复制Select2的CSS到public目录
.copy(
"node_modules/select2/dist/css/select2.min.css",
"public/css/select2.min.css"
)
// 复制jQuery和Select2的JS到public目录(若extract不满足需求)
.copy("node_modules/jquery/dist/jquery.min.js", "public/js/jquery.min.js")
.copy(
"node_modules/select2/dist/js/select2.min.js",
"public/js/select2.min.js"
);
命令提示符下进入项目目录,执行如下操作,将对如上设定进行操作:
npm run dev
操作完成,blade文件加入js代码
<script src="{{ mix('js/jquery.min.js') }}"></script>
<script src="{{ mix('js/select2.min.js') }}"></script>
<script src="{{ mix('js/manifest.js') }}" defer></script>
<script src="{{ mix('js/vendor.js') }}" defer></script>
<script src="{{ mix('js/app.js') }}" defer></script>
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/select2.min.css') }}">
//defer用于页面完成后引用