webpack es6 npm包_大前端进阶之Babel、模块化、webpack

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 .srcexample.js --out-file .dist1dist.js

自定义脚本

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

"scripts": {   "build": "babel .srcexample.js --out-file .distdist.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文件。