forked from umijs/umi
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(umi-plugin-polyfill): improve polyfill, remove extend option
- Loading branch information
Showing
4 changed files
with
19 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,34 +1,15 @@ | ||
# umi-plugin-polyfill | ||
|
||
umi的兼容插件,主要是为了umi兼容ie而创建的,所以现在内置了react在ie下所需要的polyfill和setprototypeof和window.NodeList,处理在ie下的兼容,但考虑到后续的扩展和可能存在的其他兼容问题,增加了extend配置。 | ||
umijs 的兼容插件,目前主要是兼容到 ie9。内置了 react 在 ie 下所需要的 polyfill 和 [setprototypeof](https://github.com/umijs/umi/issues/413)。 | ||
|
||
经测试,在IE9下能语法兼容。 | ||
测试发现一个问题:ie9 antd 中的输入框无法输入(antd的iss里面已经有人提了) | ||
## 使用 | ||
|
||
在 `.umirc.js` 里配置插件, | ||
|
||
在.umirc.js用法: | ||
简单用法: | ||
```js | ||
export default { | ||
plugins: [ | ||
"umi-plugin-polyfill" | ||
] | ||
}; | ||
``` | ||
如果在你的项目中,需要加入其他的兼容插件,你可以使用下面的方法实现: | ||
```js | ||
export default { | ||
plugins: [ | ||
["umi-plugin-polyfill",{ | ||
extend:['model name'] | ||
}] | ||
] | ||
'umi-plugin-polyfill', | ||
], | ||
}; | ||
``` | ||
这里接受一个entend数组,值为模块名(如:'url-polyfill')或者相对于根目录的文件(如:'./src/polyfill/i.js') | ||
|
||
|
||
后续考虑加入 | ||
- 动画的兼容,可能是web-animations-js | ||
- url兼容,可能是url-polyfill | ||
- SVG elements,可能是classlist.js | ||
- 其他 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,28 +1,14 @@ | ||
/** | ||
* 此polyfill仅支持IE9+,因为umi部分底层库版本如react、prop-types版本已经不支持IE8。 | ||
*/ | ||
|
||
// UMI depends on promise | ||
import "core-js/es6/promise"; | ||
import 'core-js/es6/promise'; | ||
|
||
// React depends on set/map/requestAnimationFrame | ||
// https://reactjs.org/docs/javascript-environment-requirements.html | ||
import "core-js/es6/set"; | ||
import "core-js/es6/map"; | ||
import "raf/polyfill"; | ||
import 'core-js/es6/set'; | ||
import 'core-js/es6/map'; | ||
import 'raf/polyfill'; | ||
|
||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`. | ||
// import 'classlist.js'; // Run `npm install --save classlist.js`. | ||
|
||
//https://github.com/umijs/umi/issues/413 | ||
// https://github.com/umijs/umi/issues/413 | ||
Object.setPrototypeOf = require('setprototypeof'); | ||
|
||
//https://github.com/ant-design/ant-design/issues/9876 | ||
if (window.NodeList && !NodeList.prototype.forEach) { | ||
// forEach IE9 已经支持,无须加polyfill | ||
NodeList.prototype.forEach = function(callback, thisArg) { | ||
thisArg = thisArg || window; | ||
for (var i = 0; i < this.length; i++) { | ||
callback.call(thisArg, this[i], i, this); | ||
} | ||
}; | ||
} | ||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`. | ||
// import 'classlist.js'; // Run `npm install --save classlist.js`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,36 +1,7 @@ | ||
import { join } from 'path'; | ||
import { existsSync } from 'fs'; | ||
import assert from 'assert'; | ||
export default function(api, opts = {}) { | ||
const { paths } = api.service; | ||
const { winPath } = api.utils; | ||
function checkFile(file) { | ||
assert(typeof file === 'string', 'polyfill extend must be a string'); | ||
if (!file.startsWith('.')) { | ||
return file; | ||
} else if (existsSync(file)) { | ||
return file; | ||
} else if (existsSync(join(paths.cwd, file))) { | ||
return join(paths.cwd, file); | ||
} | ||
return ''; | ||
} | ||
let extendFile = ''; | ||
if (opts.extend) { | ||
assert( | ||
typeof opts.extend === 'object' && opts.extend.length, | ||
'extend must be an array', | ||
); | ||
opts.extend.map(item => { | ||
let fileName = checkFile(item); | ||
if (fileName) { | ||
extendFile += `import '${winPath(fileName)}';\r\n`; | ||
} | ||
return item; | ||
}); | ||
} | ||
export default function(api) { | ||
api.register('modifyEntryFile', ({ memo }) => { | ||
memo = `import 'umi-plugin-polyfill/lib/global.js';\r\n${extendFile}${memo}`; | ||
return memo; | ||
return ` | ||
import 'umi-plugin-polyfill/lib/global.js'; | ||
${memo}`.trim(); | ||
}); | ||
} |