webpack 深入浅出分析之打包 JS、ES6 和 Typescript

一、webpack 打包 JS 文件

通过 npm install webpack 命令可以下载 webpack，通过 npm install webpack-cli -g 命令下载 webpack-cli。
创建一个空文件，在里面创建 sum.js 文件，采用ES6 module 的规范，进行求和，代码如下所示：

export default function (a, b) {return a + b
}

在里面创建 minus.js 文件，采用 CommonJS 的规范，进行求差，代码如下所示：

module.exports = function (a, b) {return a - b
}

在里面创建 muti.js 文件，采用 AMD 的规范，进行求积，代码如下所示：

define(function (require, factory) {'use strict';return function(a, b) {return a * b}
})

在里面创建 app.js 文件，分别进行引入并且打印，代码如下所示：

// es module
import sum from './sum'// commonJS
var minus = require('./minus')console.log('sum(12, 24) =', sum(12, 24))
console.log('minus(30, 24) =', minus(30, 24))// amd
require(['muti'], function (muti) {console.log('muti(4, 8) =', muti(4, 8))
})

在里面创建 index.html 文件，创建 webpack.config.js 文件，使用 commonJS 规范，配置 entry 入口文件和 output 出口文件，代码如下所示：

module.exports = {entry: {app: '/app.js'},output: {filename: '[name].[hash:5].js'}
}

通过 webpack --config webpack.conf.js 可以进行打包 JS 文件。如果是需要对于某一个单独的 JS文件打包，可以使用 webpack entry<entry> output命令，第一个参数是入口文件，第二个参数是出口文件。

二、webpack 打包 ES6 文件

创建一个空文件，通过 npm init 命令创建一个 package.json 文件，在里面创建一个 app.js 文件，代码如下所示：

import 'babel-polyfill'let func = () => {}const NUM = 40
let arr1 = [1, 2, 3]
let arr2 = arr1.map(item => item*2)console.log('new Set(arr2)=' + new Set(arr2))

创建一个 webpack.config.js 文件，使用 commonJS 规范module.exports。entry 是配置入口文件，output是配置出口文件。在 module 中，配置 rules，配置规则，里面是数组。在 rules 中，test 表示值，可以用一个正则来表示。use 表示处理使用，loader 表示使用的一些编译，可以使用babel-loader；options 表示指定的参数，presets表示预设, 指定规范的语法，可以使用 @babel/preset-env，targets 表示指定的目标，所支持运行环境的对象。exclude表示排除在规则之外，比如就是 node_modules，代码如下所示：

module.exports = {entry: {app: './app.js',common: [`babel-polyfill`]},output: {filename: '[name].[hash:8].js'},module: {rules: [{test: /\.js$/,use: {loader: 'babel-loader',options: {presets: [['@babel/preset-env', {targets: {chrome: '52'}}]]}},exclude: '/node_modules/'}]}
}

通过 webpack --config webpack.conf.js 可以进行打包 ES6 文件。
通过 npm install –save-dev babel-loader babel-core 命令下载 babel-loader，通过 npm install babel-preset-env –save-dev 或者是 npm install @babel/preset-env –save-dev命令下载 babel-preset。
babel 默认只转换新的 JavaScript 语法，不转换新的API以及一些定义在全局对象上的方法，如果想使用这些新的对象和方法，则需要为当前环境提供一个垫片polyfill。在Babel执行编译的过程中，会从项目的根目录下的 .babelrc文件中读取配置。.babelrc是一个json格式的文件。在.babelrc配置文件中，主要是对预设(presets) 和插件(plugins) 进行配置。
babel-polyfill

babel-polyfill解决了Babel不转换新API的问题，但是直接在代码中插入帮助函数，会导致污染了全局环境，并且不同的代码文件中包含重复的代码，导致编译后的代码体积变大。虽然这对于应用程序或命令行工具来说可能是好事，但如果你的代码打算发布为供其他人使用的库，或你无法完全控制代码运行的环境，则会成为问题。
polyfill包括了core-js和regenerator-runtime(转义async和await的包)，最常用的配合Babel一起使用的polyfill是babel-polyfill，通过改写全局prototype的方式实现，它会加载整个polyfill，针对编译的代码中新的API进行处理，并且在代码中插入一些帮助函数，比较适合单独运行的项目。

babel-runtime

