我有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.js
和vue.esm.js
。
2条答案
按热度按时间dgjrabp21#
我遇到了类似的问题,结果发现我是通过两种方式将Vue导入到我的组件中的:
和
“Vue”中的PascalCase导致了错误,所有其他模块都导入了“VUE”。这解决了我的问题。
2ledvvac2#
在我的例子中,我没有在导入中使用“Vue”。
有没有办法指出这个问题的原因。我已经处理这个问题两年了,现在在多个项目,我希望有人在Vue或Webpack社区解决它。事实是,有很多方法来解决这个问题的原因,他们似乎没有一个与我的问题有关。