每天认识一个npm包，开源世界我闯荡！
webpack常用的Loader以及Plugins
这里主要收集一下平时在项目中或者看开源的时候,遇到的一些npm包,特此记录以下
项目优化相关
Friendly-errors-webpack-plugin
美化控制台输出的,比webpack自带的stats配置更高度定制化
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
module.exports = {
plugins: [
new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: ['You application is running here http://localhost:3000'],
notes: ['Some additional notes to be displayed upon successful compilation']
},
// 是否每次都清除控制台输出
clearConsole: true,
})
]
}
webpack-bundle-analyzer
分析打包后的资源体积,为优化提供可视化分析数据
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
mini-css-extract-plugin css提取到单独文件
- 将样式代码提取到单独的文件中, 它还提供了相应的loader,基础配置如下
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash:7].css'
})],
module: {
rules: [
{
test: /.(less|css)$/,
// 注意 该loader和style-loader不兼容,需要注意下,下面是通过isProd判断是否是生产环境
use: [isProd ? MiniCssExtractPlugin.loader : 'style-loader', "css-loader", "less-loader"],
},
],
},
};
文档地址:
optimize-css-assets-webpack-plugincss压缩
- 压缩css
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new OptimizeCSSAssetsPlugin({})
]
}
}
uglifyjs-webpack-pluginjs压缩
- 压缩js代码
- 也可开启缓存和多进程
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false
})
]
}
}
babel-loader开启缓存
{
test: /.(jsx?|babel|es6)$/,
include: process.cwd(),
exclude: "node_modules",
use: {
loader: 'babel-loader',
options: {
compact: true,
// 这个配置
cacheDirectory: true
}
}
},
terser-webpack-plugin
- 使用多进程并发运行以提高构建速度
- 删除注释
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
// 这里
parallel: true,
// 删除注释
format: {
comments: false,
},
},
extractComments: false,
})
]
}
}
hard-source-webpack-plugin
可开启缓存, 增加二次打包或者热更新速度
const HardSourcePlugin = require('hard-source-webpack-plugin');
module.exports = {
plugins: [new HardSourcePlugin()]
}
style-loader的替换方案
- 在webpack5中,资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。
// 该例子就是控制资源在一定大小内使用内联的形式
module: {
rules: [
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
parser: {
//转base64的条件
dataUrlCondition: {
maxSize: 10 * 1024, // 10kb
},
},
generator: {
filename: "static/[name].[contenthash:7][ext]",
},
},
]
}
thread-loader
- 多进程程处理loader
- 使用时，需将此 loader 放置在其他 loader 之前。放置在此 loader 之后的 loader 会在一个独立的 worker 池中运行。
- 请仅在耗时的操作中使用此 loader！
module.exports = {
module: {
rules: [
{
test: /.js$/,
include: path.resolve('src'),
use: [
"thread-loader",
// 耗时的 loader （例如 babel-loader）
],
},
],
},
};
happypack
- 启动多进程来优化构建速度,但是作者不维护了,替换方案请使用
thread-loader
@babel/polyfill 按需引入
详情见 目录babel相关的@babel/polyfill 按需引入
babel相关的
babel-plugin-add-module-exports
如果希望对它的转码符合 commonJS，就需要安装 babel-plugin-add-module-exports插件,并在.babelrc 文件内声明该插件。
在 babel5 时代， export default {} 除了会被转译成 exports.default = {}，还会加一句 module.exports = exports.default，这是为了兼顾commonJS规范。但在 babel6 时代，后面一句不再添加，这是为了区分commonJS和ES6的模块定义。
k
babel-plugin-module-resolver
是一个Babel模块解析插件, 在.babelrc中可以配置模块的导入搜索路径
简单的来说就跟webpack的resolve.alias配置很相似.举例:
// .bablerc文件内
{
"plugins": [
["module-resolver", {
"root": ["./"],
"alias": {
"P":"./app/p"
}
}]
]
}
如上配置后,在项目里面如果有如下路径都会被解析成配置项里面的alias对应的路径
//import Mp from '../../p/MyPropTypes';
import Mp from 'P/MyPropTypes'
import MyUtilFn from 'utils/MyUtilFn';
//import MyUtilFn from '../../../../utils/MyUtilFn';
babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props
这几个是配置项目支持jsx语法的,主要是针对vue项目的,react的话需要安装@babel/preset-react,直接安装使用就行,不需要额外配置
@babel/polyfill 按需引入
项目中如果想使用新语法,并使浏览器兼容的话,就需要安装@babel/polyfill, 正常是在入口文件中直接import'@babel/polyfill'引入,但打包你会发现有个core-js体积很大,是因为直接医用,会把@babel/polyfill全量引入并打包了,所以优化点就是要按需引入
// .babelrc 文件中
{
"presets": [
[
"@babel/preset-env",
// 通过babel的预设插件来进行配置, core对应的版本
{ "modules": false, "useBuiltIns": "usage", "corejs": 3 }
]
]
}
配置后无需引入 polyfill，babel 会自动按需加载需要的功能,下图为当前配置对应的相应包的版本号
如果配置后报错core-js/***什么无法解析之类的,就在node_modules文件中找到@babel/polyfill中的packages.json,查看里面的core-js的版本,然后在项目中安装一下,并把.babelrc中的corejs配置改为对应的版本
@babel/plugin-transform-runtime
优化项 能减少babel内公共方法代码的重复的使用带来的问题
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
}
Node 环境中常用的库
dotenv 将 .env 文件 中的环境变量加载到 process.env 中
dotenv 是一个零依赖模块，可将 .env 文件 中的环境变量加载到 process.env 中,或者解析env文件的变量
如何使用：
创建 .env 文件
S3_BUCKET="YOURS3BUCKET"
SECRET_KEY="YOURSECRETKEYGOESHERE"
使用
import * as dotenv from 'dotenv'
dotenv.config()
console.log(process.env)
// 解析
const env = dotenv.parse(
fs.readFileSync(path.resolve(process.cwd(), "env.product"))
);
npm-run-all 并行 串行 执行多个npm脚本
这个工具是为了解决官方的 npm run 命令无法同时运行多个脚本的问题，它可以把诸如 npm run clean && npm run build:css && npm run build:js && npm run build:html 的一长串的命令通过 glob 语法简化成 npm-run-all clean build:* 这样精致小巧的模样。再者大家也知道 shell 的 & 语法实际上是不支持 cmd 的，为了跨平台也最好使用这样的第三方库来提供支持。preact 中就是用来对数量繁多的子模块进行并行构建和顺序测试。
--parallel: 并行运行多个命令，例如：npm-run-all --parallel lint build
--serial: 多个命令按排列顺序执行，例如：npm-run-all --serial clean lint build:**
--continue-on-error: 是否忽略错误，添加此参数 npm-run-all 会自动退出出错的命令，继续运行正常的
--race: 添加此参数之后，只要有一个命令运行出错，那么 npm-run-all 就会结束掉全部的命令
run-s：为 npm-run-all --serial的缩写；
run-p：为 npm-run-all --parallel的缩写
esno 用esbuild执行ts脚本
esno 是基于 esbuild 的 TS/ESNext node 运行时。该库会针对不同的模块化标准，采用不同的方案：
esno- Node in CJS mode - by esbuild-registeresmo- Node in ESM mode - by esbuild-node-loader
esno index.ts
esmo index.ts
// 示例
"script": {
"test": "node test.js", // 运行js脚本
"test": "esno test.ts", // 使用esbuild运行ts脚本
}
uppercamelcase 转换成大驼峰命名规范
- 将短划线/点/下划线/空格分隔的字符串转换为大写字母,也就是转换成大驼峰命名规范
picocolors 在终端修改输出字符样式的 npm 包 作用同chalk
picocolors 是一个可以在终端修改输出字符样式的 npm 包，说直白点就是给字符添加颜色；
import pc from "picocolors"
console.log(
pc.green(`How are ${pc.italic(`you`)} doing?`)
)
优点
- 无依赖包；
- 比 chalk 体积小 14 倍，速度快 2 倍；
- 支持 CJS 和 ESM 项目
注意
- 不过 chalk 为了优化，在最近的最新版本 v5 中已剔除依赖包
- 因为 picocolors 包比较小，所以功能边界没有 chalk 的全面
chalk 控制log在控制台输出的颜色
- 控制log在控制台输出的颜色
"chalk": "2.4.2"新版的是采用的ESM模式,如果在node中使用,就安装开头的这个版本
json-templater 模板语法
使用特定的模板语法, 相当于es6模板语法的高级版,当变量过多的时候使用这个,更方便
var render = require('json-templater/string');
render('{{xfoo}} {{say.what}}', { xfoo: 'yep', say: { what: 'yep' } });
update-notifier检查库的更新
// 引用 update-notifier 库，用于检查更新
const updateNotifier = require('update-notifier')
// 引用 chalk 库，用于控制台字符样式
const chalk = require('chalk')
// 引入 package.json 文件，用于 update-notifier 库读取相关信息
const pkg = require('../package.json')
// updateNotifier 是 update-notifier 的方法，其他方法可到 npmjs 查看
const notifier = updateNotifier({
// 从 package.json 获取 name 和 version 进行查询
pkg,
// 设定检查更新周期，默认为 1000 * 60 * 60 * 24（1 天）
// 这里设定为 1000 毫秒（1秒）
updateCheckInterval: 1000,
})
function updateChk() {
// 当检测到版本时，notifier.update 会返回 Object
// 此时可以用 notifier.update.latest 获取最新版本号
if (notifier.update) {
console.log(`New version available: ${chalk.cyan(notifier.update.latest)}, it's recommended that you update before using.`)
notifier.notify()
} else {
console.log('No new version is available.')
}
}
// 将上面的 updateChk() 方法导出
module.exports = updateChk
rimraf 删除文件和文件夹的
以包的形式包装rm -rf命令，用来删除文件和文件夹的，不管文件夹是否为空，都可删除.
此处就可以在windows上删除node_modules文件特别有用和高效,只需要配置相关命令即可
npm install rimraf --save-dev
const rimraf = require('rimraf');
rimraf('./test.txt', function (err) { // 删除当前目录下的 test.txt
console.log(err);
});
or
"scripts": {
...
"build": "rimraf dist"
},
commander 注册命令,解析命令
命令行工具，有了它我们就可以读取命令行命令，知道用户想要做什么了,总之就是注册命令,解析命令
const { Command } = require('commander');
const program = new Command();
program
.name('string-util')
.description('CLI to some JavaScript string utilities')
.version('0.8.0');
program.command('split')
.description('Split a string into substrings and display as an array')
.argument('<string>', 'string to split')
.option('--first', 'display just the first substring')
.option('-s, --separator <char>', 'separator character', ',')
.action((str, options) => {
const limit = options.first ? 1 : undefined;
console.log(str.split(options.separator, limit));
});
program.parse();
inquirer交互式命令行工具
交互式命令行工具，给用户提供一个漂亮的界面和提出问题流的方式,例如使用vuecli创建项目时,会有提问和选项与用户进行交互
#!/usr/bin/env node
// 交互式命令行
const inquirer = require("inquirer");
// 自定义交互式命令行的问题和简单校验
let question = [
{
name: "name",
type: "input",
message: "请输入模板名称",
validate(val) {
if (val === "") {
return "请输入模板名称";
} else if (tplObj[val]) {
return "模板已存在!";
} else {
return true;
}
},
},
{
name: "type",
type: "rawlist",
message: "请选择模板仓库类型",
choices: [
{
name: "github:",
},
{
name: "gitlab:",
},
{
name: "Bitbucket:",
},
],
},
{
name: "url",
type: "input",
message: "请输入模板地址",
validate(val) {
if (val === "") return "请输入模板地址";
return true;
},
},
];
inquirer.prompt(question).then((options) => {
// options是用户输入的参数 是一个对象
let { name, url, type } = options;
});
download-git-repo 下载远程仓库
下载远程模板工具，负责下载远程仓库的模板项目
ora 显示加载中的效果
用于显示加载中的效果，类似于前端页面的 loading 效果，像下载模板这种耗时的操作，有了 loading 效果可以提示用户正在进行中，请耐心等待
log-symbols
日志彩色符号，用来显示√ 或 × 等的图标
minimist 命令行参数解析工具,
命令行参数解析工具,可以更直观的让我们使用 命令行参数
node index.js --beep=boop -t -z 12 -n5 foo bar
Node.js 程序启动后可以直接从process.argv中读取到参数列表：
console.log(process.argv);
// ['/bin/node', '/tmp/index.js', '--beep=boop', '-t', '-z', '12', '-n5', 'foo', 'bar']
从上述代码中可以看到，process.argv 变量是一个数组，数组前两项分别是 node 程序位置和js脚本位置，数组中随后的元素都是我们启动Node.js后的参数，这些参数以空格分隔成数组。
虽然从 process.argv 中可以得到启动参数列表，但是我们仍需要对参数进行进一步解析处理才行
const argv = require('minimist')(process.argv.slice(2));
console.dir(argv);
// { _: [ 'foo', 'bar' ], beep: 'boop', t: true, z: 12, n: 5 }
经过 minimist 解析的process.argv是一个对象，例如，我们可以直接从访问 argv.beep 得到 --beep=boop 参数的值。
globby glob 快速批量导入、读取文件的库
node环境中搜索文件使用的库 globby 是 glob的增强版 后面可以直接使用globby
fast-glob 快速批量导入、读取文件的库
该包提供了遍历文件系统的方法github.com/mrmlnc/fast…
import glob from "fast-glob";
const files = await glob("*.ts", {
cwd: process.cwd(), // 需要匹配的工作目录, 默认是process.cwd()
absolute: true, // 返回绝对路径
onlyFiles: true, // 只返回文件
});
// 返回值 [ 'D:/zpp/组件库/multiple-technologies/packages/components-v3/index.ts' ]
ts-morph
来完成类型的生成和导出 ts-morph.com/setup/
Rollup中用的包
@rollup/plugin-node-resolve
@rollup/plugin-commonjs
解析commonjs ts vue文件的包
import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import vue from "rollup-plugin-vue";
const config = {
input,
plugins: [nodeResolve(), typescript(), vue(), commonjs()],
external: (id) => /^vue/.test(id) || /^@soul-cli/.test(id), // 排除掉vue和@soul-cli的依赖
};