Publier plusieurs composants Vuejs dans un projet à NPM en utilisant webpack

Question

Im essayant de publier un projet de NPM qui contient deux ou plusieurs composants Vue donc je peux importer, enregistrer et utiliser les deux composants comme ceci:

import Component1 from 'npm-package' 
import Component2 from 'npm-package' 

cette est mon fichier 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') 
     } 
    } 
    }) 
]; 

et c'est le fichier index.js je suis en utilisant comme point d'entrée pour le processus de construction

import Component1 from './components/folder1/Component1.vue' 
import Component1 from './components/folder2/Component2.vue' 

export default { 
    components: { 
    Component1, 
    Component2 
    } 
} 

Le processus de construction utilisant la construction d'exécution npm fonctionne très bien et je peux publier le projet sur npm et l'installer en utilisant npm install. Importer et l'utiliser fonctionne bien à, mais quand je cours mon projet j'obtiens l'erreur:

n'a pas pu monter le composant: modèle ou fonction de rendu non définie. Tous les autres messages trouvés sur cette erreur n'ont pas résolu mon problème, car aucun d'entre eux n'a essayé d'exporter plusieurs composants.

Les deux composants fonctionnent complètement comme prévu lorsque je les publie dans deux projets différents.

Que manque-t-il ici? Merci d'avance!

Answer 1

Vous n'avez pas besoin d'exporter en utilisant la propriété components, il vous suffit de faire:

export { 
    Component1, 
    Component2 
} 

alors vous faire:

import {Component1} from 'npm-package'; 
import {Component2} from 'npm-package'; 

ou

import {Component1, Component2} from 'npm-package'; 

voir : https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export