웹 팩을 사용하여 하나의 프로젝트에서 여러 Vuejs 컴포넌트를 npm에 게시합니다.

웹 팩을 사용하여 하나의 프로젝트에서 여러 Vuejs 컴포넌트를 npm에 게시합니다.

두 개 이상의 Vue 컴포넌트를 포함하는 프로젝트를 npm에 게시하려고 합니다.이것에 의해, 다음과 같이 양쪽의 컴포넌트를 Import, 등록, 사용할 수 있습니다.

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

웹 팩 파일입니다.

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.filename 파일입니다.

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을 사용하여 설치할 수 있습니다.Import와 사용은 정상적으로 동작하지만 프로젝트를 실행하면 다음과 같은 오류가 발생합니다.

구성 요소를 마운트하지 못했습니다. 템플릿 또는 렌더링 함수가 정의되지 않았습니다.이 에러에 관한 다른 투고는 모두 문제가 해결되지 않았습니다.복수의 컴포넌트를 내보내는 투고가 없었기 때문입니다.

두 개의 다른 프로젝트에 게시할 때 두 구성 요소는 완전히 의도한 대로 작동합니다.

내가 뭘 놓쳤지?잘 부탁드립니다!

를 사용하여 내보낼 필요가 없습니다.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

언급URL : https://stackoverflow.com/questions/46811157/publish-multiple-vuejs-components-in-one-project-to-npm-using-webpack