用正确的方式从一个VueJS组件创建npm包并在本地进行测试是什么？

Question

首先，我使用vue-cli搭建了一个用于测试的vuejs项目容器。然后我在本地环境中创建了一个Vuejs组件，并将其打包成npm包 "vue-npm-example"，并在上述测试项目中进行了导入。

在该包中，我运行了npm link命令，并在项目中运行了npm link vue-npm-example命令。

Example.vue

<template>
    <div id="vue-npm-example">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: 'vue-npm-example',
        data() {
            return {
                msg: "Welcome to Your Vue.js App"
            }
        },
        mounted() {
            console.log('this is in compoennt file')
        }
    };
</script>

<style lang="scss">
</style>

main.js

import Example from './components/Example.vue'
export function install(Vue, options) {
    options = {
        installComponents: true
      }
    if (options.installComponents) {
        Vue.component('vuejs-example', Example)
    }    
}
export default Example

webpack.config.js

let path = require('path')
let webpack = require('webpack')
function resolve (dir) {
    return path.join(__dirname, '..', dir)
  }

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'index.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.sass$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader?indentedSyntax'
                ]
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // other preprocessors should work out of the box, no loader config like this necessary.
                        'scss': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader'
                        ],
                        'sass': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader?indentedSyntax'
                        ]
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.common.js',
            '@': resolve('src')
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true
    },
    performance: {
        hints: false
    },
    devtool: '#eval-source-map',
    node: {
        fs: 'empty'
    },
    watch: true
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        // new webpack.optimize.UglifyJsPlugin({
        //     sourceMap: true,
        //     compress: {
        //         warnings: false
        //     }
        // }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}

接下来，在测试项目中，我要做以下事情：

import Vue from 'vue'
import Example from 'vue-npm-example'
Vue.component('example', Example)

并像这样使用它

<example></example>

我遇到了错误：

[Vue warn]: Failed to mount component: template or render function not defined.

我在webpack配置文件中为包和项目都设置了vue别名。包被正确引入，因为当我在包的main.js中使用console.log()时，在测试项目中会记录日志。但是无论我尝试什么，包中的组件仍然无法在测试项目中工作。有什么建议吗？

- Kyle

---

也许只需使用 https://github.com/karol-f/vue-custom-element？ - karolf

Answer 1

npm link创建符号链接，但是当导入本地的npm包时，我需要指定完整的包地址。在我的情况下，我必须执行import customComponent from './node_modules/custom-component/dist/index.js'，而不是import customComponent from 'custom-component'。

- Kyle

Answer 2

我会使用 npm pack 代替 (使用 npm link 在本地测试 npm 包的一些缺点: https://blog.vcarl.com/testing-packages-before-publishing/)

在包中

运行 npm pack

在项目中

运行 npm install (path-to-package)/package-name-0.0.0.tgz

然后在你的 main.js 中导入/安装该包：

import MyPackage from 'package-name'

// This runs your 'install' method which registers your component globally with Vue.component(...)
Vue.use(MyPackage);

一些有用的链接

将Vue组件打包为npm包：https://v2.vuejs.org/v2/cookbook/packaging-sfc-for-npm.html

Vue npm教程：https://www.telerik.com/blogs/vuejs-how-to-build-your-first-package-publish-it-on-npm

全局组件注册：https://v2.vuejs.org/v2/guide/components-registration.html#Global-Registration

- Dunc