vue cli build with target lib: "требование не определено" при импорте компонента - PullRequest
Новая
       53

vue cli build with target lib: "требование не определено" при импорте компонента

3 голосов
/ 06 июля 2019

Я пытаюсь экспортировать компонент 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"

  • Я уже установил resol.symlinks в false в импортирующем проекте.

РЕДАКТИРОВАТЬ: я подтвердил, что это не из символической ссылки, у меня точно такая же ошибка с пакетом непосредственно на node_modules.

Репо с целым кодом: https://github.com/louis-sanna/vue-hello-world

Ответы [ 3 ]

2 голосов
/ 15 июля 2019

Итак, я задал вопрос на репо Vue-Cli, и я получил решение!https://github.com/vuejs/vue-cli/issues/4245

Оказывается, NODE_ENV уже было установлено на development в моей оболочке, так что это был режим, используемый для сборки.

Просто нужно явно установить режим иэто работает:

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

Возможно, вам понадобится добавить его в vue.config.js: 

config
  .mode("production")
1 голос
/ 11 июля 2019

Это происходит из-за того, что установка Vue CLI Webpack по умолчанию не импортирует модули commonjs, как описано в вашем «основном» поле в package.json. Таким образом, проблема связана с проектом, который пытается импортировать, а не с проектом, который экспортирует компонент.

Есть два способа решить эту проблему.

  1. Со стороны импортирующего проекта

Вы можете исправить это, установив плагины 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';

Обратите внимание, что я только что проверил это, используя ссылку пряжи, но я уверен, что это будет прекрасно работать с импортированным отдельным модулем npm.

  1. Со стороны библиотеки

Цель (я полагаю) первоначального вопроса - как мне связать библиотеку, чтобы моим пользователям не приходилось делать этот маленький танец каждый раз, когда они хотят его использовать?

Вариант 1: не связывать его - предоставьте .vue файлы и источники. Просто включите все в каталог 'src' вашего модуля, напишите readme с объяснением и покончите с этим. Пусть импортирующий проект вычислит компиляцию и комплектацию.

Вариант 2: используйте свертку с плагином Vue, чтобы свернуть компоненты в связку. Есть пример того, как это сделать. В этом примере вы можете видеть, что ваш проект сможет импортировать .esm build https://github.com/vuejs/rollup-plugin-vue/tree/master/cookbook/library

0 голосов
/ 08 июля 2019

Не уверен, как вы создаете символическую ссылку, но вы должны использовать 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.

...