Question

我有一个使用vue库项目的vue客户端项目（该vue库项目还使用了诸如vue-material之类的一些第三方软件包）。

它们通过客户端项目的Package.json这样req.check('name') .isLength({min:3}).withMessage('Name must be of 3 characters long.') .isAlpha().withMessage('Name must be alphabetic.');进行链接，而我正在使用"lib": "file:../lib"导入客户端项目中的组件

问题是，当我使用Webpack构建客户端项目时，库中的文件使用import Comp from "lib/src/components/Comp";而不是lib/node_modules/vue，这会导致双重实例化。

任何人都知道为什么当我从客户端文件夹使用webpack build时，它会在我的库文件夹中查找vue包吗？并有办法解决这个问题吗？

我的webpack.config

node_modules/vue

我的客户的主要条目

"use strict";
const path = require("path");
const utils = require("./utils");
const config = require("../config");
const vueLoaderConfig = require("./vue-loader.conf");

function resolve(dir) {
  return path.join(__dirname, "..", dir);
}

module.exports = {
  entry: {
    app: ["babel-polyfill", "./src/main.js"]
  },
  output: {
    path: config.build.assetsRoot,
    filename: "[name].js",
    publicPath: process.env.NODE_ENV === "production" ? config.build.assetsPublicPath : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
      vue$: "vue/dist/vue.esm.js",
      "@": resolve("src"),
      src: resolve("src"),
      assets: resolve("src/assets"),
      components: resolve("src/components"),
      utilities: resolve("src/utilities"),
      directives: resolve("src/directives"),
      plugins: resolve("src/plugins"),
      data: resolve("src/data"),
      "vuex-store": resolve("src/store"),
      "lib": resolve("node_modules/lib")
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: "eslint-loader",
        enforce: "pre",
        include: [resolve("src")],
        options: {
          formatter: require("eslint-friendly-formatter")
        }
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        include: [resolve("src"), resolve("../lib/src")]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("media/[name].[hash:7].[ext]")
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: "base64-font-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("fonts/[name].[hash:7].[ext]")
        }
      },
      {
        test: /\.ico$/,
        loader: "file-loader?name=[name].[ext]"
      }
    ]
  }
};

Answer 1

当我没有解决这个问题的方法时，我决定调试webpack的编译器。

似乎webpack使用了一个名为“ enhanced-resolve”的库（实际上，我们在webpack的Data部分中向该库发送了参数）。使用resolve:{}属性，我们可以将任何resolve.alias重定向到我们想要的任何文件夹。

因此要将任何require重定向到我自己的vue.esm.js，我需要做的就是添加一个这样的条目（我本来就是那条线，但它指向的是相对路径而不是绝对路径）：

require("vue")

请注意库名末尾的$，它表示增强型解析，该软件包只有1个模块，因此任何要求who的名称为“ vue”或子目录“ vue”的用户都应使用别名进行解析

resolve: { alias: { vue$: resolve("node_modules/vue/dist/vue.esm.js"), } }

Enhanced-Resolve - ResolverFactory.js

if(/\$$/.test(alias)) { onlyModule = true; .... }

Enhanced-Resolve - AliasPlugin.js

Webpack使用错误的node_modules文件夹

1 个答案: