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

Question

当我运行 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),
});

Answer 1

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

Parcel 的 module resolution 使用标准节点算法，其中普通模块名称（在本例中为 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"

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

Parcel tries to install custom vue components from npm

vue.js

npm-install

vuejs2

parceljs