为何要搭建ES6开发环境,如何搭建ES6开发环境?
1、ES6需要搭建开发环境,原因是现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6语法的,这就需要我们把ES6的语法自动转变成ES5的语法。
2、开始搭建环境
①新建文件夹ES6,在文件夹ES6下新建两个文件夹src(书写ES6代码的文件夹,写的js程序都放在这里)和dist(利用Babel编译成的ES5代码的文件夹,在HTML页面需要引入的是这里的js文件),在ES6文件夹下创建index.html,在src中新建index.js文件,此处的index.js文件用ES6语法书写,而转换成的ES5语法在dist文件夹下的index.js中(这是通过开发环境转换的),所以index.html中js的引入是dist/index.js,如何转换请看下一步操作;
②npm init -y 项目初始化命令,-y的作用是默认一次性生成package.json文件,不用人为干涉一步步操作。
cnpm install -g babel-cli 安装Babel
cnpm install --save-dev babel-preset-es2015 babel-cli 安装babel-preset-es2015(安装成功后,可以看一下我们的package.json文件,已经多了devDependencies选项)
在根目录下新建文件.babelrc文件,文件内容如下:
1 2 3 4 5 6 | { "presets" :[ "es2015" ], "plugins" :[] } |
③ babel src/index.js -o dist/index.js 转换命令
④每次转换,都需要输入babel src/index.js -o dist/index.js的话,比较麻烦,有什么解决办法呢?打开package.json文件,修改其中的内容
{ "script":{ "build":"babel src/index.js -o dist/index.js" } }
这样,每次需要转换时,只需要命令 npm run build就可以了
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步