小白学前端——Babel、模块化与webpack

小白学前端——Babel、模块化与webpack

Babel

1.什么是Babel?

官网上说了，Babel就是一个转码工具，能够将不同版本不同格式的js进行相互转换，用到后面的模块化方面的用途就是，能够将一些浏览器不支持的ES6转换成浏览器支持的ES5版本。

2.如何下载Babel？

通过命令行的方式即可，前提是要下载node.js和npm
命令行输入： npm install --global babel-cli
下载完之后输入： babel --version 检测版本

C:\Users\Administrator>npm install --global babel-cli
npm WARN deprecated chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
F:\softwares\node.js\node_global\babel -> F:\softwares\node.js\node_global\node_modules\babel-cli\bin\babel.js
F:\softwares\node.js\node_global\babel-node -> F:\softwares\node.js\node_global\node_modules\babel-cli\bin\babel-node.js
F:\softwares\node.js\node_global\babel-doctor -> F:\softwares\node.js\node_global\node_modules\babel-cli\bin\babel-doctor.js
F:\softwares\node.js\node_global\babel-external-helpers -> F:\softwares\node.js\node_global\node_modules\babel-cli\bin\babel-external-helpers.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\babel-cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ babel-cli@6.26.0
updated 1 package in 14.146s

C:\Users\Administrator>babel --version
6.26.0 (babel-core 6.26.3)

3.下载转码器

全局安装了Babel之后，并不能马上使用，必须下载转码器。
为了后面的模块化，先用npm创建一个项目
创建目录: babel 打开命令行进入项目根目录，输入 npm init -y 创建一个默认的工程

然后下载转码器，控制台输入: npm install --save-dev babel-preset-es2015
然后看一下package.json配置文件

{
  "name": "Babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1"
  }
}

可以发现babel的依赖已经下载好了

4.编写配置文件

写一个配置文件再根目录： .babelrc (名字一模一样)
内容：

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

最终项目目录如图所示（多余的目录是后面创建的）

5.转码命令

两个：

1. babel 源文件名 -o 目标文件名 （转换单个文件）
2. babel 源文件夹名 -d 目标文件夹名 （转换整个文件夹）
   不做演示，后面将用到

模块化

什么是模块化?

先来看看后端的模块化：
后端的模块化就是开发controller、service、mapper时，controller注入service,service注入mapper，
再来看看前端的模块化：
模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。

前端的模块化主要有2种方式。ES5传统方式和ES6方式

ES5方式

1.编写两个js文件，一个js调用另一个js的函数
01.js

//创建方法
const sum = function(a,b){
    return parseInt(a) + parseInt(b);
};

const substract = function(a,b){
    return parseInt(a) - parseInt(b);
};

//设置哪些方法可以被调用
module.exports = {
    sum,
    substract
}

02.js

//调用方法

const m = require("./01.js")

//调用
const sum = m.sum(1,2);
const substract = m.substract(1,2);
console.log(sum)
console.log(substract);

2.进入终端，执行命令 node es5/02.js

PS G:\workspaces\vscode\work\webpack> cd ..
PS G:\workspaces\vscode\work> cd module
PS G:\workspaces\vscode\work\module> node es5/02.js
3
-1

ES6方式

相对于传统的ES5方式实现模块化，ES6显然更简单一些，但是由于node.js不支持ES6，所以需要使用Babel工具进行转换操作。
ES6方式实现模块化有2种方式

第一种方式

1.编写2个js文件
02.js

//定义方法：设置哪些方法可以被调用

export function getList() {
    console.log('getList...')
}

export function save(data){
    console.log(data);
}

02.js

//调用函数
//引入js文件
import { getList,save } from './01.js'

getList();

save('hello node.js');

2.使用Babel工具转码
控制台输入： babel es6 -d es5

G:\workspaces\vscode\work\Babel>babel es6 -d es5
es6\01.js -> es5\01.js
es6\02.js -> es5\02.js

可以看到es6文件被转化成es5文件并放在es5文件夹下

打开文件看一下

3.执行一下

G:\workspaces\vscode\work\Babel>node es5/02.js
getList...
hello node.js

第二种方式

1.写两个js
01.js

export default {
    print() {
        console.log("hello world")
    },
    updata(){
        console.log("my god");
    }
}

02.js

import m from './01.js'

m.print();
m.updata();

其实本质上就是将允许调用的函数放进export default里面，调用的时候用m代替所有允许被调用的函数

2.使用Babel转换
还是控制台输入： babel es601 -d es501
3.打开转换后的02.js

'use strict';

var _ = require('./01.js');

var _2 = _interopRequireDefault(_);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

_2.default.print();
_2.default.updata();

可以发现ES6中特有的语法都被转换成了传统的语法
4.不妨执行一下

G:\workspaces\vscode\work\Babel>node es501/02.js
hello world
my god

webpack

什么是webpack?

打开官网，大字显示： 打包所有的脚本


懂了，就是将多个js文件打包成一个js文件，可以减少页面请求次数（只需请求一次）

如何下载安装？

同样还是使用npm下载的方式：
命令行输入： npm install -g webpack webpack-cli
一次性将webpack webpack的命令行工具全部全局安装。

下载完之后版本测试：

G:\workspaces\vscode\work\Babel>webpack -v
4.43.0

G:\workspaces\vscode\work\Babel>webpack-cli -v
3.3.11

G:\workspaces\vscode\work\Babel>

打包js文件

既然是打包工具，那肯定可以打包前端的文件吧。

小白写了一个测试打包js案例

第零步：创建项目

命令行输入： npm init -y

第一步：写两个js文件

common.js

exports.info = function(str){
    document.write(str);//在浏览器中输出
};

utils.js

exports.add = function(a,b){
    return a+b;
}

第二步：写启动js文件

main.js

const common = require('./common');
const utils = require('./utils');

common.info('hello common' + utils.add(1,2));

第三步：写配置文件

在根目录写 webpack.config.js (一模一样)

const path = require('path');//node.js 内置模块

module.exports = {
    entry: './src/main.js',//配置入口文件
    output: {
        path: path.resolve(__dirname,'./dist'),
        filename: 'bundle.js'//输出文件
    }
}

第四步：执行webpack命令

有2个命令：
webpack （有黄色警告，因为没有指定环境）
webpack --mode=development （无警告，开发环境）

输入第2个命令，可以看到文件夹dist下有bundle.js

打包css文件

1.前面几步已经被完成了，直接写一个css文件测试一下
style.css

body {
    background-color: red;
}

2.然后将css文件引入到main.js

const common = require('./common');
const utils = require('./utils');

//引入css样式
require('./style.css')

common.info('hello common' + utils.add(1,2));

3.在webpack配置文件下增加内容

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']
            }
        ]
    }
}

4.执行打包命令
命令行输入; webpack --mode=development

G:\workspaces\vscode\work\webpack>webpack --mode=development
Hash: 96ce1122bb3f8afa9da2
Version: webpack 4.43.0
Time: 367ms
Built at: 2020-05-13 11:09:03
    Asset      Size  Chunks             Chunk Names
bundle.js  16.8 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./node_modules/css-loader/dist/cjs.js!./src/style.css] 273 bytes {main} [built]
[./src/common.js] 82 bytes {main} [built]
[./src/main.js] 164 bytes {main} [built]
[./src/style.css] 519 bytes {main} [built]
[./src/utils.js] 48 bytes {main} [built]
    + 2 hidden modules

5.打开文件看一下

6.最后写一个html文件执行一下
demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./dist/bundle.js"></script>

</head>
<body>
    
</body>
</html>

亮瞎眼！