第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

ES6之Babel的各種坑總結(jié)

標(biāo)簽:
前端工具

自从 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.

  1. Different projects on the same machine can depend on different versions of Babel allowing you to update one at a time.

  2. 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


坑二: 编译插件

上述编译其实并没有进行,而是原样输出。这是因为我们没有安装相应的插件,官方提示我们需要安装 babel-reset-es2015 插件:

    $ npm install --save-dev babel-preset-es2015

然后,在根目录创建一个名为 .babelrc 的文件,里面配置如下内容:

    {
        "presets": [
            "es2015"
        ]
    }

同理,可以设置 React 的编译插件:

    $ npm install --save-dev babel-preset-react

.babelrc 文件里即:

    {
       "presets": [
           "es2015",
           "react"
       ] 
    }

坑三: babel-polyfill插件

Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 IteratorGeneratorSetMapsProxyReflectSymbolPromise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。Babel 默认不转码的 API 非常多,详细清单可以查看 definitions.js 文件

为了完整使用 ES6API ,我们只能安装这个插件:

    $ npm install -save-dev babel-polyfill

然后,在需要使用的文件的顶部引入

    import "babel-polyfill"

node.js 中:

    require('babel-polyfill');

webpack.config.js 中:

    module.exports = {
        entry: ['babel-polyfill', './app/js']
    }

参考资料

Babel官网

Babel使用指南

ES6标准入门@阮一峰

點(diǎn)擊查看更多內(nèi)容
27人點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專(zhuān)欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消