我已经在 PHP 项目上工作了一段时间,客户在最后一刻要求提供 IE11 支持。我可以处理 HTML/CSS 问题,但我的 javascript 是用现代语法编写的。
因此,我安装了 Node,使用 JavaScript,在第一次需要时通过 Rollup & Babel 运行它,并缓存结果以供将来的请求。
现在输出缺少了之前让我头疼的箭头函数,但我遇到了一个更大的问题:polyfills 是 import 语句并且IE11不支持import语句.
我觉得我需要强调,我没有运行节点服务器 - 它是一个 PHP 服务器,我只是在后端使用节点来进行汇总和 babel。如果节点做了一些事情来完成这项工作,我不熟悉它。
这是我的 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 脚本:
#!/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 在顶部输出以下内容:
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 的控制台显示有一个Syntax error
在每个文件的第一行包含 import 语句。
改变useBuiltIns
from usage
to entry
(据我所知,这意味着我希望在其他地方有一个添加填充的入口文件)并包括https://polyfill.io/v3/ https://polyfill.io/v3/没有做任何事情(我收到错误Number.parseFloat()
calls).
出于绝望,我什至在我的应用程序中添加了一条“core-js”路由,该路由尝试提供适当的 core-js 文件 - 但没有迹象表明 IE11 甚至试图遵循 require 语句。
环顾互联网,这似乎对其他人来说不是问题 - IE11 显然对其他人有效?
也许是因为我没有使用节点服务器,而是 PHP/Apache 服务器?
我只是希望 Babel 在我的文件中包含 core-js polyfill,而不是 IE11 不知道如何解析的 require 语句。