扩展 Mix

您可以使用 Mix 在后台构建其基于组件的 API 系统 - 无论是为您自己的个人项目扩展 Mix，还是作为可重用包贡献给大家。

示例

// webpack.mix.js;
let mix = require('laravel-mix');

mix.extend('foo', function(webpackConfig, ...args) {
    console.log(webpackConfig); // 已编译的 webpack 配置对象。
    console.log(args); // 传递给 mix.foo() 的值;  -  ['some-value']
});

mix.js('src', 'output').foo('some-value');

在上面的例子中，我们可以看到  mix.extend()  接受两个参数：触发组件时应该使用的名称，以及注册和组织必要的 webpack 逻辑的回调函数或类。 在后台，Mix 将在构建底层 webpack 配置对象后触发此回调函数。 这将使您有机会插入或覆盖任何必要的设置。

虽然简单的回调函数可能对快速扩展很有用，但在大多数情况下，您可能希望构建一个完整的组件类，比如:

mix.extend(
    'foo',
    new class {
        register(val) {
            console.log('mix.foo() was called with ' + val);
        }

        dependencies() {}

        webpackRules() {}

        webpackPlugins() {}

        // ...
    }()
);

在扩展 Mix 时，通常需要触发一些指令:

1. 安装这些依赖关系。
2. 将此规则/加载程序添加到 webpack 中。
3. 包含这个 webpack 插件。
4. 完全覆盖 webpack 配置的这一部分。
5. 将此配置添加到 Babel。
6. 等等。

这些操作中的任何一个都与 Mix 组件系统密切相关。

组件接口

• name: 当调用组件时，应该使用什么作为方法名。(默认为类名。)
• dependencies:列出应该由 Mix 安装的所有 npm 依赖项。
• register: 当您的组件被调用时，所有的用户参数将立即被传递给这个方法。
• boot: 启动组件。这个方法是在用户的 webpack.mix.js 完全加载后触发。
• webpackEntry: 附加到 master Mix webpack 入口对象。
• webpackRules: 与 master webpack 加载器合并的规则。
• webpackPlugins: 与 master webpack 配置合并的插件。
• webpackConfig: 覆盖生成的 webpack 配置。
• babelConfig: 额外的 Babel 配置应该与 Mix 的默认值合并。

这里有一个示例/虚拟组件，它可以让你更好地了解如何构建自己的组件。更多的例子，请参考 Mix 自带的组件。

class Example {
    /**
     * 由 mix 调用时要使用的可选名称。
     * 默认类名, 小写。
     *
     * Ex: mix.example();
     *
     * @return {String|Array}
     */
    name() {
        // 例子:
        // return 'example';
        // return ['example', 'alias'];
    }

    /**
     * 所有应通过 mix 安装的依赖项。
     *
     * @return {Array}
     */
    dependencies() {
        // 例子:
        // return ['typeScript', 'ts'];
    }

    /**
     * 组件注册
     *
     * 调用组件时，所有的用户参数将传递给此方法。
     *
     * Ex: register(src, output) {}
     * Ex: mix.yourPlugin('src/path', 'output/path');
     *
     * @param  {*} ...params
     * @return {void}
     *
     */
    register() {
        // 例子:
        // this.config = { proxy: arg };
    }

    /**
     * 启动组件。此方法在用户的 webpack.mix.js 加载完毕之后触发。
     */
    boot() {
        // 例子:
        // if (Config.options.foo) {}
    }

    /**
     * 附加到 master mix webpack 入口对象。
     *
     * @param  {Entry} entry
     * @return {void}
     */
    webpackEntry(entry) {
        // 例子:
        // entry.add('foo', 'bar');
    }

    /**
     * 与 master webpack 加载器合并的规则。
     *
     * @return {Array|Object}
     */
    webpackRules() {
        // 例子:
        // return {
        //     test: /\.less$/,
        //     loaders: ['...']
        // });
    }

    /*
     * 与 master webpack 配置合并的插件。
     *
     * @return {Array|Object}
     */
    webpackPlugins() {
        // 例子:
        // return new webpack.ProvidePlugin(this.aliases);
    }

    /**
     * 覆盖生成的 webpack 配置。
     *
     * @param  {Object} webpackConfig
     * @return {void}
     */
    webpackConfig(webpackConfig) {
        // 例子:
        // webpackConfig.resolve.extensions.push('.ts', '.tsx');
    }

    /**
     * 额外的 Babel 配置应该与 Mix 的默认值合并。.
     *
     * @return {Object}
     */
    babelConfig() {
        // 例子:
        // return { presets: ['@babel/preset-react'] };
}

请注意，上面示例中的每个方法都是可选的。在某些情况下，您的组件可能只需要添加一个 webpack 加载程序和/或调整 Mix 使用的 Babel 配置，在这种情况下，你可以省略其余的接口。

class Example {
    webpackRules() {
        return {
            test: /\.test$/,
            loaders: []
        };
    }
}

现在，当 Mix 构造底层 webpack 配置时，你的规则将包含在生成的webpackConfig.module.rules 数组中。

用法

一旦构建或安装了所需的组件，只需从你的 webpack.mix.js 文件中引用它，那么就可以开始用了。

// foo-component.js

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

class Example {
    webpackRules() {
        return {
            test: /\.test$/,
            loaders: []
        };
    }
}

mix.extend('foo', new Example());

// webpack.mix.js

let mix = require('laravel-mix');
require('./foo-component');

mix.js('src', 'output')
    .sass('src', 'output')
    .foo();

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

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

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