babel

在引入element-ui引发的问题，解决如下： 　　1.npm install 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-vue-jsx", "transform-runtime", [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ], "env": { "test": { "presets": ["env", "stage-2"] } } } 　　3.在webpack.base.conf.js文件中加入如下代码： 　　 loaders: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: [

使用babel将ES6转化成ES5 有些浏览器还不支持ES6语法，这是我们需要将ES6语法转换成ES5，除了可以利用webpack的自动编译转换功能之外，也可使用babel进行转换。 转换步骤如下： 1.创建文件及目录如下，dist文件夹下为Babel转化后的ES5文件；src文件夹下为自己编写的ES6文件 2，打开终端，输入以下命令。在安装babel之前，需要初始化我们的项目 D: \code \es 6Test>npm init -y 3.这时会产生一个package.json文件，name可以进行修改 { " name ": "es6" , " version ": "1.0.0" , " description ": "" , " main ": "index.js" , " scripts ": { " test ": "echo \"Error: no test specified\" && exit 1" } , " keywords ": [] , " author ": "" , " license ": "ISC" , } 4.全局安装Babel-cli npm install -g babel -cli 5.本地安装babel-preset-es2015 和 babel-cli npm install -- save -dev babel -preset

阅读文档 Babel中文网 关于 Babel 你必须知道的 如何写好.babelrc？Babel的presets和plugins配置解析 不容错过的 Babel 7 知识汇总 一口（很长的）气了解 babel core-js@3带来的惊喜 babel 7 的使用的个人理解 介绍 Babel is a JavaScript compiler. ——顾名思义， Babel 就是将最新的 ES6+ 语法，向后兼容，编译转化为支持各个浏览器可以运行的 javascript 代码。 Babel 编译 babel 编译经历三个阶段： 解 析( parse) ，转换( transform )，生成( generate ) 。 注意：在升级 Babel 6.X 版本以后，所有的插件都是可插拔的（ 意味着 transform 流程全部交给了插件去做 。 ）。 这就意味着安装 babel 之后，是不能工作的，需要配置对应的 .babelrc 文件才能发挥完整的作用。 如果想要通过 Babel 完成你的代码转换，那么需要配置一些你需要的插件。 插件—— plugin plugin 就是将高级的语法转化为兼容多种浏览器的载体： Babel 构建在插件之上，使用现有的或者自己编写的插件可以组成一个转换通道， Babel 的插件分为两种: 语法插件和转换插件。 语法插件 这些插件只允许 Babel 解析

ES6新特性 关于E S6新特性我就不废话太多了，这里仅简单罗列一下： 箭头函数 类 增强的Object字面量 模板字符串 解构 参数默认值，不定参数，拓展参数 let与const 关键字 for of 值遍历 模块 Map和Set类型 Proxies Symbols Math，Number，String，Object 的新API Promises异步对象 参考1： http://www.cnblogs.com/Wayou/p/es6_new_features.html 参考2： http://babeljs.io/docs/learn-es2015/ Babel 6 由于目前主要浏览器不能够完全支持ES6，因此通常借助一些工具将ES6语法翻译成ES5， Babel即是这样一款工具。 最新的Babel 6与Babel 5及更早的版本有很大的差别， Babel变成了一个平台，而其他各种工具则以插件的形式安装。 通过控制台全局安装babel： npm install -g babel-cli 此时，全局安装的模块默认位于“C:\Users\zhl\AppData\Roaming\npm\node_modules”（Windows系统），为了正常使用Babel，一定要添加环境变量“NODE_PATH”，并指向上述路径。 为了使用Babel的翻译功能，安装ES6翻译插件（仍然全局安装）：