构建工具webpack与babel使用

Babel入门

一、Bable是什么

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。下面是一个例子。

// 转码前 es6
let a = 10;
let foo = (a) => a+1;
//转码后 es5
var a = 10;
var foo = function(a){
	return a+1;
} 

上面的原始代码用了箭头函数，这个特性还没有得到广泛支持，Babel将其转为普通函数，就能在现有的JavaScript环境执行了。

二、Babel使用

1、配置文件.babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。
该文件用来设置转码规则和插件，基本格式如下。

{
    "presets": [
      "es2015",   //ES2015转码规则
      "stage-2"   //ES7不同阶段语法提案的转码规则 （共有4个阶段），选装一个
    ],
    "plugins": []
  }

注意，以下所有Babel工具和模块的使用，都必须先写好.babelrc, 安装规则

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

2、命令行转码babel-cli

Babel提供babel-cli工具，用于命令行转码。
它的安装命令如下。
$ npm install --global babel-cli
基本用法如下。

# example.js转码结果写入一个文件compiled.js
$ babel example.js -o compiled.js
# 整个目录转码
$ babel src -d lib

Nodejs项目全局环境中运行Babel作如下配置
安装
$ npm install --save-dev babel-cli
然后，改写package.json。

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

转码的时候，就执行下面的命令。
$ npm run build

3、babel-core

如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块。

安装命令如下。
$ npm install babel-core --save
然后，在项目中就可以调用babel-core。

var babel = require('babel-core');

// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }

4、babel-polyfill

Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

安装命令如下。
$ npm install --save babel-polyfill
然后，在脚本头部，加入如下一行代码。

import 'babel-polyfill';
// 或者
require('babel-polyfill');

5、在线转码

当然，你也可以选择在线转码，地址是：http://babeljs.cn/repl/。

三、前端自动化构建工具

实际上，我们可以通过前端自动化的很多工具来实现ES6的转码配置，比如，常见的grunt、gulp、Webpack等

在命令行中安装babel
npm install --save-dev babel-loader babel-core
2.安装最近的babel
npm install --save-dev babel-preset-late

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
    //文件入口
    entry: './src/app.js',
    //文件出口
    output: {
        path: __dirname + '/dist/',       //打包后的路径
        filename: 'js/[name].bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                //打包除这个文件之外的文件
                exclude: path.resolve(__dirname,"./node_modules"),
                //打包包括的文件
                include: path.resolve(__dirname, "./src"),
                options: {
                    'presets': ['latest']
                }
            }
        ]
    },
    plugins: [
        //自动生成index.html文件
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: "index.html"
        })
    ]
}

构造工具WebPack

为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

• 模块化，让我们可以把复杂的程序细化为小的文件;
• 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
• Scss，less等CSS预处理器
• …
  这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

如果实在要把二者进行比较，Webpack的处理速度更快更直接，能打包更多不同类型的文件。

开始使用Webpack

初步了解了Webpack工作方式后，我们一步步的开始学习使用Webpack。
安装

安装全局webpack

cnpm install -g webpack

安装全局webpack-cli

npm install -g webpack-cli

初始化：生成package.json文件

npm init

新建src文件夹：文件名不能修改

新建index.html文件，注意src="./dist/main.js，不能修改

目录结构如下：

webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack --mode development或者webpack --mode production，这样便会默认进行打包，入口文件是’./src/index.js’，输出路径是’./dist/main.js’，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。

因此我们不再按webpack 文件a 文件b的方式运行webpack指令，而是直接运行

webpack --mode development
webpack --mode production

这样便能够实现将’./src/index.js’打包成’./dist/main.js’。

不过每次都要输入这个命令，非常麻烦，我们在package.json中scripts中加入两个成员：

"dev":"webpack --mode development",
"build":"webpack --mode production"

{
  "name": "webpack_d1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.0",
    "autoprefixer": "^9.4.3",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^2.0.1",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.28.0",
    "webpack-cli": "^3.1.2"
  }
}

执行
webpack --mode development
执行
npm run dev //相当于执行webpack --mode development

webpack中如何使用babel

目前，ES6（ES2015）这样的语法已经得到很大规模的应用，它具有更加简洁、功能更加强大的特点，实际项目中很可能会使用采用了ES6语法的模块，但浏览器对于ES6语法的支持并不完善。为了实现兼容，就需要使用转换工具对ES6语法转换为ES5语法，babel就是最常用的一个工具。那么在webpack中如何使用babel呢？这是本篇文章要探讨的问题。

