自从 babel 由版本5升级到版本6后,在安装和使用方式上与之前大相径庭,于是写了这篇入坑须知,以免被新版本所坑。
$ npm install –global babel-cli
这时候我们可以使用 Babel 命令编译文件:
$ babel index.js --out-file compiled.js
#或
$ babel index.js -o compiled.js
编译目录:
$ babel src -out-dir lib
#或
babel src -d lib
但是,官方推荐本地安装,是这么说的:
While you can install Babel CLI globally on your machine, it’s much better to install it locally project by project.
There are two primary reasons for this.
Different projects on the same machine can depend on different versions of Babel allowing you to update one at a time.
It means you do not have an implicit dependency on the environment you are working in. Making your project far more portable and easier to setup.
大致的意思就是:可移植性较好并且没有依赖。
本地安装,记在项目的根目录下:
$ npm install --save-dev babel-cli
但是在本地就不能用 babel 命令了,我们可以在 package.json 文件中添加点东西:
{
"script": {
"build": "babel src -d lib"
}
}
然后,运行 npm run build 即可把 src 目录编译输出到 lib
$ npm install --save-dev babel-preset-es2015
然后,在根目录创建一个名为 .babelrc 的文件,里面配置如下内容:
{
"presets": [
"es2015"
]
}
同理,可以设置 react 的编译插件:
$ npm install --save-dev babel-preset-react
.babelrc 文件里即:
{
"presets": [
"es2015",
"react"
]
}
为了完整使用 ES6 的 API ,我们只能安装这个插件:
$ npm install -save-dev babel-polyfill
然后,在需要使用的文件的顶部引入
import "babel-polyfill"
node.js 中:
require('babel-polyfill');
webpack.config.js 中:
module.exports = {
entry: ['babel-polyfill', './app/js']
}
作者: Chansi_lEE
链接:https://www.imooc.com/article/11157
来源:慕课网
大家知道,将ES6代码编译为ES5时,我们常用到Babel这个编译工具。大家参考一些网上的文章或者官方文档,里面常会建议大家在.babelrc中输入如下代码
文的babel使用场景局限于babel配合webpack来转译输出es5的js代码,babel的命令行、以代码形式调用或node环境下这些统统都不会涉及。Babel使用的难点主要在于理解polyfill、runtime和core-js。
babel-preset-env 一个帮你配置babel的preset,根据配置的目标环境自动采用需要的babel插件。babel-preset-env 功能类似 babel-preset-latest,优点是它会根据目标环境选择不支持的新特性来转译
本文主要内容包括:什么是babel-polyfill,如何使用,如何通过按需加载进行性能优化。babel只负责语法转换,比如将ES6的语法转换成ES5。但如果有些对象、方法,浏览器本身不支持,此时需要引入babel-polyfill来模拟实现这些对象、方法。
由于现在前端出现了很多非es5的语法,如jsx,.vue,ts等等的格式和写法。babel其实是一个解释器,它主要讲进行中的代码分为三个阶段执行:解释,转换,生成。
在 JavaScript 中,没有基本类型,创建的所有东西都是对象。例如,创建一个新字符串,与其他语言不同,在 JavaScript 中,字符串或数字的声明会自动创建一个封装值的对象,并提供不同的方法,甚至可以在基本类型上执行这些方法。
在项目根目录下新建一个配置文件—— webpack.config.js 文件:执行编译打包命令,完成后打开 bundle.js 文件发现 isNull 和 unique 两个函数没有被编译,和 webpack 官方说法一致:webpack 默认支持 ES6 模块语法,要编译 ES6 代码依然需要 babel 编译器。
Babel对代码进行转换,会将JS代码转换为AST抽象语法树(解析),对树进行静态分析(转换),然后再将语法树转换为JS代码(生成)。每一层树被称为节点。每一层节点都会有type属性,用来描述节点的类型。其他属性用来进一步描述节点的类型。
Babel 对于前端开发者来说应该是很熟悉了,日常开发中基本上是离不开它的。我们已经能够熟练地使用 es2015+ 的语法。但是对于浏览器来说,可能和它们还不够熟悉,我们得让浏览器理解它们,这就需要 Babel
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!