背景
近半年，已产生几起FM项目（FreeMarker项目）在IE浏览器或者360浏览器兼容模式环境下运行出错的线上问题，导致业务流程无法执行下去。虽然一直在强调开发同学在做FM项目的需求时不要使用ES6，但是口头上的团队约定约束性力度有限，加上开发同学早已习惯性使用ES6，使之问题层出不穷，另外，还有些Web Apis和样式在IE上存在兼容性问题（比如：Element.scrollIntoView()、Element.scrollTo()），这些API和样式的使用也需要强制禁用，因此亟需用工具在编程阶段约束。
因使用ES6或者使用兼容性较差的Web Apis导致的缺陷：
因使用ES6或者使用兼容性较差的Web Apis导致的线上问题（都是三级事件）：
另外，因jira单备注不够清晰，样式兼容性导致的问题未作统计。
方案
下面方案只针对JavaScript脚本使用ES6+语法特性的处理，对于兼容性较差的Web Apis以及样式的处理另作方案。
Babel转译
在webpack中引入babel将ES6语法转译成ES5，但是在构建之前需要将源文件做如下改造：
var managePage = {};
function debounc() {}改造后：
window.managePage = {}
window.debounc = function debounc() {} 为什么不设置libraryTarget: 'window'以全局变量输出？
因为libraryTarget: 'window'的打包方式只能将export导出的对象以全局对象的方式输出，但在将源代码进行如下改造后，线上不会有问题，在本地启动项目会报“xxx is not defined”，因为export包裹后的变量会变成了局部变量。
export var managePage = {};
export function debounc() {}方案的优点：
- 任何
JavaScript高级语法特性都能很好的支持； - 可以对代码做压缩、混淆处理，减小文件大小，提高静态文件加载性能，提高源代码安全性；
方案的缺点：
- 在构建之前需要对源文件进行改造，工作量比较大，容易出错；
- 需要引入构建工具，添加构建配置，修改
JenkinsfileCI脚本；
ESlint警告
ESlint是一款插件化的javascript代码检测工具，我们可以利用其在FM项目脚本中是否使用了ES6+语法，如果脚本中有使用，立即报错处理，并提示哪些关键字的使用属于ES6语法。另外，为防止开发同学强推使用了ES6+语法的代码，在git hooks的pre-commit钩子中执行eslint命令校验，若通过，则代码成功commit；若不通过，控制台会打印错误日志。
注意：请开发同学在commit时不要添加--no-verify参数，否则会跳过校验
具体落地流程：
（1）在VScode编辑器中安装ESlint拓展插件，并启用
（2）在项目根目录下手动或者执行npx eslint --init创建.eslintrc.json配置文件，并添加如下配置项：
{
"root": true,
"env": {
"browser": true,
"jquery": true
},
"parserOptions": {
"ecmaVersion": 5,
"sourceType": "script"
},
"rules": {
}
}（3）因为管理中心不需要支持IE，因此关于此端的脚本不需要ESlint检视，我们在根目录下创建.eslintignore配置文件，向其中添加需要跳过检视的文件路径，比如src/main/webapp/static/js/adjustPage.js不需要检视：
// .eslintignore
src/main/webapp/static/js/adjustPage.js（4）在根目录执行npm init生成package.json，并添加如下命令，当执行git commit提交代码之前会执行precommit钩子进行eslint校验
{
"scripts": {
"precommit": "eslint --ignore-path .gitignore"
}
}
注意：如果这一步配置没有生效，可以试着引入
husky解决
该方案的优点：
- 配置比较简单，不用改造脚本代码，不用修改
JenkinsfileCI脚本；
该方案的缺点：
- 源代码直接在控制台能看到，不安全；
综上所述，如果已有项目组在FM项目中已经引入构建工具，比如备货组的商城页面已经引入多种语言开发，再使用构建工具打包，此类项目中沿用第一种方案即可，其他场景下的FM项目可以选择使用第二种方案，具体场景具体分析。
组织实施
暂定计划：上述方案的落地由XX同学领头，Aston55迭代在询报价组试行，如果效果比较好，则Aston56迭代在备货组、商家服务组推行，进而在整个平台推广。
问题反馈与建议
一切使用问题或者更好的建议都可以向XX同学反馈，谢谢支持与配合！