Vue를 통해 모듈식 수입 확대

Vue를 통해 모듈식 수입 확대

이것은 아마도 Vue에게 특정되지 않은 "JavaScript" 질문일 것이다.나는 별칭으로 특정 모듈을 수입하려고 하는데 그게 안 될 것 같아.나의 특정한 문제는 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'

하지만 앰프파이모듈의 서브셋을 부에 어떻게 전달해야 할지 모르겠어.계속 오류가 발생함:

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는 AmplifyModules 별칭에서 일반적으로 제공되지만 모듈화되지 않은 모든 모듈을 aws-amplify에서 가져오는 특정 모듈, Auth, Logger 등을 찾고 있는 것으로 보인다.

좋은 생각 있어?

이걸 생각해 냈는데...

나는 모듈 패스 이슈를 디버깅하고 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 })

이게 누군가에게 도움이 되길 바래.

나는 이것에 대한 답을 찾기 위해 몇 시간을 보냈고, 그래서 나는 나에게 효과가 있는 것을 공유하려고 한다.

참고: 필요 없음aws-amplify-vue내 프로젝트에서 필요한 것과 다를 수 있어

내 경우 Auth만 필요했으므로 main.js에서는 다음과 같이 한다.

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)필요 없기 때문에 Mampify를 수동으로 첨부해야 하는 경우:Vue.prototype.$Amplify = Amplify

그리고 내 구성 요소에서 나는 이것을 다음과 같이 사용한다.

this.$Amplify.Auth.signOut()

이로 인해 번들 크기가 250KB까지 절약되었다.

모듈 방식으로 물건을 수입하는 것은 현재 쉽지 않다.

이것은 공개적이고 적극적으로 작업되고 있다: https://github.com/aws-amplify/amplify-js/issues/3365

고마워, 클리프!또는 다음과 같이 main.js에서 Amplify를 구성할 수 있다.

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(...

참조URL: https://stackoverflow.com/questions/53925177/aws-amplify-modular-imports-with-vue