commonjs转换原生HTML,webpack,babel,ES6, CommonJs 之间的关系

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模块的原理与实现

原理

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

module

exports

require

global

前端工程化

概念

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

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

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

image.png

持续交付【CD】continuous delivery

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

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

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

image.png