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

在使用 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如下：

IE9非node环境使用 babel

参考资料

• vue项目在IE9/10中报错SCRIPT1002: 语法错误
• babel-polyfill 兼容IE9+问题
• IE11下部分样式调整