從 vuejs 組件創建 npm 包並在本地測試的正確方法是什么

Question

首先，我從 vue-cli 搭建了一個 vuejs 項目作為測試容器。 然后，我從本地環境中的 Vuejs 組件創建了一個 npm 包"vue-npm-example" ，並導入到上述測試項目中。

在包裝中，

我運行npm link並在項目中運行npm link vue-npm-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() 時，它會登錄測試項目。 但是無論我怎么嘗試，包中的組件仍然無法在測試項目中工作。

有什么建議么？

Answer 1

npm link 創建一個符號鏈接，但是在導入本地 npm 包時，我需要指定包的完整地址。 就我而言，我必須import customComponent from './node_modules/custom-component/dist/index.js'導入customComponent 從'custom-component'導入customComponent。

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);

一些有用的鏈接

為 npm 打包 Vue 組件： 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