webpack+babel+transform-runtime, IE는 Promise 정의되지 않은 솔루션을 프롬프트합니다.

지식 요구 사항

• babel에 대한 기본 지식(Ruan Yifeng의 바벨 입문 튜토리얼 권장)babel的基础知识（推荐阮一峰的babel入门教程)

• 充分理解babel-plugin-transform-runtime与babel-runtime的作用(推荐github项目首页)

• webpack2基础用法

• webpack2中babel-loader作用，import异步加载

问题说明

webpack+babel-loader+transform-runtime正常来讲应该能实现在没有原生支持Promise的浏览器（如IE）下正常运行，但是实际在IE11下，还是提示Promise未定义的错误。网上找了一圈，没有切中要害的，于是干脆自己分析。

分析

首先确认babel的transform-runtime是否生效，在自己的js代码中编写var promise = new Promise(resolve, reject)的示例代码，发现Promise是有被替换的。所以问题的关键在于什么东西超出了babel的控制？

我想到的是node_modules与webpack本身生成的代码。

在使用babel转换ES6之前, 通过node_modules引用的第三方包都能正常使用，因此可以排除。
那么webpack呢，在GOOGLE中搜索webpack promise not defined，还真找到了原因，如下图所示：

当使用了webpack的异步加载时，webpack要求原生支持Promise，刚好我们的代码有用到。至此，原因就找到了：

webpack生成的new Promise相关代码, 超出babel的transform-runtime的控制范围，只有导出全局的Promise才能解决此问题。

解决方案1

• 引入babel-polyfill导出全局Promise，这种方法并不好；不仅Promise被导出，还抛出大量其他的全局对象，可能存在冲突风险，同时文件体积比较大。

解决方案2

在js文件开头添加window.Promise = Promise这一句即可，示例代码：

import 'jquery'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap'

// 将Promise抛出为全局对象
window.Promise = Promise
。。。

原理：当babel检查到js的Promise时，transform-runtime会将Promise做转换，然后将其抛出为全局对象即可达到跟babel-polyfill

babel-plugin-transform-runtime에 대한 완전한 이해 babel-runtime의 역할 (github 프로젝트 홈페이지 권장)

🎜webpack2기본 사용법🎜🎜🎜webpack2babel-loader 역할에서 import는 비동기식으로 로드됩니다🎜🎜문제 설명🎜🎜webpack+ babel-loader+transform-runtime일반적으로 말하면 Promise(예: Promise)를 기본적으로 지원하지 않는 브라우저에서 구현할 수 있어야 합니다. >IE) IE11에서 정상적으로 실행되지만 여전히 Promise 정의되지 않은 오류가 표시됩니다. 인터넷으로 검색해 봤는데, 딱 맞는 내용이 없어서 그냥 제가 직접 분석해봤습니다. 🎜🎜🎜🎜Analytic🎜🎜먼저 babel을 확인하세요 transform-runtime이 효과적인지 여부를 자신의 js 코드에 var promise = new Promise(resolve, Reject)의 샘플 코드를 작성하고 Promise가 대체되었는지 확인하세요. 그렇다면 질문의 핵심은 babel의 통제 범위를 벗어나는 것이 무엇인가 하는 것입니다. 🎜🎜내가 생각하는 것은 node_modules와 webpack 자체에서 생성된 코드입니다. 🎜🎜babel을 사용하여 ES6를 변환하기 전에 node_modules를 통해 참조되는 타사 패키지는 정상적으로 사용할 수 있으므로 제외할 수 있습니다. 🎜webpack의 경우 GOOGLE에서 webpack promise not Defined를 검색하고 아래 그림과 같이 이유를 찾으세요. 🎜🎜🎜🎜webpack의 비동기 로딩을 사용할 때 webpack에는 Promise에 대한 기본 지원이 필요하며 이는 우리 코드에서 유용합니다. 이때 원인이 발견되었습니다. 🎜🎜webpack에서 생성된 new Promise 관련 코드가 babel의 <code>transform-runtime를 초과합니다. > 제어 범위, 전역 Promise를 내보내는 것만으로 이 문제를 해결할 수 있습니다. 🎜🎜해결책 1🎜🎜🎜🎜전역 Promise를 내보내려면 babel-polyfill을 도입하세요. 이 방법은 Promise만 내보내는 것이 아닙니다. 또한 충돌을 일으킬 수 있는 다른 전역 개체도 많이 버려지고 파일 크기도 상대적으로 큽니다. 🎜🎜해결책 2🎜🎜 js 파일 시작 부분에 window.Promise = Promise를 추가하세요. 샘플 코드: 🎜rrreee🎜 원리: babel이 js의 Promise를 감지하면 transform-runtime이 Promise를 대체합니다. code>변환한 다음 전역 객체로 던져 babel-polyfill과 동일한 효과를 얻습니다. 🎜🎜🎜🎜

위 내용은 webpack+babel+transform-runtime, IE는 Promise 정의되지 않은 솔루션을 프롬프트합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!