Skip to content

类似 Vue.mixin 功能的 loader,在 Vue 组件打包时,注入一些公共的配置

License

Notifications You must be signed in to change notification settings

showlotus/vue-mixins-loader

Repository files navigation

vue-mixins-loader

类似 Vue.mixin 功能的 loader,在 Vue 组件打包时,注入一些公共的配置。

如何你对这个 Loader 如何实现很感兴趣,可以戳这里 👉 我的博客

安装

npm install vue-mixins-loader -save-dev

配置

以路径的方式引入:需要以绝对路径的方式引入,或者以别名的方式引入。

options: {
  // 绝对路径,使用 path.resolve 转为绝对路径
  mixin1: path.resolve('./src/utils/mixin1.js'),
  // 别名,@ 指向 ./src
  mixin2: '@/utils/mixin2.js',
}

使用自定义 mixin 对象,配置在 custom 属性中。由于 loaderoptionswebpack 内部处理时,会转为 JSON 格式,为确保配置能生效,需要使用 vue-mixins-loader 提供的 stringify 方法将其转为一个字符串类型。

options: {
  custom: stringify({
    props: {
      block: {
        type: Object,
        default: () => ({})
      }
    },
    mounted() {
      console.log("this is custom mixins's mounted");
    }
  });
}

exclude 属性(v1.0.2 新增),类型为 string 或者 string[]。为一个正则表达式字符串,将匹配到的文件排除,不额外注入混入。

options: {
  exclude: 'element-ui',
  // 或者
  exclude: ['components/', 'view-design']
}

使用

webpack.config.js 中配置,需要写在 vue-loader 之后,也即要先于 vue-loader 处理。

const path = require('path');
const { stringify } = require('vue-mixins-loader');

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          'vue-loader',
          {
            loader: 'vue-mixins-loader',
            options: {
              exclude: ['components/', 'view-design'], // v1.0.2 new add
              tools: path.resolve('./src/utils/tools.js'),
              tools2: path.resolve('./src/utils/tools2.js'),
              tools3: '@/utils/tools3.js',
              custom: stringify({
                props: {
                  block: {
                    type: Object,
                    default: () => ({})
                  }
                },
                mounted() {
                  console.log("this is custom mixins's mounted");
                }
              })
            }
          }
        ]
      }
    ]
  }
};

Tip:如果对 JS 类型的文件在打包时使用了 cache-loader ,由于缓存的存在,会导致修改 options 后,配置不会生效。为确保配置能生效,请不要使用 cache-loader,并且配置 cache: false 来禁用缓存。

About

类似 Vue.mixin 功能的 loader,在 Vue 组件打包时,注入一些公共的配置

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published