babel環境安裝與編譯

babel:將瀏覽器不支持的ES6語法轉爲javascriptjavascript

查看node是否安裝:java

    npm -v
    node -v

實例演示:
在桌面新建part5目錄
在cmd命令行中node

    cd desktop
    cd part5

安裝babel:
初始化package.json文件:描述當前項目信息,包括依賴等es6

    npm init

安裝babel clinpm

    npm install --save-dev babel-cli

在package.json的"script"下添加一句:json

    "build": "babel entry.js"

建立entry.js文件,寫es6代碼用於測試瀏覽器

執行babel

npm run build

全局安裝babel-cli測試

    npm i babel-cli -g

安裝babel-preset-envui

    npm i -D babel-preset-env

建立配置文件,告訴babel用什麼規則來編譯文件.babelrc

{
    "presets": [
        [                
            "env",
            {
                "targets":{
                    "browsers":["last 1 version"]
                }
            }
        ]
    ]
}

修改packsge.json
-o 輸出到文件
-w 始終處於監聽狀態

"build": "babel entry.js -o index.js -w"

經過babel插件體驗新特性
安裝插件

npm i -D babel-plugin-transform-class-properties

修改.babelrc文件

{
    "presets": [
        [                
            "env",
            {
                "targets":{
                    "browsers":["last 1 version"]
                }
            }
        ]
    ],
    "plugins":["transform-class-properties"]
}
相關文章
相關標籤/搜索