Question

我正在尝试将Vue组件导出为软件包，并使用vue cli来构建dist。我打算在npm上发布它，但是我目前正在使用符号链接进行测试。但是，即使使用简单的hello-world项目，我也无法制作有效的程序包。

我创建了一个项目：

vue create hello-world

然后我修改了package.json：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name vue-hello-world ./src/components/HelloWorld.vue",
    "lint": "vue-cli-service lint"
  },
  "main": "./dist/vue-hello-world.common.js",

然后我打电话

npm run build

并且编译没有错误。

然后，在另一个项目的vue组件中进行导入（我在node_modules中使用了符号链接）：

import HelloWorld from "hello-world";

在页面渲染中，出现以下错误：

[Vue warn]: Failed to resolve async component: function MediaViewerPdf() {
  return Promise.all(/*! import() */[__webpack_require__.e(62), __webpack_require__.e(46)]).then(__webpack_require__.bind(null, /*! ./viewers/MediaViewerPdf.vue */ "./vuejs/components/mediaViewer/viewers/MediaViewerPdf.vue"));
}
Reason: ReferenceError: require is not defined

知道发生了什么吗？

备注：

使用vue inspect，我在webpack配置中检查了这一点：

target: "web"

我已经在导入项目上将resolve.symlinks设置为false。

编辑：我已经确认它不是来自符号链接，直接在node_modules上的包我有完全相同的错误。

回购，包含完整代码：https://github.com/louis-sanna/vue-hello-world

Answer 1

所以我在vue-cli repo上问了一个问题，我找到了解决方案！ https://github.com/vuejs/vue-cli/issues/4245

结果证明NODE_ENV已经在我的shell中设置为development，因此它是用于构建的模式。

只需明确设置模式即可使用：

vue-cli-service build --target lib --name vue-hello-world ./src/components/HelloWorld.vue --mode production

您可能需要将其添加到vue.config.js：

config
  .mode("production")

Answer 2

之所以发生这种情况，是因为默认情况下，Vue CLI Webpack安装程序不会导入commonjs模块，如package.json中“ main”字段中所述。因此问题出在尝试导入的项目，而不是导出组件的项目。

有两种方法可以解决此问题。

从导入项目方面

您可以通过为导入组件的项目安装babel插件并设置babel.config.js来解决此问题

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    '@babel/plugin-transform-modules-commonjs', // leave to import .common.js files
    '@babel/plugin-transform-modules-umd'       // leave to import .umd.js files
  ]
}

但是仅执行此操作还不够：您还需要通过将库中生成的CSS添加到条目文件中来导入它

import 'hello-world/dist/vue-hello-world.css';

请注意，我仅使用yarn链接对此进行了测试，但是我确信，它可以与导入的单独npm模块一起使用。

从图书馆方面

（我想）原始问题的意图-我如何捆绑一个图书馆，这样我的用户在每次使用它时都不必做这个小舞？

选项1：不捆绑它-提供.vue文件和源。只需将所有内容包括在模块的'src'目录中，编写一个自述文件并加以说明即可完成。让导入项目确定编译并捆绑。

选项2：将汇总与Vue插件一起使用可将组件汇总到捆绑包中。有一个有关如何执行此操作的示例。在该示例中，您可以看到您的项目将能够导入.esm build https://github.com/vuejs/rollup-plugin-vue/tree/master/cookbook/library

Answer 3

不确定如何创建符号链接，但是应该使用npm link。如果您仍然遇到问题（例如我自己遇到问题），建议您尝试npm-link-better：

npm install -g npm-link-better
cd vue-hello-world
npm link
cd ../hello-world
nlc -w vue-hello-world

对于构建组件库，我建议您看看vue-cli-plugin-component。该插件已经很好地设置了vue-cli项目。

带有目标库的vue cli构建：导入组件时“未定义需求”

3 个答案: