webpack,babel,ES6, CommonJs 之间的关系

https://www.cnblogs.com/ajianbeyourself/p/8863023.html

• webpack 是一个打包工具，根据文件之间的以来关系，将文件进行打包
• babel 将ES6转成浏览器可识别的ES5
• CommonJS 是一种规范

背景
目前大部分浏览器都不支持ES6的语法【部分支持】，例如360浏览器支持let 却不支持箭头函数
babel就承担了 翻译的工作，将ES6的写法转换为ES5的写法

webpack是遵循CommonJs 规范的，从webpack.config.js 可以看出

// module.exports 是commonJS的接口输出规范，ES6的规范是export
module.exports = {
  entry: path.join(__dirname,'index.js'),
  output: {
    path: path.join(__dianame, 'outs'),
    filename: 'index.js'
  }
}

浏览器不支持commonjs规范： https://ruanyifeng.com/blog/2015/05/commonjs-in-browser.html

commonJS规范： https://zhaoda.net/webpack-handbook/commonjs.html

关于webpack，babel，Ed6，commonJS之间的关系： https://www.cnblogs.com/ajianbeyourself/p/8863023.html

浏览器加载CommonJs模块的原理与实现

原理

浏览器不兼容CommonJs的根本原因，在于缺少四个Node.js环境的变量

• module
• exports
• require
• global

前端工程化

概念

1. 持续集成：【CI】continuous integration

强调开发人员提交了新的代码之后，立刻进行构建。单元测试。

根据测试结果，我们刻印确定新代码和原有代码能否正确地集合在一起

image.png

2. 持续交付【CD】continuous delivery

在持续集成的基础上，将集成后的代码部署到预发布环境（更贴近真实的运行环境）。

比如：完成单元测试之后， 可以将代码部署到连接数据库的staging（预发布）环境中进行更多的测试。如果代码没有问题，可以继续手动部署到生产环境。

下图是CI/CD的大概工作模式：

image.png