babel环境安装与编译

发布时间：2020-12-16 04:21:38 所属栏目：百科来源：网络整理

导读：babel：将浏览器不支持的ES6语法转为javascript 查看node是否安装： npm - v node -v 实例演示：在桌面新建part5目录在cmd命令行中 cd desktop cd part5 安装babel：初始化package.json文件：描述当前项目信息，包括依赖等 npm init 安装babel cli npm in

babel：将浏览器不支持的ES6语法转为javascript

查看node是否安装：

    npm -v
    node -v

实例演示：
在桌面新建part5目录
在cmd命令行中

    cd desktop
    cd part5

安装babel：
初始化package.json文件：描述当前项目信息，包括依赖等

    npm init

安装babel cli

    npm install --save-dev babel-cli

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

    "build": babel entry.js"

创建entry.js文件，写es6代码用于测试

执行

npm run build

全局安装babel-cli

    npm i babel-cli -g

安装babel-preset-env

    npm i -D babel-preset-env

创建配置文件，告诉babel用什么规则来编译文件.babelrc

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

修改packsge.json
-o 输出到文件
-w 始终处于监听状态

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

通过babel插件体验新特性
安装插件

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

修改.babelrc文件

]
                }
            }
        ]
    ],pluginstransform-class-properties]
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!