Vue适配IE9及非node环境适配babel
缘起
随着Vue的兴起， 越来越多的前端开发者开始采用 MVVM 结构， 也让他们从繁琐 Dom 操作中得到解脱。
然而，有的用户离开IE总感觉世界要末日了， 这也是适配 IE9 的缘起。
查看Vue的文档深入响应式原理，发现vue是支持 IE9的，而且最低支持到IE9：
当你把一个普通的 JavaScript 对象传入 Vue 实例作为
data选项，Vue 将遍历此对象所有的 property，并使用Object.defineProperty把这些 property 全部转为 getter/setter。Object.defineProperty是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
在适配的过程中，发现几处痛点，记录下来，期望能帮助后来者吧：
性空
-
vue项目在IE9中报SCRIPT1002: 语法错误
Vue项目在IE9中报语法错误
上图中，根据错误路径，发现是 "./node_modules/vuejs-datepicker/dist/vuejs-datepicker.esm.js" 这个js的问题导致的报错。 后来查找资料发现 eval()包含的代码中有ES6的语法，IE不支持 ， 针对于此， 引入 babel-polyfill :
npm 引入 ployfill
- 1、安装babel-polyfill, 并保存到依赖库：
npm install babel-polyfill --save
- 2、main.js 入口文件 引入 babel-polyfill:
import 'babel-polyfill'
- 3、修改
webpack.base.conf.js的 entry 配置:
……
entry: ["babel-polyfill", './src/main.js'],
……
CDN 引入 ployfill:
即在 index.html 中引入 ployfill 的 js 文件即可， 这样改动最小：
<script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script>
在使用 babel 的时候需要注意：
虽然你用了babel，但是babel缺省设置中的一项
exclude: /node_modules/是把 node_modules 下的文件排除在外的，因为node_modules中有很多文件，如果每次都babel的话，编译时间会非常长，所以babel要求这些模块提供厂商在dist文件夹下应该放入babel之后的文件，但是有些模块厂商偷懒或者什么原因，把未经babel的文件交给了node_modules，这样就混入了ES6语法，例如箭头函数等，node_modules编译之后的结果是vendor.js，所以你会看到错误出现在vendor.js里。
因此，我们猜测是 vuejs-datepicker.esm 这个文件并没有经过babel翻译，导致适配IE的时候出错。 那么需要在 webpack.base.conf.js 文件 -> rules 配置中-> js 选项 针对 vuejs-datepicker.esm 进行解析：
rules: [
……
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('node_modules/webpack-dev-server/client'),
//这里对 vuejs-datepicker.esm 用 babel-loader 进行解析使用
resolve('node_modules/vuejs-datepicker/dist/vuejs-datepicker.esm')
]
},
……
]
然后重启 node环境， 发现问题得以解决；
-
IE11 的样式问题:
ie11是个比较恶心的浏览器，什么组件到了他那儿都可能出问题。
select框的原生样式去不掉。
textarea无法和其他浏览器一样，自动换行。其他浏览器下都正常，就ie11有点问题。
- 对于select组件，要设置一个展开的样式，在ie11显示下就没有选择时出现的哪个下拉时的选择
select::-ms-expand {
display:none;
}
- textarea无法和其他浏览器一样，自动换行
强制不换行：white-space:nowrap;
自动换行：word-wrap:break-word;
word-break:normal;
强制英文换行：word-beark：break-all;
这次整的这个项目里，textarea下设置这些个样式，都不生效。
最后试到了 white-sapce:normal;才得以解决。
非node环境下适配babel
我们大都在 vue 及 webpack 的环境内使用babel。 但是有些特殊情况下是 没有node 环境的。 但是需要引入的包可能是 ES6写的，那么这种情况下怎么解决呢。
我们发现 github 的 babel下，有个 babel-standalone 库：
通过 readme 了解到，可以通过 Babel.transform 来转换字符串的ES6代码， 通过 Babel.registerPlugin 来注册插件。私以为以下的解决方案更友好，可读性也强：
When loaded in a browser, babel-standalone will automatically compile and execute all script tags with type text/babel or text/jsx:
具体demo如下：
<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>
IE9非node环境使用 babel
