babel
-
babel是什么?
- 官方说法:是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在现有环境执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。
-
nmp的一些修改(没有node环境需要到官网下载:(nodejs下载)
- 安装nodejs后打开大黑框(Win+R输入CMD)使用
npm install -g cnpm --registry=https://registry.npm.taobao.org
命令将npm的命令换成cnpm。 - cnpm的作用是和npm一样。只是npm默认使用外国的源下载包,cnpm使用国内下载源,在下载速度会快一些。
- 安装nodejs后打开大黑框(Win+R输入CMD)使用
-
babel环境配置
- 首先在工程文件夹下进入cmd命令行,使用cnpm init初始化工程项目,在写入一些项目说明后会生成一个
package.json
的json文件。 - 开始安装babel的cli(脚手架),
cnpm i @babel/core @babel/cli -D``````i
是install
的缩写,-D
是--save-dev
的缩写,--save-dev
的作用是将下载的依赖包保存到package.json
配置文件中,便于之后误删除依赖包或者转移项目时可方便的重新下载相关的包。等待… - 安装完成后,多出一个node_modules的文件夹,这里是工程依赖的包存放位置。且可以看到在
package.json
文件中会新增"devDependencies": {"@babel/cli": "^7.6.4", "@babel/core": "^7.6.4"}
这样的配置说明,devDependencies表示项目的依赖包,说明该项目依赖于babel/cli, babel/core。手动将node_modules删除,然后在命令行中写入cnpm i即可恢复之前的依赖包(就是方便)。 - 在
package.json
中的script
配置中添加"build": "babel src -d lib"
,src表示需要运行的程序,-d 表示输出文件夹名为libscript
表示一些脚本(启动脚本),就是为了方便运行程序的。每次使用babel编译js文件时,都只需要使用npm run build
命令即可,而不需要npm run babel src -d lib
。 - 配置``.babelrc````文件,Babel 的配置文件是.babelrc,存放在项目的根目录下,该文件用来设置转码规则和插件。在项目根目录中新建该文件,在文件中写入
{"presets": ["@babel/preset-env"]}
,接着在命令行写入cnpm i @babel/preset-env -D
,preset表示预设,就是对babel的转码规则进行默认设置,preset-env表示将代码转码为ES2015+。-D前面解释过了。 - 安装完成后可以在
package.json
中看到devDependencies
新增了一行"@babel/preset-env": "^7.6.3"
,表示babel的转码预设依赖包。这时候babel的配置已经完成啦!快去试试吧。
- 首先在工程文件夹下进入cmd命令行,使用cnpm init初始化工程项目,在写入一些项目说明后会生成一个