babel

1.查看浏览器的报错，如果有html的错误，按照错误提示修改一下。 2.如果报的错误为下面图片的错误，应该就是es6的语法没有转为es5，浏览器识别不了。 解决办法 　　安装: npm instatll babel-polyfill -save / yarn add babel-polyfill 　　main.js最顶部引入 import 'babel-polyfill' 　　找到webpack的入口文件，vue-cli创建的目录build/webpack.base.conf.js 　　entry: { 　　　　app: './src/main.js' 　　} 　　改为如图 　　 { test: /\.js$/, loader: 'babel-loader', include: [ resolve('node_modules/vue-echarts'), //如果使用了这个组件添加上去，没使用可以不放 resolve('node_modules/resize-detector') ] }, 　　配置.babelrc文件 　　根目录下创建.babelrc文件 { // 此项指明，转码的规则 "presets": [ // env项是借助插件babel-preset-env，下面这个配置说的是babel对es6,es7,es8进行转码，并且设置amd,commonjs这样的模块化文件

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 ECMAScript 和 JavaScript 的关系 一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？ 要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。 该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。 因此，ECMAScript 和

项目兼容性问题 开发环境 360浏览器 vue "^2.5.17" vue-cli3 问题 对象不支持“startsWith”属性或方法 startsWith()方法用来判断当前字符串是否是以另外一个给定的子字符串“开头”的，根据判断结果返回 true 或 false。 查阅 MDN ，发现ie根本就不支持，因此使用ie内核的360浏览器必然也不支持 解决方案 这个是es6字符串的一个方法，但是ie不支持，因此只能使用babel-polyfill，这个是对这些不支持方法的实现，解决方法如下： npm install babel-polyfill -S import 'babel-polyfill' --- 在index.js中引入 新问题 在360上很奇怪，有的页面还会报这个错 然后我就把MDN的的polyfill给引过来了 新建一个polyfill.js，代码如下 if (!String.prototype.startsWith) { (function() { 'use strict'; // needed to support `apply`/`call` with `undefined`/`null` var defineProperty = (function() { // IE 8 only supports `Object.defineProperty` on DOM

1、安装插件 cnpm install --save babel-polyfill 2、在 src/main.js 中引入插件 来源： oschina 链接： https://my.oschina.net/u/4409292/blog/3221430

这个是解析我们es6的代码的，为什么要用它呢，因为对于一些ie浏览器，甚至FF浏览器，低版本的还不能识别我们的es6代码，那么vue里面好多还让我们去写es6的代码，这个时候我们就可以用babel这个工具将我们的es6的代码转译成浏览器能识别的代码 左边是我们写的es6代码，右边是通过babel这个工具编译之后的代码。这个代码能在我们各个浏览器中去识别。 所以我们成为babel，是用于编写下一代JavaScript的编译器。 模块化 在前端中一个js文件就是一个模块，在js中没有模块化的概念。 目前有四种模块化的方法 1.Commonjs 2.AMD 3.CMD 4.ES6Module es6Module 支持import和export。跟python的import很像。但它必须在服务器环境下才支持，或者我们可能通过webpack的babel-loader将es6支持转化成es6的语言。 在这里就不给大家演示，大家了解一下即可。后面咱们使用vue开启项目之后，一使用，自然而然就明白了。 这个是解析我们es6的代码的，为什么要用它呢，因为对于一些ie浏览器，甚至FF浏览器，低版本的还不能识别我们的es6代码，那么vue里面好多还让我们去写es6的代码，这个时候我们就可以用babel这个工具将我们的es6的代码转译成浏览器能识别的代码 左边是我们写的es6代码

钉钉前端团队原创，点击右上角关注我们，了解更多前端技术 作者: 烛象 引言 在JavaScript蓬勃发展的今天，ES6/7、typescript已经成为代码编写的标配。 上一篇文章，我们介绍了钉钉IDL和自动生成typescript定义的工具，本文将会介绍AST相关js知识:babel。 关于babel 一句话阐述什么是babel: babel是一个主要用于将ES2015+版本的代码编译成向下兼容(比如ES5/ES3)js版本的编译器。 // Babel Input: ES2015 arrow function [ 1 , 2 , 3 ].map( ( n ) => n + 1 ); // Babel Output: ES5 equivalent [ 1 , 2 , 3 ].map( function ( n ) { return n + 1 ; }); 复制代码 结合实际使用场景，我们接触到的babel使用方式一般为 .babelrc/babel.config.json （babel配置文件） babel-loader (webpack/rollup等) 然而，.babelrc的每一块配置后面究竟代表着babel怎样的处理方式，这个估计很少有人能讲得清楚。 babel知识体系 1、主要组件 源代码到AST: babel/parser（前身为babylon） 依赖acorn

第一章：模块化开发 1.1-模块化概述 1.1.1-为什么需要模块化 传统开发模式的主要问题： 命名冲突 文件依赖 通过模块化解决上述问题： 模块化就是把单独的一个功能封装到一个模块中（文件中），模块化之间互相隔离（高内聚，低耦合），但是可以通过特定的接口公开内部成员（导出），也可依赖别的模块（导入）。 模块化开发的好处，方便代码的重用，提高开发效率，并且便于后期维护。 1.1.2-模块化相关规范 浏览器端模块化规范 AMD，典型代表 Require.js CMD，典型代表 Seajs 在本篇文章中，不做过多解释，因为这两种浏览器端模块化规范已经过时。 服务器端（node）模块化规范 CommonJs规范，在node环境中使用。典型规范定义如下： 模块分为 单文件 与 包 模块成员导出： module.exports 或 exports 模块成员导入： require('模块标识符') ES6模块化规范 ES6模块化规范，是大一统的规范。 在ES6模块化未出现之前，JavaScript社区已经尝试并提出了AMD、CMD、CommonJs等模块规范。 但是这些模块化规范的标准还存在一定的差异性、局限性，并不是浏览器与服务器通用的标准规范。例如： AMD和CMD仅适用于浏览器端模块化规范 CommonJS仅适用于服务器端Node环境 因此，ES6在语言层面上定义了ES6模块化规范

1、建立工程目录 　　src:使用ES6语法编写的JS文件； 　　dist:使用Babel转换成ES5的文件，在项目引用的时候引用的是这个文件夹里边的JS文件 2、初始化项目 　　npm init -y 　　-y是指表示全部默认，不需要一个一个敲回车 3、全局安装Babel-cli 　　 npm install -g babel-cli 4、本地安装babel-preset-es2015 和 babel-cli 　　 npm install --save-dev babel-preset-es2015 babel-cli 5、新建.babelrc 　　 { "presets":[ "es2015" ], "plugins":[] } 6、输入终端转换命令 　　 babel src/index.js -o dist/index.js ***简化终端命令 　　修改package.json文件中的scripts,修改后为 { "name": "es6", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "babel src/index.js -o dist/index.js" }, "keywords": [], "author": "", "license": "ISC",

https://juejin.im/post/5ddff3abe51d4502d56bd143#heading-6 配置方法 https://www.cnblogs.com/sea-breeze/p/10490672.html @babel/runtime @babel/plugins-transform-runtime https://babeljs.io/docs/en/next/babel-preset-env.html preset-env官方配置文档 https://blog.csdn.net/weixin_33743703/article/details/91362067 corejs https://www.cnblogs.com/chris-oil/p/10924426.html 来源： https://www.cnblogs.com/little-ab/p/12579561.html

错误：No parser and no filepath given, using 'babel' the parser now but this will throw an error in t he f 原因:vue-loader的版本没跟上其他包的版本导致解析器不运行 解决办法： 找到modules包里面的：node_modules\vue-loader\lib\template-compiler\index.js 找到 if (!isProduction) { code = prettier.format(code, { semi: false}) } 替换为 if (!isProduction) { code = prettier.format(code, { semi: false, parser: 'babel' }) } 重新run ,ok 来源： https://www.cnblogs.com/hellosiyu/p/12573878.html