Babel 및 Webpack을 사용한 async/await 안내

처음에는 Webpack이 포함된 JavaScript 프로젝트가 잘 실행되었습니다. 그런 다음 우리 프로젝트가 오래된 브라우저에서 실행될 수 있어야 한다는 것을 깨달았기 때문에 Babel 을 선택했습니다. 나는 이후에 installed 실행했습니다.

프로젝트에는 a beautiful restaurant page 및 a cool design to-do list app이 포함됩니다. 그런 다음 API가 시나리오에 등장했습니다. 부득이하게 promises을 처리하게 되었습니다. .then 또는 async/await 함수로 처리할 수 있습니다.

API 기능을 작성하기 위해 async/await와 함께 가기로 결정했습니다.

const getDataByIpCheck = async () => {
    const response = await fetch(
      `http://api.ipstack.com/check?access_key=${process.env.API_KEY_IPSTACK}&format=1`
    );
    return response.json();
  };
  };

어플npm run start 과 😮를 실행했는데 어떡해 에러가 나네요



우리 뭐 할까?. 키보드 앞에서 울 수도 있었지만 해결책을 찾기로 했습니다.

이것이 해결책이었습니다 💡

@babel/polyfill이 무엇인가요?

It's just the import of stable core-js features and regenerator-runtime for generators and async functions, so if you load @babel/polyfill - you load the global version of core-js without ES proposals.

babel-polyfill 설치

I'm assuming that you've already installed all webpack dependencies, along with babel config inside webpack config file

npm을 통해 이 종속성npm install --save @babel/polyfill을 프로젝트에 추가합니다.

웹팩 파일 업데이트

module.export 개체의 시작 부분에 항목 키 추가entry: ["@babel/polyfill", "<your enter js file>"]
파일은 아래와 같아야 합니다.

module.exports = {
  mode: 'development',
  entry: ['@babel/polyfill', './src/index.js'],

다시 실행npm run start


이제 프로젝트가 작동합니다.

결론

@babel/polyfill를 사용하면 전체 ES2015+ 환경을 에뮬레이션할 수 있습니다. 이 경우 async/await 약속 기능으로 작업할 수 있습니다. Polyfill은 이를 달성하기 위해 전역 범위를 추가합니다.

I'd be grateful if you could leave a comment if you found this post helpful or liked it.

트위터를 팔로우 해주세요