AWS расширяет возможности модульного импорта с помощью Vue - PullRequest
Новая
       69

AWS расширяет возможности модульного импорта с помощью Vue

0 голосов
/ 25 декабря 2018

Это, вероятно, вопрос «JavaScript», не относящийся к Vue.Я пытаюсь импортировать определенные модули как псевдоним, но это не представляется возможным.Моя конкретная проблема показана ниже при попытке использовать модульный импорт с AWS Amplify и Vue.Вот "немодульная" версия, которая создает экземпляр Vue. 

import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import aws_exports from './aws-exports';

Amplify.configure(aws_exports)
Vue.use(AmplifyPlugin, AmplifyModules)

Я сделал это: 

import Amplify from '@aws-amplify/core'

Но я не могу понять, как передатьподмножество AmplifyModules для Vue.Я продолжаю получать эту ошибку: 

Uncaught (in promise) TypeError: Cannot read property 'Logger' of undefined
at VueComponent._callee$ (aws-amplify-vue.common.js?19b2:3257)
at tryCatch (runtime.js?96cf:62)
at Generator.invoke [as _invoke] (runtime.js?96cf:288)
at Generator.prototype.(:8080/anonymous function) [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:114:21)
at asyncGeneratorStep (aws-amplify-vue.common.js?19b2:6805)
at _next (aws-amplify-vue.common.js?19b2:6827)
at eval (aws-amplify-vue.common.js?19b2:6834)
at new Promise ()
at VueComponent.eval (aws-amplify-vue.common.js?19b2:6823)
at VueComponent.mounted (aws-amplify-vue.common.js?19b2:3288)

Похоже, Vue ищет определенные модули, Auth, Logger и т. Д., Которые обычно предоставляются псевдонимом AmplifyModules, но импортирует все модули из aws-ampify, который являетсяне модульный.

Есть идеи?

Ответы [ 4 ]

0 голосов
/ 06 сентября 2019

Я потратил несколько часов, чтобы найти ответ на этот вопрос, поэтому я собираюсь поделиться тем, что сработало для меня.

Обратите внимание, что мне не нужен aws-amplify-vue в моем проекте, поэтому он может отличаться от того, что вам нужно.

В моем случае мне нужен был только Auth, поэтому в main.js яhave: 

import Amplify from '@aws-amplify/core'
import Auth from '@aws-amplify/auth' // eslint-disable-line no-unused-vars

Amplify.configure(awsconfig)

Vue.prototype.$Amplify = Amplify // <- This line is important

Я НЕ делаю import { AmplifyPlugin } from 'aws-amplify-vue'; Vue.use(AmplifyPlugin), поскольку мне это не нужно, поэтому я должен вручную подключить Amplify, выполнив: Vue.prototype.$Amplify = Amplify

Затем в моем компонентеЯ использую это как: 

this.$Amplify.Auth.signOut()

Это сэкономило мне ~ 250KB в размере пакета.

0 голосов
/ 01 февраля 2019

Спасибо, Клифф!Или вы можете настроить Amplify в main.js следующим образом: 

import Amplify from 'aws-amplify';
import awsExports from '@/aws-exports';

Amplify.configure(awsExports);

и импортировать модули там, где вы их используете, поскольку они не обязательно должны быть доступны глобально.Например, у меня есть все мои функции авторизации в миксине, куда я импортирую этот модуль: 

import { Auth } from 'aws-amplify';

export default {
  methods: {
    forgotPassword(email) {
      Auth.forgotPassword(email)
         .then(...
0 голосов
/ 02 августа 2019

Модульный импорт вещей в настоящее время нелегок.

Это открыто и активно работает над: https://github.com/aws-amplify/amplify-js/issues/3365

0 голосов
/ 27 декабря 2018

Придумал это ...

Я отладил проблему прохождения модуля и получил работу с Vue и модульным импортом.Для тех, кто заинтересован, я заменил «import * as AmplifyModules» на: 

import { Logger } from '@aws-amplify/core'
import { I18n } from '@aws-amplify/core'
import Auth from '@aws-amplify/auth'
import { AuthClass } from '@aws-amplify/auth'

и использовал его так: 

Vue.use(AmplifyPlugin, { AuthClass, Auth, Logger, I18n })

Надеюсь, это кому-нибудь поможет

...