Vue适配IE9及非node环境适配babel Vue适配IE9及非node环境适配bab

缘起随着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 文件即可，这样改动最小：

在使用 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写的，那么这种情况下怎么解决呢。
【Vue适配IE9及非node环境适配babel】我们发现 github 的 babel下，有个 babel-standalone 库：
通过 readme 了解到，可以通过 Babel.transform 来转换字符串的ES6代码，通过 Babel.registerPlugin 来注册插件。私以为以下的解决方案更友好，可读性也强：