关于vue-cli@3.0中使用EasyScroll插件--jsx语法以及Babel7配置

新项目决定尝试vue-cli@3.0脚手架，脚手架内容变动较大，还在一步步地踩坑，
这里针对jsx语法支持和babel7配置做踩坑记录：

需求背景：@2.0中一直在用一款滚动条插件EasyScroll，此插件依赖JSX语法，

原用法

1.安装vue-jsx插件

npm install\
babel-plugin-syntax-jsx\
babel-plugin-transform-vue-jsx\
babel-helper-vue-jsx-merge-props\
babel-preset-es2015\
--save-dev

2.更改.babelrc文件

{
"presets": [
["es2015", { "modules": false }],
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-runtime"],
"plugins": ["transform-vue-jsx"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}

3.安装使用插件

npm isntall --save easyscroll

4.简单应用

<EasyScrollbar  :barOption="BarOption">
<div  id="wrapper" style="height: 300px;">
内层容器固定高度
</div>
</EasyScrollbar>

5.配置参数

BarOption:{
barColor:"#959595",   //滚动条颜色
barWidth:6,           //滚动条宽度
railColor:"#eee",     //导轨颜色
barMarginRight:0,     //垂直滚动条距离整个容器右侧距离单位（px）
barMaginBottom:0,     //水平滚动条距离底部距离单位（px)
barOpacityMin:0.3,      //滚动条非激活状态下的透明度
zIndex:"auto",        //滚动条z-Index
autohidemode:true,     //自动隐藏模式
horizrailenabled:true,//是否显示水平滚动条
}

EasyScroll用法参考原文：https://www.geek-share.com/detail/2716895664.html

vue-cli@3.0中用法

1. 升级成babel7插件安装（install格式更改）
参考地址：https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app

npm install --save-dev
@vue/babel-preset-app
@vue/babel-preset-jsx
@vue/babel-helper-vue-jsx-merge-props
@babel/plugin-transform-runtime

2.此版本中删除了.babellrc文件，babel相关配置在新建文件babel.config.js中配置，

module.exports = {
"presets": ["@vue/app",
["@babel/preset-env", {"modules": false}],
"@vue/babel-preset-jsx"
],
"plugins": ["@babel/plugin-transform-runtime" ]
}

EasyScroll用法不变同上

注：尝试网上几个滚动条插件，目前还是最满意EasysScroll，他有个问题是，代码里遗留了一个debugger，安装插件后需要手动删除，而且此插件只出了一版，一直未进行升级更新