6.13 webpack全局变量，Library与几种定义+externals，SPA多级路由，http-server，PWA技术，typeScript配置，node端res.json只支持json格

1、webpack的全局变量

首先可以对webpack.common.js进行改造，根据全局变量merge，webpack.dev.js和webpack.prod.js、
从而精简命令行代码

  "scripts": {
    "dev-build": "webpack --config ./build/webpack.common.js",
    "dev": "webpack-dev-server --config ./build/webpack.common.js",
    "build": "webpack --env.production --config ./build/webpack.common.js" // 注入全局变量 --env.production
  },

2、webpack的library

如果是开发第三方库，需要依从使用者的声明。
通常有几下几种：

// ESmodule
import library from 'library'
// commonJs
const library = require('library')
// AMD
require(['library', function () {
}])

// 或者标签注入方式，并想全局使用library
<script src="library.js"><script>
library.math

webpack配置如下：

// 前三者需要配置 libraryTarget
// script注入方式需要配置 library
const path = require('path')

module.exports = {
	mode: 'production',
	entry: path.resolve(__dirname, 'src/index.js'),
	output: {
		filename: 'library.js',
		path: path.resolve(__dirname, 'dist/'),
		library: 'library', // 全局注入library变量
		libraryTarget: 'umd' // 注入的目标,umd是通用规范
	}
}

未注入libary: ‘library’，console.log

再看library: ‘library’ ，（指的是用户script标签注入时）
全局注入变量’library’，libraryTarget:'umd’方式引入，并控制台console.log，结果：

‘umd’: universal module definition 通用模块定义

或者这么配置：（让library对象直接挂到this上）（也可以window上）

通常libraryTarget: 'umd’即可

注： 通常写库，两者配合使用

library: 'library',
libraryTarget: 'umd'

避免用户与库的相同模块2次打包。
需要借助externals，定义外部需要引入的模块。

// 精细配置
externals: {
	lodash: {
		commonjs: 'lodash' // 以commonjs规范引入，用户必须将模块命名为lodash
	}
}
// 通常配置
externals: ['lodash'] // 无论规范，都必须命名为lodash

最后要想用户正常使用。需要在package.json中

  "main": "./dist/library.js", // 配置入口文件

4、SPA多级路由

一图足以，主义斜杠。
以及多极路由重定向： 1、要么从根路由，一级级开始。 2、要么从当前父路由开始 detail/info 二级->三级

5、npm i http-server -D (兼容性差）
启动服务器本地模拟。

// 在package.json中
"scripts": {
  "start": "http-server dist"
}

6、PWA技术

线上代码部署后，可能服务器页面挂掉了，用户页面也会挂掉。那么为了防止用户刷新仍不会挂，就采取PWA技术让用户去读取本地的缓存，增强用户体验。

先安装cnpm i workbox-webpack-plugin -D

// webpack.config.js
const WorkboxPlugin = require('workbox-webpack-plugin')
// 配置项
	plugins: [
		new WorkboxPlugin.GenerateSW({
			clientsClaim: true,
			skipWaitting: true
		}) // SW: ServiceWorker
	],
// index.js中

console.log('hello, this is shouer')

// 启动PWA技术
// 查看方法里是否有serviceWorker
if ('serviceWorker' in navigator) {
	window.addEventListener('load', () => {
		navigator.serviceWorker.register('/service-work.js')
			.then(registration => {
				console.log('service-worker registed')
			}).catch(error => {
				console.log('service-worker register error')
			})
	})
}

7、对于typeScript，webpack的简单配置
typeScript支持js语法，也是js语法的超集扩展，有自动检测特性，校验参数提示。
cnpm i ts-loader typescript -D // 安装loader和ts语法

在webpack.config.js中配置use: ts-loader

// 在根目录下创建ts-loader的配置文件 tsconfig.json
{
	"compilerOptions" : {
		"outDir": "./dist",
		"module": "es6", // tsx文件内使用的语法
		"target": "es5", // 打包成es5代码
		"allowJs": true // 允许你引入js的文件
	}
}

tsx可以用于第三方插件的提示语法问题，但需要安装对应的类型文件。
比如 @types/vue @types/jquery @types/lodash
cnpm i @types/lodash --save-dev // 可以识别对应的lodash函数对应的哪些参数，用于提示
那如何知道需要哪些@types/ 类型文件呢

https://microsoft.github.io/TypeSearch/

8、在nodejs端启动接口服务，res.json(/* 必须是json格式的对象 */)
不然会抛出400异常