npm 包 laravel-mix-cli 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，前置工具的使用是必不可少的，而 laravel-mix-cli 是一个强大的前置工具，它是基于 webpack 的且内置多种实用功能，可以大大提升我们的开发效率。本文将为大家详细介绍 laravel-mix-cli 的使用方法和常见功能，以及如何使用它来进行工作。

安装

我们首先需要安装 Node.js 和 npm，可前往官网 https://nodejs.org/en/ 下载并安装。之后在命令行窗口输入以下命令来安装 laravel-mix-cli：

npm install -g laravel-mix-cli

常用命令

初始化项目

在命令行窗口中进入你的项目根目录，执行以下命令来初始化项目：

npm init -y

安装依赖

执行以下命令来安装 laravel-mix 以及其他必要的依赖：

npm install laravel-mix --save-dev

编译项目

执行以下命令来编译项目：

npm run dev

打包项目

执行以下命令来打包项目：

npm run prod

功能

编译 CSS

我们可以使用 mix.sass() 函数来编译 Sass 文件，或使用 mix.less() 函数来编译 Less 文件，如下所示：

mix.sass('resources/sass/app.scss', 'public/css')
   .less('resources/less/app.less', 'public/css');

编译 JavaScript

我们可以使用 mix.js() 函数来编译 JavaScript 文件，使用 mix.react() 函数来编译 React 文件，如下所示：

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

复制文件

我们可以使用 mix.copy() 函数来复制文件，如下所示：

mix.copy('resources/assets/img', 'public/img');

注入资源

我们可以使用 mix.version() 函数来自动将编译后的 CSS 和 JavaScript 文件引入到 HTML 中，如下所示：

mix.version();

实例

我们可以使用 laravel-mix 来实现一个简单的 To-Do List 应用，具体实现步骤如下：

步骤1 - 创建项目

首先我们需要新建一个项目目录，执行以下命令来初始化项目：

npm init -y

步骤2 - 安装依赖

执行以下命令来安装 laravel-mix 以及其他必要的依赖：

npm install laravel-mix react react-dom jquery popper.js bootstrap --save-dev

步骤3 - 编写代码

在项目根目录下创建一个 src 目录，然后在 src 目录下创建 index.js 和 index.html 文件。在 index.html 文件中引入 Bootstrap、jQuery 和 popper.js，代码如下：

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  ----- --------------- ---------------------------- -------------------
  ------------ ------------
  ----- ---------------- ------------------------------------------------------------
-------
------
  ---- ------------------
    ---- ------------
      --- ------------------ ----------- ---------
      ---- --------------- ---------
        ----- --------------------
            ------ ----------- ------------- ------------------- -------- ---------------------
            ------- ------------- ------------- ---------- --------------------------
        -------
        --- -------------- ----------------- -----------
      ------
    ------
  ------
  ------- ---------------------------------------------------------
  ------- ----------------------------------------------------------------
  ------- ------------------------------------------------------------------
  ------- ---------------------------------
-------
-------

在 index.js 中实现 To-Do List 应用的核心功能代码，代码如下：

-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ------------

-------- ---------- ------ ------ ------------ -- -
  ------ -
    --- ----------------------------
      -------
      ------- ------------- ---------------- ----- ----------- -- ---------------------
        ----- ---------------------------------
      ---------
    -----
  --
-

-------- ---------- -
  ----- ------- --------- - -------------

  -------- ----------- -
    ----- ----- - ------------------------------------
    ----- ----- - -------------------
    -- ------ --- --- -
      -----------------
      -------
    -
    ------------------- --------
    ----------- - ---
  -

  -------- ------------------- -
    ----- -------- - -----------
    ---------------------- ---
    -------------------
  -

  ------ -
    --
      ---- ---------------------- ------- -------------- -----------
      ------------------ ------ -- -
        --------- ----------- ------------- ------------- -----------------------------
      ---
      -----
      ---- ------------------------
        ------- ------------- -------------- ---------- ----- ----------- -- ---------------------------
      ------
      ----- ------------------------
        ------ ----------- ------------- ----------------------- -------- ----------------------
        ------- ------------- -------------- ------------ ---------------------------------
      -------
    ---
  --
-

---------------------------- --------------------------------------

步骤4 - 配置 `laravel-mix`

在项目根目录下创建一个 webpack.mix.js 文件，代码如下：

-- -------------------- ---- -------
----- --- - -----------------------
----- ---- - ----------------

--------------------------

------------------------- -------
  ----------------------- -------
  ----------------------- -------
  ----------------
    -------- -
      ------ -
        ------ ----------------------- ------------------------
        ------------ ----------------------- ---------------------------
      -
    -
  --
  -----------

步骤5 - 编译并打包项目

在命令行窗口中执行以下命令来编译项目：

npm run dev