babel-runtime插件能够将这些工具函数的代码转换成require语句，指向为对babel-runtime的引用。每当要转译一个api时都要手动加上require('babel-runtime')。简单说babel-runtime 更像是一种按需加载的实现，比如你哪里需要使用 Promise，只要在这个文件头部 require Promise from 'babel-runtime/core-js/promise'就可以。
Babel 提供了单独的包babel-runtime用以提供编译模块的工具函数，启用插件babel-plugin-transform-runtime后，Babel就会使用babel-runtime下的工具函数。

babel-plugin-transform-runtime

transform-runtime 是利用 plugin 自动识别并替换代码中的新特性，你不需要再引入，只需要装好 babel-runtime 和配好 plugin 就可以了。
方便使用 babel-runtime，解决手动 require 的苦恼。它会分析我们的 ast 中，是否有引用 babel-rumtime 中的垫片（通过映射关系），如果有，就会在当前模块顶部插入我们需要的垫片。
按需替换，检测到你需要哪个，就引入哪个 polyfill，如果只用了一部分，打包完的文件体积对比 babel-polyfill会小很多。而且transform-runtime 不会污染原生的对象，方法，也不会对其他 polyfill 产生影响。
transform-runtime的方式更适合开发工具包，库，一方面是体积够小，另一方面是用户（开发者）不会因为引用了我们的工具，包而污染了全局的原生方法，产生副作用，还是应该留给用户自己去选择。
同时transform-runtime的转换也是非侵入性的，也就是它不会污染你的原有的方法，比如挂在Array原型上的includes方法就只能使用babel-polyfill，使用场景应该是库，遇到需要转换的方法它会另起一个名字，否则会直接影响使用库的业务代码，平常的项目使用babel-polyfill即可。
babel-plugin-transform-runtime 配置选项：
- helpers:默认值为true，表示是否开启内联的babel helpers(即babel或者环境本来存在的某些对象方法函数)，如：extends，etc这样的在调用模块名字时将被替换名字。
- polyfill：默认值为true，表示是否把内置的东西(Promise, Set, Map)等转换成非全局污染的。
- regenerator：默认值为true，是否开启generator函数转换成使用regenerator runtime来避免污染全局域。
- moduleName：默认值为 babel-runtime，当调用辅助设置模块（module）名字/路径。

babel-polyfill 与 babel-runtime 的比较：

babel-polyfill 的原理是当运行环境中并没有实现的一些方法，babel-polyfill会做兼容。babel-runtime 它是将es6编译成es5去执行。我们使用es6的语法来编写，最终会通过babel-runtime编译成es5.也就是说，不管浏览器是否支持ES6，只要是ES6的语法，它都会进行转码成ES5，所以就有很多冗余的代码。
babel-polyfill 它是通过向全局对象和内置对象的prototype上添加方法来实现的。比如运行环境中不支持Array.prototype.find 方法，引入polyfill, 我们就可以使用es6方法来编写了，但是缺点就是会造成全局空间污染。babel-runtime它不会污染全局对象和内置对象的原型，比如说我们需要Promise，我们只需要import Promise from 'babel-runtime/core-js/promise'即可，这样不仅避免污染全局对象，而且可以减少不必要的代码。babel-plugin-transform-runtime 插件，可以帮助我们去避免手动引入 import的痛苦，并且它还做了公用方法的抽离，polyfill仅仅存在一份。

babel-polyfill 的安装及使用

babel-polyfill是全局垫片，为应用准备，通过 npm install babel-polyfill –save 命令就可以下载 babel-polyfill
如果想要直接在所需代码上使用，可以直接引入，代码如下所示：

import 'babel-polyfill'

如果想在 webpack 中使用，可以在 entry中添加，也可以在babel的env中设置useBuildins为true来开启，代码如下所示：

entry: {app: './app.js',common: [`babel-polyfill`,`whatwg-fetch`,`react`,`react-dom`,`redux`,`react-redux`,`js-cookie`,],
},

babel-runtime 的安装及使用

babel-runtime 是局部垫片，为开发框架准备，babel-runtime作为生产依赖（使用 --save），babel-plugin-transform-runtime 作为开发依赖（使用 --save-dev），通过 npm install --save-dev babel-plugin-transform-runtime命令下载 babel-plugin-transform-runtime ，通过 npm install --save babel-runtime 命令下载 babel-runtime

在 .babelrc 文件中使用

未包含选项，代码如下所示：

{"plugins": ["transform-runtime"]
}

包含选项，代码如下所示：

