babel

安装babel-cli

npm install -g babel-cli
npm install babel-cli --save-dev

babel只是一个转换工具,他支持很多规则

安装es6转es5的规则

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

然后在项目中npm init创建package.json

作用是展示项目依赖,npm install会根据这个配置文件安装配置文件
package-lock.json是node-modules跟package.json生成的文件,作用是确定当前依赖模块的版本,下次npm install时会忽略模块的更新,只安装相应的版本

根据知乎关于package-lock.json的回答有

1. npm 5.0.x版本只会根据package-lock.json去下载文件;不理会package.json的更新与否
2. 基于npm 5.0.x的问题,npm 5.1.x以后版本会无视package-lock.json文件去下载最新的包
3. 基于以上两个版本,npm 5.4.x以后版本,会先比较package-lock.json跟package.json两个文件,如果不一样,会根据package.json的版本下载包,并将变化更新到lock文件

使用babel命令编译代码

babel es6/test.js --out-file js/test.js --presets es2015
// 或者
babel es6 --out-dir --presets es2015

为了不每次都执行babel命令,将命令写入package.json的script里面

{
 ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "compile": "babel es6 --out-dir js --presets es2015"
  },
 ...
}

编译时执行

npm run compile

安装polyfill环境垫片(babel只转换句法,不转换API如set、map、promise等)

npm install babel-polyfill --save-dev

然后在es6文件头部引入

import "babel-polyfill"

或者使用javascript标签src引入

<script src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>

import语法会转换成require;模块化浏览器还是不支持,需要webpack或者browserify

搭建本地服务器

因为babel只是一个转换的工具,需要与搭建本地服务器的工具配合使用
使用webpack-dev-server依赖webpack,需要安装babel-loader转化es6 webpack笔记
使用browser-sync或者gulp-connect依赖gulp,需要安装gulp-babel转换es6 gulp + babel 搭建es6环境笔记

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/imcrazysnail/article/details/80321092
文章标签: babel es6
想对作者说点什么? 我来说一句

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

关闭
关闭
关闭