[新手坑] 03.Vue-CLI用ES6编码仍需要手动安装一些Babel插件

lwx12525 发布于2019-08-26 11:52 / 2810人阅读

摘要：用编码仍需要手动安装一些插件这五一几天没什么事情想着再深入研究下然后又找了些教程结合官方文档研究却遇到了一个坑爹的问题在安装完成后如果需要用到一些语法编写代码有时候报错的话可能是缺少编译插件比如我在看文档和部分教程的时候有类似这样的代码

Vue-CLI用ES6编码仍需要手动安装一些Babel插件

这五一几天, 没什么事情, 想着再深入研究下Vuex, 然后又找了些教程, 结合官方文档研究. 却遇到了一个坑爹的问题...

在Vue-CLI安装完成后, 如果需要用到一些ES6语法编写代码, 有时候报错的话, 可能是缺少编译插件, 比如我在看Vuex文档和部分教程的时候, 有类似这样的代码

methods: mapActions([
  "increment",
  "decrement",
  "incrementIfOdd",
  "incrementAsync"
])

这段代码就是借用Vuex的辅助函数mapActions来使代码更简洁.

问题现象

而我一个组件中, 不可能只有这些mapActions的方法啊. 于是需要改写这个methods, 很多教程也有提到使用扩展运算符. 于是我就试着改写成如下:

methods: {
  ...mapActions([
    "increment",
    "decrement",
    "incrementIfOdd",
    "incrementAsync"
  ]),
  doSth() {
    console.log("doSth")
  }
}

这样看起来挺不错的. 编辑器内也没有提示存在语法错误. 但是按Ctrl+S的时候, 项目报错- -. 这下就懵逼了.

由于过于信任Vue-CLI默认配好的Babel环境可以编译改代码, 花了好长时间反复检查代码错误, 查扩展运算符的语法等等...

问题原因

由于ES6语法还不够熟悉, 东改改西改改, 弄了很长时间没有弄出来, 心想难道是真的不支持? 于是不爽的去找到Vuex官方Exaples - Counter的代码复制到自己项目来测试.

也就是上面我改写的那段, 居然还报错. 这下内心凉凉... 看样子折腾了很久的我, 意识到, 官方运行OK, 我这里一样的代码还是报错, 应该不是js代码的锅... 可能真的是Babel没有装好, 又想起之前看过的一篇文章好像有提到ES6的babel插件的问题. 只是我没有注意到... 文章在此:　vuex 源码：深入 vuex 之辅助函数 mapState

解决方案

那么接下来我们在Vue-CLI项目安装Object rest spread transform插件:

npm install --save-dev babel-plugin-transform-object-rest-spread

接着修改.babelrc文件, 例如

{
  "presets": [["env", { "modules": false }]],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    "transform-object-rest-spread",
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

接着重新运行项目. 总算正常了!

总结

有时候还是要自信一点, 看了视频和一些教程这样写都没报错, 唯独我报错了. 一般来说大概都是环境问题, 甩锅给Vue-CLI

GPU云服务器云服务器配置阿里云window服务器的一些坑手动安装nodejs java手动安装 lnmp手动安装步骤

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107713.html

Next.js踩坑入门系列（二）— 添加Antd && CSS

摘要：踩坑入门系列一二添加三目录重构再谈路由陆续更新个人对于脚手架的有一种执念，如果搭建出来就是一个首页标签跳转，实在不是我这个处女座的风格，因此第二步我就想引用框架，相信很多使用的开发者用的也都是这个框架吧。 Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由陆续更新... 个人对于脚手架的UI有一种执...

lifesimple 2019-08-23 11:38 评论0 收藏0
使用webpack和babel搭建react开发环境

摘要：译文原文来自写在前面使用已经蛮长一段时间但是在新项目开始之际都是东拼西凑其他项目的配置来使用如果要自己从零开始写一个完整项目的配置估计得费死劲所以在发布版本之际正是时候来认真从零开始学习了是一个出自的库用于构建用户交互界面是一个非常厉害的有译文,原文来自https://scotch.io/tutorials/s...写在前面,使用webpack已经蛮长一段时间,但是在新项目开始之际,...

AZmake 2019-08-20 15:58 评论0 收藏0
在 React-CRA 应用中配合 VSCode 使用 ESLint 实践前端代码规范

摘要：编码规范是独角兽公司内部的编码规范，该项目是上很受欢迎的一个开源项目，在前端开发中使用广泛，本文的配置规则就是以编码规范和编码规范作为基础的。更新时间：2019-01-22React.js create-react-app 项目 + VSCode 编辑器 + ESLint 代码检查工具 + Airbnb 编码规范前言为什么要使用 ESLint 在项目开发过程中，编写符合团队编码规...

Hujiawei 2019-08-23 14:55 评论0 收藏0
一份关于webpack2和模块打包的新手指南

摘要：使用让从打包文件中删除未使用的导出项以减少文件大小。最后，用以下内容替换的部分在命令行中运行将以监视模式启动，当目录中的文件更改时，它将重新编译。这种转换涉及三个单独的加载器和库在配置文件中为文件添加新规则。 webpack已成为现代Web开发中最重要的工具之一。它是一个用于JavaScript的模块打包工具，但是它也可以转换所有的前端资源，例如HTML和CSS，甚至是图片。它可以让你...

tianren124 2019-08-20 18:34 评论0 收藏0
配置React开发环境教程

摘要：这是一篇新手向文章，主要是记录一下使用过程，希望能给予别人一些帮助和提示用做包管理用做和语法编译器做模块管理和打包教程是基于的，得提前安装好。这是一篇新手向文章，主要是记录一下使用过程，希望能给予别人一些帮助和提示用 Yarn 做包管理用 Babel 做jsx和es6语法编译器Webpack 做模块管理和打包教程是基于macOS的，Nodejs得提前安装好。我的Nodejs和np...

explorer_ddf 2019-08-20 14:34 评论0 收藏0