babel和webpack的一些配置

前端工程化介绍

在传统的前端开发中，并没有模块化的开发规范，传统开发面临两个问题：
1、多个js文件存在多个重名的变量存在变量覆盖问题；
2、js文件之间无法实现相互的引用；
通过模块化可以解决上述问题，就是把单独的一个功能封装到一个模块中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。
浏览器端模块化规范：AMD和CMD
服务器端模块化规范：
CommonJS
模块分为单文件模块与包
模块成员导出：module.exports和exports
模块成员导入：require(‘模块名’)

后来出现ES6模块化，解决了浏览器端和服务器端不通用的问题，使得浏览器和服务器模块化规范统一起来
ES6模块化规范定义：

1. 每个js文件都是一个独立的模块
2. 导入模块化成员使用import关键字
3. 暴露模块化成员使用export关键字

babel的配置

由于node.js对ES6的模块化支持不是很好，需要通过babel来处理高级的具有兼容性的ES6语法，转换为低级的没有兼容性的代码，例如可以将ES6的promise语法

安装步骤：

 1. npm install  --save-dev @babel/core  @babel/cli @babel/preset-env @babel/node
 2. npm install --save @babel/polyfill
 3. 项目根目录创建文件 babel.config.js
 4. 添加babel.config.js文件内容代码，对于浏览器的支持
 5. 通过npx babel-node index.js 执行代码 

const presets = [
	["@babel/env",{
		targets:{
			edge:"17",
			firefox:"60",
			chrome:"67",
			safari:"11.1"		
		}
	}]
];
module.exports = { presets };

配置完成后，再来说说ES6模块化的基本语法

1. 默认导出和默认导入

导出语法 export default 默认导出成员
export default只能运行唯一的，不能重复出现多次

//文件名为comm.js
let a = 10
let b = 20
function chani(){}
export default {
	//导出a，b和chani函数
	a,
	b,
	chani
}

默认导入语法 import 接受名称 from ‘模块名’

//导入模块成员
import comm from './comm.js'
console.log(comm)

2. 按需导入和导出
   在每个模块中可以多次使用按需导出

按需导出 export var unum = 10
按需导入 import { unum } from '模块名'
//给导出的unum起别名o1进行按需导出
按需导入 import { unum as o1 } from '模块名'

3. 直接导入并执行模块代码
   只是执行文件中的代码，不需要得到模块中向外暴露的成员

文件名 user.js
for(let i = 0; i < 10; i++){
	console.log(i)
}

//直接导入并执行代码模块
import './user.js'

在项目中安装和配置webpack

1、运行npm install webpack webpack-cli -d 命令，安装webpack相关的包文件
2、在项目的根目录中创建名为webpack.config.js 的webpack配置文件
3、在webpack的配置文件webpack.config.js中，初始化基本配置：
module.exports={
	mode:'development'  //mode用来指定构建模式，development开发模式，转换代码不会进行压缩，production代码进行压缩
	}
4、在package.json 配置文件中的script节点下，新增dev脚本：
	"scripts":{
		"dev":"webpack" //script节点下的脚本，可以通过npm run 执行
	}
5、在终端中执行npm run dev，启动webpack进行项目打包

如何自定义指定打包的入口和出口文件
webpack打包的入口文件为src的index.js
输出文件为dist的main.js
如果修改打包的入口与出口，在webpack.config.js中新增配置：

const path = require('path')//导入node.js专门操作路径的模块
module.exports = {
	//打包入口文件的路径
	entry:path.join(__dirname,'./src/index.js'),
	output:{
		//输出文件的存放路径
		path:path.join(__dirname,'./dist'),
		//输出文件的名称
		filename:'newIndex.js'
	}
}

webpack自动打包

1. 在webpack.config.js中添加 watch: true 配置，打包一次之后每次代码更新后都会自动进行打包而无需重复输入命令行

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch"
}

2. 也可以直接给package.json中的scripts添加相关配置，而无需更改

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch"
}

3. Webpack还提供了一个比watch更方便的功能，它不仅可以实现自动打包，还具有自动打开浏览器和自动刷新页面的功能

1、安装webpack-dev-server
npm i -D webpack-dev-server
2、package.json中的scripts添加相关配置
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    //--open 就代表打开默认浏览器
    "dev": "webpack-dev-server --open"
}