typescript 使用Webpack编译的库加载了两次Vue

bxgwgixi  于 2022-11-26  发布在  TypeScript
关注(0)|答案(2)|浏览(150)

我有Vue组件的TypeScript库,它通过Webpack编译成一个JS文件。使用该库的TypeScript项目也依赖于Vue。运行应用程序时,我可以看到加载了两个vue示例,一个包含在库包中(/node_modules/my-lib/dist/index.js),另一个来自项目的node_modules(/node_modules/vue/dist/vue.esm.js)。
库的webpack.config.js:

const path = require('path');
module.exports = {
    entry: './src/index.ts',
    output: {
        filename: 'index.js',
        publicPath: '/dist/',
        path: path.resolve(__dirname, 'dist'),
        library: "fsaa-util",
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                    allowTsInNodeModules: true,
                    appendTsSuffixTo: [/\.vue$/]
                }
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.vue', '.wasm', '.mjs', '.js', '.json', 'css'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
        },
        modules: ["src", "node_modules"]
    },
};

使用者项目的webpack.config.js:

const path = require('path');
module.exports = {
    entry: './src/index.ts',
    output: {
        filename: 'index.js',
        publicPath: '/dist/',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                    allowTsInNodeModules: true,
                    appendTsSuffixTo: [/\.vue$/],
                    compiler: 'ttypescript'
                }
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.vue', '.wasm', '.mjs', '.js', '.json', 'css'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
        },
        modules: ["src", "node_modules"]
    }
};

如何将vue导入到库项目和使用者项目中:

import Vue from "vue";

正如其他地方所建议的那样,我还尝试用途:

externals: {
    vue: 'vue',
},

在库的webpack.config.js中,但是我同时加载了vue.runtime.esm.jsvue.esm.js

dgjrabp2

dgjrabp21#

我遇到了类似的问题,结果发现我是通过两种方式将Vue导入到我的组件中的:

import Vue from "vue";

import Vue from "Vue";

“Vue”中的PascalCase导致了错误,所有其他模块都导入了“VUE”。这解决了我的问题。

2ledvvac

2ledvvac2#

在我的例子中,我没有在导入中使用“Vue”。
有没有办法指出这个问题的原因。我已经处理这个问题两年了,现在在多个项目,我希望有人在Vue或Webpack社区解决它。事实是,有很多方法来解决这个问题的原因,他们似乎没有一个与我的问题有关。

相关问题