关于[email protected]中使用EasyScroll插件--jsx语法以及Babel7配置

新项目决定尝试[email protected]脚手架，脚手架内容变动较大，还在一步步地踩坑，
这里针对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.简单应用

        

          内层容器固定高度
        

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://blog.csdn.net/qq_35844177/article/details/78042284

[email protected]中用法

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，安装插件后需要手动删除，而且此插件只出了一版，一直未进行升级更新