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 ,必须解决可能出现的问题。
本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
推荐文章: