POI 源码阅读
更好的观看体验移步飞书
https://bytedance.feishu.cn/docs/doccnOadukROqZqGS9uOj6oGVzb
时间花费
时间一天两个小时左右，读文档用了两个多小时，一共花费五天 10 个小时的时间，基本把大概的逻辑（主线）理解清楚了。
写文档两个小时。
读 poi 整体感受比 sao 略微的费劲一些，需要熟悉 webpack 的操作配置。
POI 是什么？
就是把webpack 封装了一层的工具，可以本地启服务和打包。
省去自己的一大堆配置。
这里我要吐槽一下，如果我用 react 和 vue 的官方的那个脚手架，不也很好？还自带 router
如果我真的想改什么不也得看 poi 的文档，不也很麻烦吗？
从整个大方向上，用的用户不是很多。不过好在可以给自己造就经验和提升技术，从这个意义上说还是有价值的。
import styles from './style.module.css'
const el = document.createElement('div')el.className = styles.titleel.textContent = 'Hello Poi!'
document.body.appendChild(el)
这种写法例子，也不觉得很时尚。
POI 有什么功能？
https://poi.js.org/guide/ 从文档出发，读文档就读了好几个小时
题外话：这个页面的那个淡淡的蓝色，不如深色更好看，因为本身就是浅色模式，这个淡淡的色，很不容易吸引眼球。
最基础的功能有
一个本地开发，一个打包
// 打包，你为啥不写 --build 呢？？？
poi --prod
// 本地 port 开发模式
poi --dev
create-poi-app 实现了模板搬运，初始化项目
除此之外还有一个模板搬运的过程
yarn global add create-poi-app
create-poi-app my-app
细节功能
--inspect-webpack 以默认编辑器打开webpack 配置
正如文档所说，里面做了各种文件的转译，使用 babel，其实这都是 webpack 干的事啦，只要初始化的时候选择相应的配置就可以。
不用自己配置啦。
|
除此之外还拥有一些代理功能就是 webpack 提供的啦。
你可以把自己想写的配置写到 poi.config.js 这样合并到默认的 webpack.config.js 形成新的配置
POI 是怎么实现的？
地址 https://github.com/egoist/poi
里面使用了很常见的 lerna 实现多包管理，不过最主要的也就两个包啦
|
一个是 create-poi-app ，一个是core/poi
create-poi-app
这个里面比较简单，根据之前读过 sao 的经验，15 分钟就读明白了，不多唠叨。不过也让我知道了 sao 可以更灵活的运用， sao 的实现的功能就是模板搬运。
const app = sao({
generator: path.join(__dirname, '../generator'),
outDir: targetFolder,
npmClient
})
把模板传入，把输出目录即 outDir 传入，根据配置文件，问你一大堆问题，拿到问题结果搬用。
可以举个简单的例子
拿到你的回答是 ts 还是 js 然后去添加相应的文件，或是添加一些插件和配置
{
type: 'add',
templateDir: `templates/${typeChecker === 'ts' ? 'ts' : 'js'}`,
files: '**',
filters: {
'**/*.test.{js,ts}': Boolean(unit)
}
}
core/poi
下面的略微的有点难度，不过经过我多次翻看，终于明白了核心逻辑。
一定要聚精会神的看这里，这里写的才是整篇文章最重要的。
进入
const poi = new Poi()
_await_ poi.run()
从 bin/cli 下开始进入
这里引入了 require('v8-compile-cache')，只是为了更快的速度。
我们走进 lib/index.js 最复杂的就是页面了，讲清楚这个，基本整个项目都讲通了。
先理清楚几个变量
this.args = parseArgs(rawArgs)
this.args 就是 --serve --prod --debug --test 之类的东西
this.hooks = new Hooks()
this.hooks 就是一个发布订阅模式，名字和 webpack 的 hook 管理有点像
module.exports = _class_ Hooks {
constructor() {
this.hooks = new Map()
}
add(name, fn) {
const hooks = this.get(name)
hooks.add(fn)
this.hooks.set(name, hooks)
}
get(name) {
_return_ this.hooks.get(name) || new Set()
}
invoke(name, ...args) {
_for_ (const hook of this.get(name)) {
hook(...args)
}
}
async invokePromise(name, ...args) {
_for_ (const hook of this.get(name)) {
_await_ hook(...args)
}
}
}
add 是添加函数 ，invoke 是执行相应的函数，还添加一个异步执行，这里代码可以好好学习下，比如他使用了 set 和 map 很有意思。
this.cwd = this.args.get('cwd')
cwd 就是你的项目路径，是你自己的项目路径
this.configLoader = createConfigLoader(this.cwd)
createConfigLoader 这里还是使用 joycon 读取配置
传入你要读取的配置文件
比如
defaultConfigFiles = [
'poi.config.js',
'poi.config.ts',
'package.json',
'.poirc',
'.poirc.json',
'.poirc.js'
]
joycon 会把 path 和配置 data 给读取到
const { path: configPath, data: configFn } = this.configLoader.load({
files: configFiles,
packageKey: 'poi'
})
this.config =
typeof configFn === 'function' ? configFn(this.args.options) : configFn
此时我们拿到配置文件数据
this.pkg = this.configLoader.load({
files: ['package.json']
})
this.pkg.data = this.pkg.data || {}
拿到你的 package.json 数据
initPlugins
this.plugins = [
{ resolve: require.resolve('./plugins/command-options') },
{ resolve: require.resolve('./plugins/config-babel') },
{ resolve: require.resolve('./plugins/config-vue') },
{ resolve: require.resolve('./plugins/config-css') },
{ resolve: require.resolve('./plugins/config-font') },
{ resolve: require.resolve('./plugins/config-image') },
{ resolve: require.resolve('./plugins/config-eval') },
{ resolve: require.resolve('./plugins/config-html') },
{ resolve: require.resolve('./plugins/config-electron') },
{ resolve: require.resolve('./plugins/config-misc-loaders') },
{ resolve: require.resolve('./plugins/config-reason') },
{ resolve: require.resolve('./plugins/config-yarn-pnp') },
{ resolve: require.resolve('./plugins/config-jsx-import') },
{ resolve: require.resolve('./plugins/config-react-refresh') },
{ resolve: require.resolve('./plugins/watch') },
{ resolve: require.resolve('./plugins/serve') },
{ resolve: require.resolve('./plugins/eject-html') },
{ resolve: require.resolve('@poi/plugin-html-entry') }
]
.concat(mergePlugins(configPlugins, cliPlugins))
.map(plugin => {
_if_ (typeof plugin.resolve === 'string') {
plugin._resolve = plugin.resolve
plugin.resolve = require(plugin.resolve)
}
_return_ plugin
})
给 plugins 加点东西，很重要的东西。 合并了 cli 的 plugin 和配置里的 plugin
我们点进 plugin 看一看
有 exports.cli exports.when exports.apply 他们分别在不同时机去执行，
api.hook('createWebpackChain', config => {
config.module
.rule('font')
.test(/.(eot|otf|ttf|woff|woff2)(?.*)?_$_/)
.use('file-loader')
.loader(require.resolve('file-loader'))
.options({
name: api.config.output.fileNames.font
})
})
在 apply 里面全是 api.hook createWebpackChain ，这样写，只要当我触发 invoke createWebpackChain 的时候，这些函数将会被同时执行。
serve
我们看最最最重要的serve，看明白它也就理清核心了
// 拿到默认 webpackConfig 配置，怎么拿到的，下面说
const webpackConfig = api.createWebpackChain().toConfig()
// api 就是 poi 实例 ， const compiler = require('webpack')(config) 把配置文件传入生成编译后的文件
const compiler = api.createWebpackCompiler(webpackConfig)
//启动服务的配置，上面的配置是编译 babel 的配置
const devServerConfig = Object.assign(
{
noInfo: true,
historyApiFallback: true,
overlay: false,
disableHostCheck: true,
compress: true,
// _Silence WebpackDevServer's own logs since they're generally not useful._
// _It will still show compile warnings and errors with this setting._
clientLogLevel: 'none',
// _Prevent a WS client from getting injected as we're already including_
// _`webpackHotDevClient`._
injectClient: false,
publicPath: webpackConfig.output.publicPath,
contentBase:
api.config.publicFolder && api.resolveCwd(api.config.publicFolder),
watchContentBase: true,
stats: 'none'
},
devServer,
{
proxy:
typeof devServer.proxy === 'string'
? require('@poi/dev-utils/prepareProxy')(
devServer.proxy,
api.resolveCwd(api.config.publicFolder),
api.cli.options.debug
)
: devServer.proxy
}
)
// 启动服务，监听端口
const WebpackDevServer = require('webpack-dev-server')
const server = new WebpackDevServer(compiler, devServerConfig)
api.hooks.invoke('createServer', { server, port, host })
server.listen(port, host)
这里有点不理解点地方
api.hooks.invoke('beforeDevMiddlewares', server)
api.hooks.invoke('onCreateServer', server) // _TODO:_ _remove this in the future_
api.hooks.invoke('afterDevMiddlewares', server)
api.hooks.invoke('createServer', { server, port, host })
api.hooks.invoke('createDevServerConfig', devServerConfig)
在整套代码里我没有找到任何添加 hook 操作，这些也不是 webpack 的生命周期，我怀疑只是添加钩子给其他的引入里用的
exports.apply = api => {
// 这里 config 拿到的是 webpack 的 config
api.hook('createWebpackChain', config => {
_if_ (!api.cli.options.serve) _return_
// 如果有 hot，给 config 添加 hot 的配置
_if_ (api.config.devServer.hot) {
const hotEntries =
api.config.devServer.hotEntries.length > 0
? api.config.devServer.hotEntries
: config.entryPoints.store.keys()
_for_ (const entry of hotEntries) {
_if_ (config.entryPoints.has(entry)) {
config.entry(entry).prepend('#webpack-hot-client')
}
}
const { HotModuleReplacementPlugin } = require('webpack')
HotModuleReplacementPlugin.__expression = `require('webpack').HotModuleReplacementPlugin`
config.plugin('hot').use(HotModuleReplacementPlugin)
}
})
}
Plugin apply 方法
包括任何其他 plugin apply 方法里，写的都是通用的，如果有 vue ，添加 vue 的 loader
exports.apply = api => {
api.hook('createWebpackChain', config => {
const rule = config.module.rule('vue').test(/.vue_$_/)
...
rule
.use('vue-loader')
.loader(require.resolve(vueLoaderPath))
.options(
Object.assign(
{
// _TODO:_ _error with thread-loader_
compiler: isVue3
? undefined
: api.localRequire('vue-template-compiler')
},
// _For Vue templates_
api.config.cache && getCacheOptions()
)
)
config.plugin('vue').use(require(vueLoaderPath).VueLoaderPlugin)
})
}
其他 css, html, image, babel 都差不多，这些过程很是繁琐，需要熟悉 webpack 的配置
总结一下 plugin
在 cli 执行的 args 的命令，在 apply 的时候更改了 webpack 的配置 ，when 是控制什么时候加入 apply
执行 plugin cli
this.extendCLI()
//这里执行了 plugin 的 cli，传入了 this
extendCLI() {
_for_ (const plugin of this.plugins) {
_if_ (plugin.resolve.cli) {
plugin.resolve.cli(this, plugin.options)
}
}
}
其实控制执行的是这句话
_await_ this.cli.runMatchedCommand()
找了半天这个方法，原来是 cac 里面的方法，之前配置了 一个 false 的参数就不会被立即执行
为什么不立即执行，为了加入几个钩子
_await_ this.hooks.invokePromise('beforeRun')
_await_ this.cli.runMatchedCommand()
_await_ this.hooks.invokePromise('afterRun')
执行 plugin apply
this.mergeConfig()
// _Call plugin.apply_
this.applyPlugins()
applyPlugins() {
let plugins = this.plugins.filter(plugin => {
_return_ !plugin.resolve.when || plugin.resolve.when(this)
})
// _Run plugin's `filterPlugins` method_
_for_ (const plugin of plugins) {
_if_ (plugin.resolve.filterPlugins) {
plugins = plugin.resolve.filterPlugins(this.plugins, plugin.options)
}
}
// _Run plugin's `apply` method_
_for_ (const plugin of plugins) {
_if_ (plugin.resolve.apply) {
logger.debug(`Apply plugin: `${chalk.bold(plugin.resolve.name)}``)
_if_ (plugin._resolve) {
logger.debug(`location: ${plugin._resolve}`)
}
plugin.resolve.apply(this, plugin.options)
}
}
}
先 merge config ，然后执行 apply 方法 ，apply 方法执行，只是加入了函数 hook ，真正的执行是这句
this.hooks.invoke('createWebpackChain', config, opts)
我们回到 initCLI
this.command = cli
.command('[...entries]', 'Entry files to start bundling', {
ignoreOptionDefaultValue: true
})
.usage('[...entries] [options]')
.action(async () => {
logger.debug(`Using default handler`)
const chain = this.createWebpackChain()
const compiler = this.createWebpackCompiler(chain.toConfig())
_await_ this.runCompiler(compiler)
})
进入 createWebpackChain, 进入 utils/webpackChain, 使用 webpack-chain 创建了起初的 webpack 配置
createWebpackChain(opts) {
const WebpackChain = require('./utils/WebpackChain')
opts = Object.assign({ type: 'client', mode: this.mode }, opts)
//加入 poi 的配置 ，configureWebpack 有兴趣可以自己去追踪下
const config = new WebpackChain({
configureWebpack: this.config.configureWebpack,
opts
})
// 加入本地配置
require('./webpack/webpack.config')(config, this)
// 配置好config，却根据config，添加 webpack 相应的规则
this.hooks.invoke('createWebpackChain', config, opts)
_if_ (this.config.chainWebpack) {
this.config.chainWebpack(config, opts)
}
// 如果有 --inspect-webpack， 使用 open 打开配置，使用的默认 editor
_if_ (this.cli.options.inspectWebpack) {
const inspect = () => {
const id = Math.random()
.toString(36)
.substring(7)
const outFile = path.join(
os.tmpdir(),
`poi-inspect-webpack-config-${id}.js`
)
const configString = `// ${JSON.stringify(
opts
)}nvar config = ${config.toString()}nn`
fs.writeFileSync(outFile, configString, 'utf8')
require('@poi/dev-utils/open')(outFile, {
wait: false
})
}
config.plugin('inspect-webpack').use(
_class_ InspectWebpack {
apply(compiler) {
compiler.hooks.afterEnvironment.tap('inspect-webpack', inspect)
}
}
)
}
// 返回完整的 webpack 的 config，上面所的一切都是为了配置 webpack 的 config
_return_ config
}
const chain = this.createWebpackChain()
// 根据 config 去编译，生成编译后的文件
const compiler = this.createWebpackCompiler(chain.toConfig())
// 打包编译结果
_await_ this.runCompiler(compiler)
以上最基本的服务和编译打包跑通了
尽管在文档里对于 cli 的操作很少，但是实现的却有很多
createConfigFromCLIOptions() {
const {
minimize,
sourceMap,
format,
moduleName,
outDir,
publicUrl,
target,
clean,
parallel,
cache,
jsx,
extractCss,
hot,
host,
port,
open,
proxy,
fileNames,
html,
publicFolder,
babelrc,
babelConfigFile,
reactRefresh
} = this.cli.options
}
比方说这里 你可以
--cwd
--debug
--port
--proxy
--require
--hot
太多太多，但是用的很少，文档上都没提，有些功能写了，用的机会很少，值得反思一下，一开始开始项目的时候，是不是可以不用考虑这些，先实现最核心的功能，后期在慢慢的维护。
总结
这个项目一开始搭建了几个月，后来就没动静了。
作为提升技术和积累经验，学习搭建方法，还是很有意义的。
如果这个项目像 umi 这样的，如果自动化router ，是不是可以更好？
没有提供额外的功能，感觉一开始就需要做好产品。