遇到几个前端小问题

20pzqm
• 阅读 681

babel 问题

babel是负责转换ES 新版本语法到老版本js上的。 比如解构语法 ... 程序有如下报错

Syntax Error: Unexpected token

   8 |     let data_ = [];
   9 |     data.forEach(d => {
> 10 |       let d_ = {...d};
     |                 ^
  11 |       //产品名称
  12 |       if(d_.hasOwnProperty('productNo')){
  13 |         d_.productName = product.getProductNameByProductNo(d_.productNo);

解决方法

yarn add -D babel-plugin-syntax-jsx
yarn add -D babel-plugin-transform-runtime
yarn add -D babel-plugin-transform-vue-jsx
yarn add -D babel-preset-env
yarn add -D babel-preset-stage-2 

前端工程根目录建立.babelrc,写入如下内容

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

postcss的问题

遇到几个前端小问题

Module build failed: Error: No PostCSS Config found in: E:\CODE\xxxxxx

新建.postcssrc.js文件,写入如下内容

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {}
  }
}
点赞
收藏
评论区
推荐文章
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Babel配置中的presets、plugins、各个阶段stage的含义
什么是BabelBabel官方文档:https://babeljs.io/Babel 中文文档:https://www.babeljs.cn/我们知道各个浏览器对JavaScript版本的支持各不相同,很多新的语法无法直接在浏览器中运行,为了解决这个“沟通不畅”的问题,所以就有了Babel,Babel主要用于将ECMAScrip
Stella981 Stella981
3年前
ES6 系列之 Babel 是如何编译 Class 的(上)
_摘要:_ 前言在了解Babel是如何编译class前,我们先看看ES6的class和ES5的构造函数是如何对应的。毕竟,ES6的class可以看作一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。constructorES6中:\
Wesley13 Wesley13
3年前
thinkphp3.2.3模板渲染支持三元表达式
thinkphp3.2.3模板渲染支持三元表达式{$status?'正常':'错误'}{$info'status'?$info'msg':$info'error'}注意:三元运算符中暂时不支持点语法。如下:           <divclass"modalhidefade"id'myModa
Stella981 Stella981
3年前
ES6 系列之 Babel 是如何编译 Class 的(下)
_摘要:_ 前言在上一篇\《ES6系列Babel是如何编译Class的(上)》\(https://github.com/mqyqingfeng/Blog/issues/105),我们知道了Babel是如何编译Class的,这篇我们学习Babel是如何用ES5实现Class的继承。ES5寄生组合式继承\
Stella981 Stella981
3年前
Babel
Babel是JavaScript编译器,主要用于将ECMAScript2015版本的代码转换为向后兼容的JavaScript语法,以便能够运行在当前和旧版本的浏览器或其他环境中.中文官方地址https://www.babeljs.cn/(https://www.oschina.net/action/GoToLink?urlhttps%
Stella981 Stella981
3年前
Babel总结
什么是babel?babel是一个JavaScript编译器。Babel是一个工具链,主要用于将ECMAScript2015代码转换为向后兼容的旧浏览器或环境中JavaScript版本。注解:传统的编译是指转化成可执行的代码,也就是二进制代码。但是对于前端来说,因为JS是解释性语言,对于浏览器或者Node来说就是可执行的代码。
Stella981 Stella981
3年前
Babel是如何读懂JS代码的
本文转载自:安秦 https://zhuanlan.zhihu.com/p/27289600概述稍微了解行业现状的开发者都知道,现在前端“ES6即正义”,然而浏览器的支持还是进行时。所以我们会用一个神奇的工具将ES6都给转换成目前支持比较广泛的ES5语法。对,说的就是Babel。本文不再介绍Babel是什么也不讲怎么用,这类
Easter79 Easter79
3年前
Tool系列—Babel
1、简单介绍     这些转换器(更准确地说是源代码到源代码的编译器)可以把你写的符合ECMAScript6标准的代码完美地转换为ECMAScript5标准的代码,并且可以确保良好地运行在所有主流JavaScript引擎中。    Babel对ES6的支持程度比其它同类更高,而且Babel拥有完善的文档和一个