Webpack使用错误的node_modules文件夹

或Betzalel

我有一个使用vue库项目的vue客户端项目(该vue库项目还使用了一些第三方软件包,例如vue-material)。

它们通过客户端项目的Package.json像这样链接"lib": "file:../lib",我正在使用以下方法在客户端项目中导入组件import Comp from "lib/src/components/Comp";

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

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

我的webpack.config

"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]"
      }
    ]
  }
};

我客户的主要条目

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

// Core Imports
import Vue from 'vue'
import App from './App'

// Plugins
import { ComponentsPlugin } from "lib/src/components";

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})
或Betzalel

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

似乎webpack使用了一个名为“ enhanced-resolve”的库(实际上,我们在webpack的resolve:{}部分中将参数发送到了该库)。并使用该resolve.alias属性,我们可以将任何内容重定向require到所需的任何文件夹。

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

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

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

Enhanced-Resolve - ResolverFactory.js

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

Enhanced-Resolve - AliasPlugin.js

// InnerRequest is the path (vue/dist/vue.esm.js)
// name is the alias name without the $ (vue)
if(innerRequest === name || (!onlyModule && startsWith(innerRequest, name + "/"))) {
    continue resolving....
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

删除node_modules文件夹

来自分类Dev

Webpack 2 拒绝忽略 node_modules 文件夹中的 lovell/sharp

来自分类Dev

webpack如何排除除文件夹之外的node_modules

来自分类Dev

删除node_modules文件夹后无法构建基于VueJS webpack的项目

来自分类Dev

获取node_modules文件夹中文件的[TS]错误

来自分类Dev

index.d.ts 文件被解析到错误的 node_modules 文件夹

来自分类Dev

Typescript构建从node_modules文件夹中获取错误

来自分类Dev

node_modules文件夹是符号链接时的browserify-shim错误

来自分类Dev

Windows错误删除node_modules文件夹:源路径太长

来自分类Dev

React Native node_modules文件夹大小

来自分类Dev

npm安装,缺少node_modules文件夹

来自分类Dev

更改node_modules文件夹的位置

来自分类Dev

jshint忽略node_modules文件夹

来自分类Dev

引用node_modules文件夹中的资源

来自分类Dev

npm安装未创建node_modules文件夹

来自分类Dev

更改node_modules文件夹结构?

来自分类Dev

npm安装未创建node_modules文件夹

来自分类Dev

如何获取“ node_modules”文件夹内容

来自分类Dev

删除所有node_modules子文件夹

来自分类Dev

如何告诉 Codeship 忽略 node_modules 文件夹?

来自分类常见问题

使用命令行从指定路径递归删除node_modules文件夹

来自分类Dev

为node.js配置Sublime文本3文件夹node_modules

来自分类Dev

Node.js如何从全局安装的包中查找本地的node_modules文件夹

来自分类Dev

Visual Studio-在文件中查找>不是任何node_modules文件夹

来自分类Dev

如何在VSCode中的TypeScript构建期间忽略`node_modules`文件夹

来自分类Dev

如何从ASP.NET vnext项目中的wwwroot访问node_modules文件夹

来自分类Dev

为什么node_modules文件夹未提交到Git?

来自分类Dev

为什么Grunt在node_modules中安装了这么多文件夹?

来自分类Dev

另一个文件夹中的Node_modules

Related 相关文章

  1. 1

    删除node_modules文件夹

  2. 2

    Webpack 2 拒绝忽略 node_modules 文件夹中的 lovell/sharp

  3. 3

    webpack如何排除除文件夹之外的node_modules

  4. 4

    删除node_modules文件夹后无法构建基于VueJS webpack的项目

  5. 5

    获取node_modules文件夹中文件的[TS]错误

  6. 6

    index.d.ts 文件被解析到错误的 node_modules 文件夹

  7. 7

    Typescript构建从node_modules文件夹中获取错误

  8. 8

    node_modules文件夹是符号链接时的browserify-shim错误

  9. 9

    Windows错误删除node_modules文件夹:源路径太长

  10. 10

    React Native node_modules文件夹大小

  11. 11

    npm安装,缺少node_modules文件夹

  12. 12

    更改node_modules文件夹的位置

  13. 13

    jshint忽略node_modules文件夹

  14. 14

    引用node_modules文件夹中的资源

  15. 15

    npm安装未创建node_modules文件夹

  16. 16

    更改node_modules文件夹结构?

  17. 17

    npm安装未创建node_modules文件夹

  18. 18

    如何获取“ node_modules”文件夹内容

  19. 19

    删除所有node_modules子文件夹

  20. 20

    如何告诉 Codeship 忽略 node_modules 文件夹?

  21. 21

    使用命令行从指定路径递归删除node_modules文件夹

  22. 22

    为node.js配置Sublime文本3文件夹node_modules

  23. 23

    Node.js如何从全局安装的包中查找本地的node_modules文件夹

  24. 24

    Visual Studio-在文件中查找>不是任何node_modules文件夹

  25. 25

    如何在VSCode中的TypeScript构建期间忽略`node_modules`文件夹

  26. 26

    如何从ASP.NET vnext项目中的wwwroot访问node_modules文件夹

  27. 27

    为什么node_modules文件夹未提交到Git?

  28. 28

    为什么Grunt在node_modules中安装了这么多文件夹?

  29. 29

    另一个文件夹中的Node_modules

热门标签

归档