我试图将项目发布到包含两个或更多Vue组件的npm,这样我就可以导入,注册和使用这两个组件:
import Component1 from 'npm-package'
import Component2 from 'npm-package'
这是我的webpack文件:
const webpack = require('webpack');
const merge = require('webpack-merge');
const path = require('path');
var config = {
output: {
path: path.resolve(__dirname + '/dist/'),
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
include: __dirname,
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.css$/,
loader: 'style!less!css'
}
]
},
externals: {
moment: 'moment'
},
plugins: [
new webpack.optimize.UglifyJsPlugin( {
minimize : true,
sourceMap : false,
mangle: true,
compress: {
warnings: false
}
} )
]
};
module.exports = [
merge(config, {
entry: path.resolve(__dirname + '/src/plugin.js'),
output: {
filename: 'vue-project.min.js',
libraryTarget: 'window',
library: 'VueProject',
}
}),
merge(config, {
entry: path.resolve(__dirname + '/src/index.js'),
output: {
filename: 'vue-project.js',
libraryTarget: 'umd',
library: 'vue-project',
umdNamedDefine: true
},
resolve: {
extensions: ['', '.js', '.vue'],
alias: {
'src': path.resolve(__dirname, '../src'),
'components': path.resolve(__dirname, '../src/components')
}
}
})
];
这是我用作构建过程的入口点的index.js文件
import Component1 from './components/folder1/Component1.vue'
import Component1 from './components/folder2/Component2.vue'
export default {
components: {
Component1,
Component2
}
}
使用npm run build的构建过程运行正常,我可以将项目发布到npm并使用npm install安装它。导入和使用它工作正常,但当我运行我的项目时,我得到错误:
无法安装组件:未定义模板或渲染功能。 发现有关此错误的所有其他帖子都没有解决我的问题,因为他们都没有尝试导出多个组件。
当我在两个不同的项目中发布它们时,这两个组件完全按预期工作。
我在这里缺少什么?提前谢谢!
答案 0 :(得分:4)
您无需使用components
属性进行导出,只需执行以下操作:
export {
Component1,
Component2
}
然后你会这样做:
import {Component1} from 'npm-package';
import {Component2} from 'npm-package';
或
import {Component1, Component2} from 'npm-package';
请参阅:https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export