ES6项目部署笔记

最新推荐文章于 2021-03-13 11:09:12 发布

故梦连城

最新推荐文章于 2021-03-13 11:09:12 发布

阅读量322

点赞数

分类专栏：前端es6学习笔记文章标签：前端 es6 学习笔记

本文链接：https://blog.csdn.net/weixin_41482001/article/details/84926858

版权

前端es6学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ES6项目部署

一、查看当前浏览器的支持ES6情况：kangax.github.io/compat-table/es6/。

二、使用命令查看当前Node已经实现的ES6特性：

$ node --v8-options | grep harmony //可以实现当前Node实现ES6的情况

三、查看当前浏览器对ES6的支持情况：http://ruanyf.github.io/es-checker

四、项目环境搭建步骤：

先建立一个项目的工程目录，并在目录下边建立两个文件夹：src和dist

src：书写ES6代码的文件夹，写的js程序都放在这里。
dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件。
在src文件夹下面创建index.html，在dist下面创建index.js

index.html代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./dist/index.js"></script>
    </head>
    <body>
        Hello ECMA Script 6
    </body>
</html>

index.js代码如下：

let a=1;
console.log(a);

第二步，初始化项目

在这之前需要初始化项目：打开终端或者通过cmd打开命令行工具，进入项目目录，输入下边的命令：

npm init -y

初始化项目之后，本地会出现一个·package.json的文件，name名字可以自己修改。

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

第三步，安装环境

全局安装Babel-cli：在终端输入以下命令；

npm install -g babel-cli

本地安装babel-preset-es2015 和 babel-cli

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

安装完成后，我们可以看一下我们的package.json文件，已经多了devDependencies选项。

"devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }

第四部，新建.babelrc

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

有了这个文件后，我们就可以进行ES6转化为ES5语法。

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

第五步，简化转化命令：打开package.json文件，把文件修改成下面的样子。

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