1. NPM

NPM 是 Node.js 的包管理和任务管理工具,其强大的功能也是 Node.js 能够如此成功的因素之一。在使用 NPM 安装第三方模块(也可理解为扩展包)时,你需要在 package.json 中对要安装的模块指定好名称和版本号。然后运行下面命令进行安装:

$ npm install

在开始安装之前,npm install 命令会先检查 node_modules 文件夹是否已存在要安装的模块,如果该模块已安装,则跳过,接着安装下一模块。安装完成后,所有的第三方模块都将被下载到 node_modules 文件夹中。你也可以使用下面命令来强制安装所有模块,不管该模块之前是否安装过:

$ npm install -f

由于国内的网络环境原因,我们在使用 NPM 安装第三方模块时会耗费较长时间,为此我们可通过淘宝提供的 cnpm 镜像来解决该问题。如果你的虚拟机是通过本教程提供的 Homestead 安装包进行安装,则可以使用 cnpm 命令来代替 npm,如安装第三方模块时可使用下面命令替代:

$ cnpm install

出于效率考虑,我们使用更加现代化的 Yarn 来替代 NPM 的包管理功能。然而我们仍然会使用到 NPM 的任务管理功能,如命令 npm run watch-poll


2. Yarn

Yarn 是 Facebook 在 2016 年 10 月开源的一个新的包管理器,用于替代现有的 NPM 客户端或者其他兼容 NPM 仓库的包管理工具。Yarn 在保留 NPM 原有工作流特性的基础上,使之变得更快、更安全、更可靠。在后面的项目开发中,我们统一使用 Yarn 来代替 NPM 进行安装包的管理。

我们可通过下面命令来安装当前项目的所有包:

$ yarn install

或是使用下面这种更加简洁的命令:

$ yarn

当执行 yarn install 命令时,Yarn 会先判断当前文件夹中是否存在 yarn.lock 文件,存在的话会按照文件中特定的包版本进行安装,否则读取 package.json 文件中的内容并发送到服务器上解析,解析成功后把结果写入 yarn.lock 文件中,最后安装扩展包。 Laravel 自带 yarn.lock 文件,此文件的作用与 composer.lock 一致,是为了保证项目依赖代码版本号绝对一致而存在的。

另外,我们也可以通过下面命令来添加指定的包:

$ yarn add [package]


3. Laravel Mix

Laravel Mix 一款前端任务自动化管理工具,使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API,让你能够为你的 Laravel 应用定义 Webpack 编译任务。

Mix 支持许多常见的 CSS 与 JavaScript 预处理器,通过简单的调用,你可以轻松地管理前端资源。我们可以在 webpack.mix.js 文件中制定一些如资源文件的编译、压缩等任务。

Laravel 已默认为我们生成了 webpack.mix.js 文件,并集成了 laravel-mix 模块。

webpack.mix.js

let mix = require('laravel-mix');

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

let mix = require('laravel-mix');webpack.mix.js 的解析引擎是 Node.js ,在 Node.js 中require 关键词是对模块进行引用。

Mix 提供了一些函数来帮助你使用 JavaScript 文件,像是编译 ECMAScript 2015、模块编译、压缩、及简单的合并纯 JavaScript 文件。更棒的是,这些都不需要自定义的配置。

mix.js('resources/assets/js/app.js', 'public/js')

以上这一行简单的代码,支持:

  • ECMAScript 2015 语法;
  • Modules;
  • 编译 .vue 文件;
  • 针对生产环境压缩代码。

js 方法的第二个参数可以用来自定义生成的 JS 文件的输出目录。

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

sass 方法可以让你将 Sass 文件编译为 CSS,你可以使用第二个参数来自定义生成的 CSS 的输出目录。


开始使用 Mix

使用 Mix 很简单,首先你需要使用以下命令安装 npm 依赖:

$ yarn install

安装成功后,运行以下命令即可:

$ npm run watch-poll

watch-poll 会在你的终端里持续运行,监控 resources 文件夹下的资源文件是否有发生改变。在 watch-poll命令运行的情况下,一旦资源文件发生变化,Webpack 会自动重新编译。

1 Comment

发表评论

电子邮件地址不会被公开。 必填项已用*标注