简单编译es6

2022-09-08 15:21:58 浏览数 (1)

1.安装node环境

2.cd 到项目目录

3.打开命令行 输入 npm init -y 初始化

4npm install@babel/core@babel/cli@babel/preset-env下载编译的东西

5.打开项目目录编辑package.json文件

代码语言:javascript复制
//package.json
{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  //通过babel编译 编译的目录为src -d指定输出的目录 ,这样src下面的所有js都会被编译到dest目录
    "build": "babel src -d dest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0"
  }
}

这里完成后我们还要生成一个配置文件,设置编译的规则

项目目录新键文件 .babelsrc

键入如下

代码语言:javascript复制
{
    "presets":["@babel/preset-env"]
}

我们在src目录新建main.js文件 键入如下测试代码

代码语言:javascript复制
let a = 1;
let b = 2;
console.log(a b);

命令行输入 npm run build 发现dest目录也生成main.js文件

代码语言:javascript复制
//被编译后的js文件
"use strict";

var a = 1;
var b = 2;
console.log(a   b);

接下来我们的入口文件引入dest目录下的js文件即可,在编辑的时候我们还是修改src的js文件 谷歌浏览器正常显示

ie浏览器正常显示

0 人点赞