{"plugins": [
["transform-runtime", {// 辅助，表示是否开启内联的babel helpers(即babel或者环境本来的存在的垫片或者某些对象方法函数)(clasCallCheck,extends,etc)在调用模块名字(moduleName)时将被替换名字"helpers": false,
// 垫片，表示是否把内置的东西(Promise,Set,Map,tec)转换成非全局污染垫片"polyfill": false,// 重新生成，是否开启generator函数转换成使用regenerator runtime来避免污染全局域"regenerator": true,// 模块名字，当调用辅助（内置垫片）设置模块（module）名字/路径"moduleName": "babel-runtime"}]]
}

三、webpack 打包 Typescript 文件

创建一个空文件夹，通过 npm init 命令进行初始化创建 package.json 文件，通过 npm install webpack typescript ts-loader awesome-typescript-loader --save-dev 命令下载 webpack、typescript、ts-loader 和 awesome-typescript-loader。
创建 webpack.config.js 文件，entry 配置入口文件，output 配置出口文件，module 中定义对应的 rules，test 匹配 ts 文件，use 使用 ts-loader，代码如下所示：

module.exports = {entry: {'app': './src/app.ts'},output: {filename: '[name].bundle.js'},module: {rules: [{test: /\.tsx?$/,use: {loader: 'ts-loader'}}]}
}

在 tsconfig.json 文件中，compilerOptions 是编译配置选项，include 是包含，exclude 是不包含，代码如下所示：

{"compilerOptions": {"module": "commonjs","target": "ES5","allowJs": true,"typeRoots": ["./node_modules/@types"]},"include": ["./src/*"],"exclude": ["./node_modules/"]
}

在 app.ts 文件中，编写 ts 代码，代码如下所示：

import * as _ from 'lodash'console.log(_.chunk([1,2,3,4], 2))const NUM = 45interface Cat {name: String,gender: String
}function touchCat (cat: Cat) {console.log('hello', cat.name)
}touchCat({name: 'tom',gender: 'male'
})

通过 webpack --config webpack.conf.js 可以进行打包 Typescript 文件。

webpack 深入浅出分析之打包 JS、ES6 和 Typescript相关推荐

Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体（Font）文件，devsever，生产环境配置以及css的兼容写法
目录一.webpack打包JS文件 1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js 2.然后使用webpack命令打包js文件二.打包 ...
Webpack打包流程系列一：打包JS（JavaScript）文件
前情提示 webpack是什么? 简单而言,webpack是一个模块打包器.它的主要目标是将JavaScript文件打包在一起,打包后的文件用于在浏览器中使用. 使用webpack的目的当前端项目的 ...
【WebPack】WebPack的安装、使用WebPack打包 js/css/img 等文件
目录 webpack和node和npm的关系 npm install webpack -g -g是全局的意思项目中一般有两个文件夹: src,dist(distribution) WebPack的使 ...
webpack打包js/css/scss/less/styl等（可以打包图片）
Webpack 1. 什么是webpack? 打包,压缩各种静态资源的工具(css,js,图片,图标等) 2.目的性能优化减少浏览器向服务端请求的次数节约服务器的的带宽资源 3.如何使用介绍 ...
vue打包的app如何设置自动清理软件缓存_使用Webpack启动你的Vue.js应用
Webpack是开发Vue.js单页面应用(SPA)最基本的工具.通过管理负责的构建步骤能够使开发工作流非常的简单,同时也能够优化应用的大小提升应用的性能. 在这篇文章我将为大家展示Webpack是如 ...
webpack打包js文件的问题
前言这里记录下webpack打包js文件的配置和遇到的问题.因环境版本等不同,解决办法未必都是通用的,仅作为大家参考之用: 我的环境配置 macOS M1 系统 webpack版本:(全局版本)we ...
前端打包js文件的工具 webpack
前端打包js文件的工具 webpack 安装webpack工具 npm install -g webpack webpack-cli 创建js文件用于打包操作即在一个最终的js文件中引入其它的js文 ...
Webpack5:用webpack打包js文件
前提:node.js和npm已安装好 node.js和npm的安装网上教程一大堆,就不说了,建议初学者将node.js和npm装在c盘,能避免很多操作和麻烦(特指windows用户,有点想买mac了, ...
Vue3源码分析之打包原理
Vue3源码分析之打包原理如果之前你已经看过我的<Vue3源码分析之入门>,那么你可以直接阅读此篇文章 Vue3源码分析之入门一.配置环境 1. 全局安装yarn Monorepo 管 ...

webpack 深入浅出分析之打包 JS、ES6 和 Typescript

一、webpack 打包 JS 文件

二、webpack 打包 ES6 文件

三、webpack 打包 Typescript 文件

webpack 深入浅出分析之打包 JS、ES6 和 Typescript相关推荐

最新文章

热门文章