配置 JavaScript 和 SASS

Created 6 years ago by 学院君, Updated 6 years ago Revision #1 23284 views 14 likes 0 collects

到目前为止，我们都是在 Laravel 后端进行初始化和扩展包的安装配置，从这一篇教程开始，我们把视线转移到前端。对于前端开发，Laravel 自带了强大的 Laravel Mix，有了这个工具，我们不需要再担心复杂的 Webpack、Sass 配置以及前端文件的编译，虽然我们还是使用 NPM，但是 Laravel Mix 会帮我们打理所有的构建和编译工作，开发者甚至可以在 Laravel 之外使用 Laravel Mix，下面我们基于这个工具开始 Roast 应用的前端开发。

第一步：查看 webpack.mix.js

Laravel 在项目根目录下自带一个默认的 webpack.mix.js 文件用于对前端资源进行处理：

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

/*
 |--------------------------------------------------------------------------
 | 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/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

对我们的应用而言，这些默认配置就已经够了。首先，引入 laravel-mix NPM 模块，接下来的代码是 Laravel Mix 的精华，首先对 resources/assets/js/app.js 源文件进行编译并将其导出到 public/js 目录下，默认导出的文件名也是 app.js；然后以方法链的方式调用 sass 方法对 resources/assets/sass/app.scss 进行编译并将其导出到 public/css 目录，导出的默认文件名是 app.css。

对于更复杂的应用而言，需要运行更多的 Laravel Mix 命令，这些命令都可以在 webpack.mix.js 中编写。

第二步：查看 package.json

接下来我们来看下项目根目录下与前端开发相关的另一个文件 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": "npm run development -- --watch",
        "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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "popper.js": "^1.12",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7"
    }
}

该配置文件也是 Laravel 自带的，包含了一些脚本命令和开发环境依赖库，当我们在本地开发环境构建应用时，可以运行 npm run dev 或 npm run watch，推荐新开一个终端窗口运行 npm run watch，这样就能实时监听 JavaScript/SCSS 文件的修改，修改保存后会立即对修改文件进行重新编译，如果是在线上生产环境构建应用，只需运行 npm run production 即可。

注：package.json 之于 JavaScript 好比 composer.json 之于 PHP，都是用于定义一些脚本和管理包依赖。

在自带的 devDependencies 依赖配置里，我们将使用除了 bootstrap 以外的所有其他依赖。

axios 是一个功能强大的 JavaScript HTTP 客户端，并且可以和 Vue 无缝对接，更多关于 Axios 的明细可参考其官方文档。

jQuery 也会被作为基础库使用，当然 Vue 是整个 SPA 应用前端部分的核心，自然也少不了。

第三步：移除 Bootstrap（可选）

你可以在项目根目录下通过以下命令移除自带的 Bootstrap：

npm remove bootstrap --save-dev
npm remove bootstrap-sass --save-dev

接下来打开 resources/assets/js/app.js 移除下面这行代码：

require('./bootstrap');

这将会移除对 resources/assets/js/bootstrap.js 文件的引用。

然后到终端窗口运行 npm install foundation-sites --save-dev 确保项目中包含了基础组件。

第四步：配置 app.js

在 resources/assets/js/app.js 文件顶部加入这段代码：

window._ = require('lodash');
try {
    window.$ = window.jQuery = require('jquery');
    require('foundation-sites');
} catch (e) {}

然后引入 Axios 库并设置默认请求头 X-CSRF-TOKEN：

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

最后，我们移除 Vue 相关代码：

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example', require('./components/Example.vue'));

最终得到的 resources/assets/js/app.js 文件内容如下：

window._ = require('lodash');

try {
    window.$ = window.jQuery = require('jquery');

    require('foundation-sites');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

const app = new Vue({
    el: '#app'
});

注意到 Vue 绑定到了 '#app' 元素，该元素位于开篇创建的 app.blade.php 视图模板中。

第五步：移除无用的 JavaScript

现在，我们可以移除无用的 JavaScript 文件了，首先移除 resources/assets/js/bootstrap.js 文件，然后移除 resources/assets/js/components 目录。

第六步：配置 SASS

要配置本项目的 SASS 需要做两件事情。

首先，如果你在使用 Foudation （一个强大的响应式前端框架）的话，打开 resources/assets/sass/app.scss 文件并清除其所有内容，然后添加如下这行代码：

@import "node_modules/foundation-sites/assets/foundation.scss";

然后删除 resources/assets/sass/_variables.scss 文件。

第七步：设置 SASS 目录

Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、 mixins、导入等众多功能，并且完全兼容 CSS 语法。当构建应用时我通常遵循 7-1 模式来组织 SASS：Sass 指南，为此需要创建以下目录：

resources/assets/sass/base
resources/assets/sass/components
resources/assets/sass/layouts
resources/assets/sass/pages
resources/assets/sass/themes
resources/assets/sass/abstracts
resources/assets/sass/vendors

好了，关于 JavaScript 和 Sass 的初始化到此结束，下一篇教程我们将聚焦 Vue 及其生态系统扩展组件（Vue-Router 和 Vuex）。到目前为止，看起来我们的 Roast 应用还不像那么回事，没有任何可用功能，因为我们现在还在为这个单页面应用做基础准备工作，万丈高楼平地起，随着教程往前推进，我们将逐步为 Roast 应用添砖加瓦，最终让其成为一栋别致的「建筑物」。