时间戳

首页 > 解决方案 > 带有 Vue CLI 3 的 webpack-modernizr-loader 加载器

vue.js - 带有 Vue CLI 3 的 webpack-modernizr-loader 加载器

问题描述

我正在将一个项目从旧版本的 Webpack 和 Vue.js 转移到 Vue cli 3，它运行良好，但我无法弄清楚如何让额外的加载器工作。加载器是“webpack-modernizr-loader”，它加载了modernizr 并允许我检查用户的浏览器是否可以执行promise 和其他现代JavaScript 功能。

我的老webpack.config.js样子是这样的：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
     ...
      {
        loader: 'webpack-modernizr-loader',
        options: {
          options: [
          ],
          'feature-detects': [
            'test/es6/promises',
            'test/audio/webaudio',
            'test/websockets'
          ]
        },
        test: /empty-alias-file\.js$/
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      modernizr$: path.resolve(__dirname, './empty-alias-file.js')
    }
  },
  ...
}

使用 Vue cli 3 我有一个vue.congfig.js文件，但不确定如何将上述内容翻译成它。到目前为止，我最近的尝试是这样的：

var path = require('path')

module.exports = {
  ... 
  configureWebpack: {
    module: {
      rules: [
        {
          loader: 'webpack-modernizr-loader',
          options: {
            options: [
            ],
            'feature-detects': [
              'test/es6/promises',
              'test/audio/webaudio',
              'test/websockets'
            ]
          },
          test: /empty-alias-file\.js$/
        }
      ]
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        modernizr$: path.resolve(__dirname, './empty-alias-file.js')
      }
    }
  }
}

但这行不通。我想要一个正确方向的观点或一个执行类似操作的现有代码示例。

谢谢！

标签： vue.jswebpackmodernizrvue-cli

解决方案

经过几个小时尝试自己解决这个问题后，我最终得到了这个：

  1. 确保你的配置被命名.modernizrrc（没有 .js），否则你会得到各种各样的错误。
    如果我不得不猜测；这可能与 babel 错误地包含它有关，并且可以通过以某种方式排除文件来规避）。

  2. 确保你已经安装了webpack-modernizr-loader和modernizr。

main.js

import modernizr from 'modernizr'; // eslint-disable-line no-unused-vars

我实际上还没有在 JS 代码中使用modernizr，但我必须包含它才能让类呈现到 HTML 元素中。这就是它未被使用的原因（并且该行在 eslint 中被禁用）。

vue.config.js：

const path = require('path');
process.env.VUE_APP_VERSION = require('./package.json').version;

module.exports = {
  baseUrl: '/',
  configureWebpack: {
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        '~': path.resolve(__dirname, 'src/'),
        '@': path.resolve('src/'),
        modernizr$: path.resolve(__dirname, '.modernizrrc'),
      },
    },
  },
  chainWebpack(config) {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => ({
        ...options,
        compilerOptions: {
          ...options.compilerOptions,
          preserveWhitespace: true,
        },
      }));
    config.module
      .rule('modernizr')
      .test(/\.modernizrrc$/)
      .use('webpack-modernizr-loader')
      .loader('webpack-modernizr-loader');
  },
};

.modernizrrc

（为了这个答案的长度，数组被缩短了）

module.exports = {
    "minify": true,
    "options": [
      "mq",
      ...
      "prefixed",
    ],
    "feature-detects": [
      "test/css/all",
      ...
      "test/css/animations",
    ]
}

推荐阅读