JavaScript

未匹配的标注

JavaScript

mix.js(src | [src], output);

简单的一行代码,Laravel Mix 可以执行很多重要的操作。

  • ES2017 + 模块编辑
  • 创建并且编译 .vue 组件 (通过 vue-loader)
  • 模块热替换
  • Tree-shaking 打包技术, webpack 2 里新增的 (移除未使用的库代码)
  • 提取和拆分 vendor 库 (通过 mix.extract()), 让长期缓存变的容易
  • 自动版本化(文件哈希),通过 mix.version()

用法

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

// 1\. 单个 src 文件和输出路径:
mix.js('src/app.js', 'dist/app.js');

// 2\. 应用于多个 src 文件:
mix.js(['src/app.js', 'src/another.js'], 'dist/app.js');

// 3\. 应用于多个入口/出口:
mix.js('src/app.js', 'dist/').js('src/forum.js', 'dist/');

Laravel 示例

传统的 Laravel 安装。 JavaScript 入口文件默认位于 ./resources/assets/js/app.js。让我们准备一个 webpack.mix.js 文件将其编译为 ./public/js/app.js

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

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

完成!现在,您可以使用上面的所有方法,只需要调用一个方法即可。
要触发编译,只需在命令行运行 npm run dev 命令。

Vue 组件

Laravel mix 包罗万象,支持 .vue 组件编译,如果你不使用 vue 的话,可以忽略这块。

单文件组件是 vue 最重要的特征之一。在一个文件里为一个组件定义模板,脚本,样式表。

./resources/assets/js/app.js
import Vue from 'vue';
import Notification from './components/Notification.vue';

new Vue({
    el: '#app',
    components: { Notification }
});

在上面,我们导入了 vue (首先你需要执行 npm install vue --save-dev安装vue),然后引入了一个叫 Notification 的 vue 组件并且注册了 root vue 实例。

./resources/assets/js/components/Notification.vue

<template>
    <div class="notification">
        {{ body }}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                body: 'I am a notification.'
            }
        }
    }
</script>

<style>
    .notification {
        background: grey;
    }
</style>

如果你了解vue,这些你都会很熟悉,继续。

./webpack.mix.js

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

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

执行npm run dev 编译文件,简单的创建一个 HTML 文件,引入 ./js/app.js 文件,然后在浏览器里查看吧!

React 支持

Laravel Mix 还提供基本的 React 支持。只需将 mix.js() 更改为 mix.react() ,然后使用完全相同的参数集。在背后,Mix 将引入并引用 React 所需的任何 Babel 插件。

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

当然,如果你仍然希望通过 NPM 安装 React 和 ReactDOM ,必须解决可能出现的问题。

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/laravel-mix/4.0...

译文地址:https://learnku.com/docs/laravel-mix/4.0...

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
贡献者:5
讨论数量: 0
发起讨论 只看当前版本


暂无话题~