ES6各种环境搭建

1.babel将ES6语法解析成ES5，ES4等浏览器可识别的语法。

 执行 #babel  index.js　//将文件的es6语法解析成es5

.babelrc内容　

 

 

 2.webpack可用于ES6语法的模块化处理（import，export等文件存在单层或多层次引用关系的语法）

 webpack.config.js配置如下

#npm start　　//webpack打包生成bundle.js文件

接下来，在根目录下创建index.html文件并引入bundle.js文件，并通过如下命令启动服务，即可访问index.html

# http-server -p 8881 

 

3.rollup打包环境搭建

说明：webpack更适合打包组件库、应用程序之类的应用，而rollup更适合打包纯js的类库。

rollup打包出来的体积都比webpack略小一些，通过查看打包出来的代码，webpack打包出来的文件里面有很多__webpack_require__工具函数的定义，可读性也很差，而rollup打包出来的js会简单一点。

还有babel-core

rollup的.babelrc配置

 

 

 

 

webpack和rollup区别

rollup：用户少，功能单一，只打包JS模块化，但是入手简单，可集成可扩展。

webpwack：使用群体广泛，功能强大，但学习成本高。

参考书目：设计原则和《Linux/Unix设计思想》的单一职责原则。