Parcel 尝试从 npm 安装自定义 vue 组件答案

【问题标题】：Parcel tries to install custom vue components from npmParcel 尝试从 npm 安装自定义 vue 组件
【发布时间】：2019-07-26 07:53:06
【问题描述】：

当我运行parcel watch index.js 时，我看到一个控制台错误（如下所示）。为什么它试图使用npm 来加载我的组件？

npm ERR! 404 Not found : MyComponent
npm ERR! 404 
npm ERR! 404  'MyComponent' is not in the npm registry.
npm ERR! 404 Your package name is not valid, because 
npm ERR! 404  1. name can no longer contain capital letters
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/jonny/Projects/invoices/npm-debug.log
????  /home/jonny/Projects/invoices/src/App.vue:7:40: Failed to install Invoice.
    at PromiseQueue.install [as process] (/usr/local/lib/node_modules/parcel-bundler/src/utils/installPackage.js:46:11)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

App.vue

<template>
    <div>
        {{name}}
        <my-component></my-component>
    </div>
</template>

<script lang="ts">
    import Vue from "vue";
    import MyComponent from "MyComponent"

    export default Vue.extend({
        data: function() {
            return {
                name: 'Hello World!',
            }
        },
        components: {
            MyComponent // This line is the problem!
        }
    });
</script>

<style scoped>

</style>

MyComponent.vue

<template>
    <div >
    </div>
</template>

<script>
    export default MyComponent = Vue.component('my-component', {
        data: function () {
            return {
                myvalue: 0
            }
        },
    });
</script>

index.js

import Vue from 'vue';
import {default as App} from './App';

new Vue({
    el: '#app',
    render: h => h(App),
});

【问题讨论】：

标签： vue.js vuejs2 npm-install parceljs

【解决方案1】：

导入路径应该是本地文件的相对路径。

Parcel 的 module resolution 使用标准 Node 算法，其中纯模块名称（在这种情况下为 MyComponent）将导致在 node_modules 目录中查找（或在 Parcel 的情况下直接到 NPM）。

但是MyComponent实际上是一个本地文件（MyComponent.vue）。假设MyComponent.vue与App.vue在同一目录下，则相对路径为./MyComponent.vue：

// import MyComponent from "MyComponent" // DON'T DO THIS
import MyComponent from "./MyComponent"

【讨论】：

@Jonathan 没问题:)