如何为IE11内联汇总/Babel Polyfills [英] How to inline Rollup/Babel polyfills for IE11
问题描述
我已经在PHP项目上工作了一段时间，并且客户在最后一刻要求IE11支持.HTML/CSS问题，我可以处理，但是我的JavaScript是用现代语法编写的.
I've been working on a PHP project for a while and the client has asked for IE11 support at the last possible minute. HTML/CSS problems I can deal with but my javascript was written modern syntax.
因此，我安装节点，使用我的JavaScript，并通过Rollup&第一次需要Babel，并为以后的请求缓存结果.
So I install node, take my javascript, run it through Rollup & Babel the first time it's needed and cache the result for future requests.
现在，输出缺少以前令我头疼的箭头功能，但我遇到了一个更大的问题:polyfills是导入语句，而IE11不支持导入语句.
Now the output lacks the arrow functions that were giving me a headache before but I've got a bigger problem: the polyfills are import statements and IE11 doesn't support import statements.
我觉得我需要强调一点，我没有运行节点服务器-它是PHP服务器，我只是在后端使用node进行汇总&通天塔如果该节点确实需要执行某些操作，那么我对此并不熟悉.
这是我的rollup.config.js:
Here's my rollup.config.js:
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import minify from 'rollup-plugin-babel-minify';
export default {
input: '_dud_input.js', // These are set in the exec() call
output: {
file: '_dud_output.js', // These are set in the exec() call
format: 'iife',
strict : false
},
plugins: [
resolve({
browser: true
}),
commonjs({
sourceMap: false
}),
babel({
exclude: 'node_modules/**' // only transpile our source code
}),
minify({
"comments": false
})
]
};
这是 babel.config.js :
module.exports = {
"presets" : [
[
"@babel/preset-env",
{
"targets": {
"browsers": "> 0.5%, ie >= 11"
},
"modules": false,
"spec": true,
"useBuiltIns": "usage",
"forceAllTransforms": true,
"corejs": {
"version": 3,
"proposals": false
}
}
]
]
}
对于傻笑，这是我调用该Shell脚本来运行该过程:
For giggles, here's the shell script I call to run the process:
#!/bin/bash
set -e
# Expected argument values:
# $1 - Path of the root directory
# $2 - Path of the node binary
# $3 - Path of the rollup binary
# $4 - Source file path
# $5 - Destination file path
if [ $# -ne 5 ]
then
exit 99
fi
ROOT_DIR=$1
NODE_BIN=$2
ROLLUP_BIN=$3
SRC_PATH=$4
DEST_PATH=$5
cd ${ROOT_DIR}
${NODE_BIN} ${ROLLUP_BIN} -c ${ROOT_DIR}/rollup.config.js -i ${SRC_PATH} -o ${DEST_PATH}
它是这样链接的:
<script defer="" type="text/javascript" src="http://example.com/site-asset/flatfile.js"></script>
使用这些设置，我的flatfile.js在顶部输出以下内容:
With these settings, my flatfile.js outputs with the following at the top:
import"core-js/modules/es.symbol";
import"core-js/modules/es.symbol.description";
import"core-js/modules/es.symbol.iterator";
import"core-js/modules/es.array.concat";
import"core-js/modules/es.array.filter";
import"core-js/modules/es.array.find";
import"core-js/modules/es.array.for-each";
// ...etc...
在此设置下，IE11的控制台说，每个带有导入语句的文件的第一行都有一个语法错误.
Under this setup IE11's console says there's a Syntax error at the first line of every file with the import statements.
将 useBuiltIns 从 usage 更改为 entry (据我所知，这意味着我希望在其他地方有一个条目来添加polyfills)并包含 https://polyfill.io/v3/都没有任何作用(我在 Number.parseFloat()调用).
Changing useBuiltIns from usage to entry (which I understand means I'm expected to have an entry file elsewhere that adds the polyfills) and including https://polyfill.io/v3/ doesn't do anything (I get errors on Number.parseFloat() calls).
出于绝望，我什至在我的应用程序中添加了一个"core-js"路由，该路由试图提供适当的core-js文件-但没有迹象表明IE11甚至试图遵循require语句.
Out of desperation I even added a "core-js" route to my application, which tries to serve up the appropriate core-js file - but there's no indication that IE11 is even trying to follow the require statements.
环顾互联网似乎对其他任何人来说都不是问题-IE11显然对其他任何人都有用吗?
Looking around the internet it seems like this isn't a problem for anybody else - IE11 apparently works for everybody else?
也许是因为我没有使用节点服务器，而是使用PHP/Apache服务器?
Maybe it's because I'm not using a node server, but a PHP/Apache one?
我只是想让Babel在我的文件中包含core-js polyfills，而不是像IE11不知道如何解析的require语句那样.
推荐答案
我不得不禁用 babel-minify 插件，但除此之外，复制您的配置似乎还可以，我得到了一个没有导入语句的捆绑JavaScript文件.
I had to disable the babel-minify plugin, but aside from that, copying your configuration seems to work just fine and I get a single bundled JavaScript file with no import statements.
以下复制了文件，但完整的测试存储库位于 https://github.com/akx/so58712204 – yarn;纱线构建，然后查看 dist/ ...
The files are reproduced below, but the full test repo is available at https://github.com/akx/so58712204 – yarn; yarn build and look in dist/...
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
browsers: "> 0.5%, ie >= 11"
},
modules: false,
spec: true,
useBuiltIns: "usage",
forceAllTransforms: true,
corejs: {
version: 3,
proposals: false
}
}
]
]
};
package.json
{
"scripts": {
"build": "rollup -c ./rollup.config.js -i ./src/entry.js -o ./dist/output.js"
},
"dependencies": {
"@babel/core": "^7.7.0",
"@babel/preset-env": "^7.7.0",
"core-js": "^3.3.6",
"rollup": "^1.26.3",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-babel-minify": "^9.1.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0"
}
}
rollup.config.js
import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
import babel from "rollup-plugin-babel";
export default {
input: "_dud_input.js", // These are set in the exec() call
output: {
file: "_dud_output.js", // These are set in the exec() call
format: "iife",
strict: false
},
plugins: [
resolve({
browser: true
}),
commonjs({
sourceMap: false
}),
babel({
exclude: "node_modules/**" // only transpile our source code
})
]
};
src/entry.js
import { magicNumber } from "./magic";
console.log(new Set([Number.parseFloat(magicNumber)]));
src/magic.js
const magicNumber = "8.82";
export { magicNumber };
这篇关于如何为IE11内联汇总/Babel Polyfills的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
