前端开发环境 & 构建工具

1.babel —— 语法转换工具

Babel 通过语法转换器支持最新版本的 JavaScript 。 这些插件允许你立刻使用新语法，无需等待浏览器支持。
- 安装 node 环境，运行 npm init，创建 package.json 文件
- 安装 babel 相关库：npm install –save-dev babel-core babel-preset-es2015
- 创建 .babelrc 文件，并进行配置
- 全局安装 babel-cli：npm install -g babel-cli

2. Webpack —— 模块化构建工具

• npm install webpack babel-loader –save-dev
• 配置 webpack.config.js
• 配置 package.json 中的 scripts
• 运行 npm start

3. Rollup —— 打包工具

• npm init
• 安装 rollup 及 babel 相关库：npm i rollup roll-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-preset-latest –save-dev
• 配置 .babelrc
• 配置 rollup.config.js
• 配置 package.json 中的 scripts

Webpack & rollup 对比

• rollup 功能单一，webpack功能强大（但学习成本更高）
• webpack：拆分代码，按需加载
• rollup：一次性加载