第1节:ES6的开发环境搭建

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Judian6974/article/details/80352995

第1节:ES6的开发环境搭建

1,建立html文件
2,引用js文件,注意是dist目录下的文件
3,编写js文件,很简单,作一个a变量的声明,并用console打印出来

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

let是ES6的一种声明方式,接下来把这个ES6的语法文件自动编程成ES5的语法文件。

4,初始化项目:在安装Babel之前,需要npm init -y命令来初始化
-y表示全部默认同意,就不用一次次按回车。命令执行完成后,会在项目根目录下生产package.json文件(可以根据自己需要进行修改,比如修改name值)。

{
  "name": "ES6",
  "version": "1.0.0",
  "description": "这是es6教程代码",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "xsm",
  "license": "ISC"
}

5,全局安装babel-cli

npm install -g babel-cli

6,试一下是否能成功进行转换:

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

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

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

8,安装完成后package.json多了

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

9,在根目录下新建.babelrc文件,并写下列代码:

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

10,建立完成后载输入转换命令,这次ES6成功转化为ES5的语法

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

11.简化转化命令:打开package.json,修改成这样

"scripts": {
  "build": "babel src/index.js -o dist/index.js"
},

修改好后就可以使用npm run build进行转换了。

不过我用的webstorm,不是VSCode,所以有直接在webstorm上设置ES6写法和自动转化成ES5的方法,用webstorm的小伙伴下面有网址可以看着改哦!

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页