es6开发环境搭建

最新推荐文章于 2020-12-19 16:13:03 发布

默默地写代码

最新推荐文章于 2020-12-19 16:13:03 发布

阅读量214

点赞数 2

分类专栏： JavaScript 文章标签： es6搭建

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一，先创建一个项目，项目中有两个文件夹，src和dist，一个html文件

src：将编写的ES6的js文件放到此文件夹中（这里是index.js文件）
dist：将通过Babel编译成的ES5的js文件放到此文件中（这里是index.js文件）
html：注意：将dist中编译好的文件引入到HTML文件中，而不是src中的js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<script src="./dist/index.js"></script>
<body>
    EXMA Script 6
</body>
</html>

二，搭建环境

1，在项目的根目录初始化项目并生成package.json文件(可以根据自己的需求进行修改)

npm init -y

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2，安装Babel插件（将ES6语法转换为ES5）

npm install -g babel-cli

3，当然现在还不能正常转换，还需要安装ES5所需的一个包

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

安装完成后，package.json会有所变化

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

4，在项目的根目录添加一个 .babelrc 文件，并添加内容

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

5，安装完成后我们可以通过命令进行转换

babel src/index.js -o dist/index.js

6，当然我们可以将命令进行简化（package.json进行配置）

"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "babel src/index.js -o dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

然后我们可以通过 npm run test 转义代码

声明： 本文转自其他站点，仅用于个人搭建。

默默地写代码

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
es6开发环境搭建

一，先创建一个项目，项目中有两个文件夹，src和dist，一个html文件src：将编写的ES6的js文件放到此文件夹中（这里是index.js文件）dist：将通过Babel编译成的ES5的js文件放到此文件中（这里是index.js文件）html：注意：将dist中编译好的文件引入到HTML文件中，而不是src中的js文件&lt;!DOCTYPE html&gt;&lt;html...
复制链接

扫一扫