babel环境的搭建

1). 安装babel:cnpm i babel-cli  -g

2). npm init

3). cnpm i babel-cli -D

4). cnpm i babel-preset-es2015 -D(es6的预设)

5). cnpm i babel-preset-react -D

6). css-loader加载css文件

7). style-loader将加载的css文件加入页面中(二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中)

8). sass-loader把scss处理成css

(webpack的用处 编译css,js)

babel:

1. babel src -d prd prd可以实现把src中的js编译放到prd文件夹(编译的语句可以放到package.json文件中添加一个build,在用npm run build,这个build可以自己命名)

2. babel src  -w -d prd可以实现自动检测编译

3.    创建一个.babel文件 {

"presets":["es2015","react"]

}

注意:如果在运行过程中遇到 Cannot find module 'readdirp'这种错误就是安装的有问题,可以重新安装,也可以针对缺少的部分单独安装(单独安装的语法,cnpm i 缺少的组件),

解析Es6的babel-preset-es2015包

解析JSX的babel-preset-react包

babel用于把ES6编译成ES5

react用的是虚拟dom

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容