Babel

什么是Babel？

很多ES6高级语法浏览器是不支持的，Node.js也不一定能够运行，这时就需要使用转码器了。

Babel是一个使用非常广泛的转码器，它可以将ES6语法代码转换为ES5语法代码，实现了语法的自动转换。

安装Babel

1、使用npm安装babel-cli工具。

npm install -g babel-cli #安装babel-cli

2、安装完毕后查看babel版本进行测试。

babel --version # 查看babel版本
6.26.0 (babel-core 6.26.3)

测试使用

1、创建babel目录，再在该目录下创建src目录（以后我们的js代码都应该放在src目录下），在src目录下编写js源代码。

2、编写.babelrc配置文件，注意这里的"es2015"指的就是ES6语法。

{
    "presets":[
        "es2015"    
    ],
    "plugins":[]
}

3、安装babel依赖。

npm install -D babel-preset-es2015

4、转码输出测试。将src目录下的example.js转码输出到dist1目录下的dist.js中。

babel .\src\example.js --out-file .\dist1\dist.js

自定义脚本

我们可以在package.json文件中配置一些自定义脚本，以后只需要在终端中执行npm run xxx命令即可执行指定的脚本。例如将我们的babel转码命令配置成自定义脚本，配置代码如下：

"scripts": {
   "build": "babel .\\src\\example.js --out-file .\\dist\\dist.js"
 }

使用npm run build可以执行该脚本。 这里可以编写多个脚本，这样以后执行一些操作就不需要每次都输入那么长的命令了。 诸如npm run test、npm run start这种命令本质上就是一段自定义脚本，以后看到类似的启动方式，只要去找它的scripts脚本就好了。

模块化

随着互联网的发展，许多网站也一步步的互联网化了，这使得项目中的js代码也越来越多了，变得十分复杂。

我们都知道Java中可以在一个类中使用import关键字导入其他类进行调用，这样很好的实现了模块化开发。那么js是否也可以进行模块化开发呢？于是js也开始慢慢向模块化开发方向发展，后来产生了两种模块化规范：CommonJS规范和ES6模块化规范

CommonJS规范

CommonJS模块的特点如下：

• 所有代码都运行在模块作用域，不会污染全局作用域。
• 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
• 模块加载的顺序和其在代码中出现的顺序一致。

如下代码,在导出四则运算.js文件中定义了一些四则运算的函数，我们使用CommonJS规范来将其导出。

const sum=function (a,b){
    return a+b
}
?
const sub=function (a,b){
    return a-b
}
?
const mul=function (a,b){
    return a*b
}
?
const div=function (a,b){
    return a/b
}
?
//导出这些方法供他人使用
// module.exports={
//     sum:sum,
//     sub:sub,
//     mul:mul,
//     div:div
// }
?
//如果导出名称和方法名相同，可以简写
module.exports={
    sum,
    sub,
    mul,
    div
}

在同一目录下创建引入测试.js文件，编写导入测试代码如下：

const m=require('./导出四则运算')
console.log(m)
//测试方法，正常输出
const r1=m.sum(1,1)
const r2=m.sub(1,2)
?
console.log(r1)
console.log(r2)

ES6模块化规范

ES6在语言标准上实现了模块功能，设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系（CommonJS只能在运行时确定），以及输入输出变量。ES6的模块并不是对象，而是通过export显示指定输出的代码，再通过import命令导入。

第一种写法

如下代码，在userApi.js文件中使用ES6模块化规范导出两个方法。

export function getList(){
    console.log('获取用户列表')
}
?
export function save(){
    console.log('保存用户信息')
}

在userComponent.js文件中编写导入测试代码如下：

//import node不支持，需要使用babel进行转码后运行
import {getList,save} from './userApi'
?
getList();
save();

第二种写法

如下代码，在userApi2.js文件中使用ES6模块化规范导出两个方法。

export default{
    getList(){
        console.log("获取数据列表")
    },
    save(){
        console.log("保存数据列表")
    }
}

在userComponent2.js文件中编写导入测试代码如下：

import user from './userApi2'
?
user.getList()
user.save()

注意：Node.js不支持ES6模块化语法，因此需要使用babel进行转码再运行，上述两种写法都是如此。

webpack

什么是webpack？

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

简单来说就是一个前端资源打包工具，它可以把js、less、css、png等文件通通打成一个或多个js文件。这样做的好处是可以让我们的代码不那么繁琐，实现代码的复用。

webpack安装

1、使用npm安装webpack-cli工具。

npm install -g webpack webpack-cli

2、安装完毕后查看webpack版本进行测试。

webpack -v

测试使用

1、创建webpack目录并初始化项目npm init

2、在webpack目录下创建src目录，编写js代码。

3、webpack打包。

webpack --mode=development

4、如果要打包css文件，需要先安装css-loader。除js以外的其他类型文件都需要安装相应的loader，并且需要配置对应的打包规则，详细配置规则可以查阅官网。

npm install --save-dev style-loader css-loader

然后在webpack.config.js文件中配置css打包映射规则。

const path=require('path')  //Node.js的内置模块
?
module.exports={
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'./dist'), //输出路径
        filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/, //打包规则映射到css结尾的文件上
                use:['style-loader','css-loader']
            }
        ]
    }
}

什么是loader？

loader用于对模块的源代码进行转换。loader可以使你在import或"加载"模块时预处理文件。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或将内联图像转换为data URL。loader甚至允许你直接在JavaScript模块中import CSS文件。