1. 安装babel-loader、babel-core、babel-preset-env

Install webpack 4.x | babel-loader 8.x | babel 7.x
npm install -D babel-loader @babel/core @babel/preset-env webpack
webpack 4.x | babel-loader 7.x | babel 6.x
npm install -D babel-loader@7 babel-core babel-preset-env webpack

2、建立并配置webpack.config.js文件

仅有上面仍然不能起作用，虽然上面已经配置好babel的规则，但webpack仍然不知道何时使用该规则，这便需要使用webpack.config.js文件。
　
这个文件的作用是对webpack打包的参数进行配置。我的第一篇关于webpack4.x的文章《webpack4.x开发环境配置》中已经提到，webpack4.x中webpack.config.js这样的配置文件不是必须的，但事实上，如果想要进行更加个性化的打包配置，仍然要使用该文件。在根目录下新建webpack.config.js文件，在其中输入：

module.exports={
    module:{
        rules:[
            {
                test: /\.js$/,
                 exclude: /node_modules/, 
                 loader: "babel-loader"
            }
        ]
    }

}

这就告诉webpack打包时，一旦匹配到.js文件就使用babel-loader进行处理，如前文所述，babel-loader调用babel-core的api使用bable-preset-env的规则进行转码。这里并没有使用entry、output这样的参数，这是webpack4.x有默认的入口和出口，本项目无须改变，因此便不必进行设置

webpack使用css-loader

如果我们在打包的入口js文件中import了css文件，并且想要把css文件作为

1.安装

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

npm install autoprefixer --save-dev

2.配置
在webpack.config.js中的module加入一个新的规则，如下

module: {
        rules: [
            {
                test: /\.js$/,
                exclude: path.resolve(__dirname,'/node_modules/'),
                include: path.resolve(__dirname,'/src/'),
                loader: "babel-loader",
                options: {
                    presets: ["es2015"]
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {importLoaders: 1}
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins:(loader)=>[
                                require('autoprefixer')({
                                    browsers:['last 5 versions']
                                })
                            ]
                        }
                    }
                ]
            }
        ]
    }

第一条规则是用来解析es6的。第二条规则就是我们用来处理css文件的，其中如果用到了多个加载器，可以用use数组的方式。数组的每个对象对应一个加载器。每个加载器如要设置参数的话加上关键字options.

示例

接下来，在app文件夹里创建一个名字为"main.css"的文件，对一些元素设置样式

/* main.css */
html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, ul {
  margin: 0;
  padding: 0;
}

我们这里例子中用到的webpack只有单一的入口，其它的模块需要通过 import, require, url等与入口文件建立其关联，为了让webpack能找到”main.css“文件，我们把它导入”main.js “中，如下

//main.js 
import '../app/main.css';//使用require导入css文件

const greeter = require('../app/Greeter.js');
document.querySelector("#root").appendChild(greeter());

通常情况下，css会和js打包到同一个文件中，并不会打包为一个单独的css文件，不过通过合适的配置webpack也可以把css打包为单独的文件的。

CSS 模块化

在过去的一些年里，JavaScript通过一些新的语言特性，更好的工具以及更好的实践方法（比如说模块化）发展得非常迅速。模块使得开发者把复杂的代码转化为小的，干净的，依赖声明明确的单元，配合优化工具，依赖管理和加载管理可以自动完成。
不过前端的另外一部分，CSS发展就相对慢一些，大多的样式表却依旧巨大且充满了全局类名，维护和修改都非常困难。
被称为CSS modules的技术意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack对CSS模块化提供了非常好的支持，只需要在CSS loader中进行简单配置即可，然后就可以直接把CSS的类名传递到组件的代码中，这样做有效避免了全局污染。具体的代码如下

module.exports = {

    ...

    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定启用css modules
                            localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                        }
                    }
                ]
            }
        ]
    }
};

我们在app文件夹下创建一个Greeter.css文件来进行一下测试

/* Greeter.css */
.root {
  background-color: #eee;
  padding: 10px;
  border: 3px solid #ccc;
}

导入.root到Greeter.js中

import React, {Component} from 'react';
import config from './config.json';
import styles from './Greeter.css';//导入

class Greeter extends Component{
  render() {
    return (
      <div className={styles.root}> //使用cssModule添加类名的方法
        {config.greetText}
      </div>
    );
  }
}

export default Greeter
放心使用把，相同的类名也不会造成不同组件之间的污染。

应用了css module后的样式
CSS modules 也是一个很大的主题，有兴趣的话可以去其官方文档了解更多。