Написан простой однофайловый компонент на Vue JS. Интерес в том, чтобы его собрать при помощи Webpack в один исполняемый файл js, который можно потом подключать при помощи import в других vue компонентах.
К примеру, вот наш компонент test.vue:
<template>
<div @click="clickButton">TEST</div>
</template>
<script>
export default {
name: 'test',
methods: {
clickButton () {
console.log('на кнопку нажали')
}
}
}
</script>
при помощи Webpack собираю его в test.js.
Вот конфигурация webpack:
"use strict"
var path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: {
test: './src/components/test.vue'
},
output: {
path: path.resolve(__dirname, './lib/components'),
publicPath: '/lib/',
filename: '[name].js',
chunkFilename: '[id].js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
preserveWhitespace: false
}
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: 'env'
}
},
exclude: /node_modules/
},
]
},
plugins: [
new VueLoaderPlugin()
]
}
Файл успешно собирается в test.js. Пытаюсь в другом проекте подключить его:
import test from 'path/test_project/lib/components/test.'
export default {
name: "my_page",
data () {
return {}
},
components: {
test
}
}
Файл: .babelrc :
{
"presets": [["es2015", { "loose": true }]],
"plugins": [
"transform-export-default"/*,
"add-module-exports" */
]
}
Пытаюсь запустить проект. И получаю ошибку:
"export 'default' (imported as 'test') was not found in 'path/test_project/lib/components/test'
Как правильно собирать однофайловые компоненты, чтобы потом подключать и использовать их в других проектах?