Laravel 8中通过npm安装使用JS/CSS库的完整操作流程是怎样的？

以下是适配任意JS/CSS库的通用操作步骤，同时附Font Awesome的实操示例：

通用操作步骤 #

1. 安装依赖包 #

执行npm安装命令，将目标库安装到项目的node_modules目录：

npm install --save <库名>
# 安装开发依赖使用 --save-dev 参数
npm install --save-dev <库名>

2. 配置webpack.mix.js（仅特殊场景需要） #

大部分纯JS/纯CSS的库不需要修改该配置，仅当库包含静态资源（字体、图片）或者需要自定义编译规则时才需要调整，常见配置场景：

• 复制静态资源到public目录：使用mix.copy('源路径', '目标路径')
• 分离第三方依赖和业务代码：使用mix.extract(['库1', '库2'])，会单独生成vendor.js文件
• 配置预处理器：如果使用Sass/Less等，对应调整mix.sass()/mix.less()的参数

3. 入口文件引入资源 #

在项目默认的资源入口文件中引入安装好的库：

• JS类库：在resources/js/app.js中添加导入语句

  // 全量导入
  import '库名'
  // 按需导入（支持按需引入的库可使用，减少打包体积）
  import { 所需方法 } from '库名'
  // 如果需要挂载到全局window对象使用，额外添加
  window.自定义名称 = 导入的对象
  

• CSS类库：在resources/css/app.css中添加导入语句，路径前缀~代表自动定位到node_modules目录

  @import '~库名/对应css文件路径';
  

4. 编译资源 #

执行npm命令编译资源，编译后的文件会生成到public目录下：

# 开发环境编译，不压缩
npm run dev
# 开发环境监听文件变动，自动编译
npm run watch
# 生产环境编译，自动压缩混淆代码
npm run prod

5. 页面模板引入编译后的资源 #

在Blade模板的对应位置引入编译好的资源文件即可使用：

<head>
  <!-- 引入编译后的CSS -->
  <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
  <!-- 页面内容 -->
  <!-- 引入编译后的JS -->
  <script src="{{ mix('js/app.js') }}"></script>
</body>

Font Awesome 实操示例 #

你已经完成了安装步骤：npm install --save @fortawesome/fontawesome-free，后续操作如下：

1. 调整webpack.mix.js，复制字体文件到public目录：

   const mix = require('laravel-mix');
   
   mix.js('resources/js/app.js', 'public/js')
       .postCss('resources/css/app.css', 'public/css');
   
   // 新增复制字体的配置
   mix.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts');
   

2. 在resources/css/app.css中引入Font Awesome的样式：

   @import '~@fortawesome/fontawesome-free/css/all.min.css';
   

3. 执行编译命令：npm run dev
4. 在Blade模板引入编译后的app.css后，即可直接使用图标，示例：

   <i class="fa-solid fa-house"></i>
   

注意事项 #

• 修改webpack.mix.js配置后，需要重启npm run watch进程才会生效
• 生产环境部署时必须执行npm run prod，压缩后的资源体积更小，加载速度更快
• 支持按需引入的库尽量按需导入，避免打包不必要的代码

内容的提问来源于stack exchange，提问作者Kasun Jalitha