CRA 黑盒如何实现

前两篇黑盒内容： “CRA 为什么要做成黑盒” 和 “如何在黑盒中争取主动权” 

今天这篇文章我们继续谈谈 CRA 黑盒的实现。

不管是 @vue/cli 还是 create-react-app，它们内部都暗藏着黑盒的机制。在这里大家万不可把 @vue/cli 和 create-react-app 都认为是黑盒。它们仅仅是官方提供的两个脚手架，用于快速搭建项目基础结构。

# 黑盒如何工作

在项目开发中，我们把它分成三份：一份是是项目结构，一份是黑盒，一份是最终的产出。

简单来说，写好后的项目，经过黑盒处理之后，就成了一个可以上线部署的产品。这个处理过程就需要前端开发者们去努力实现了。

黑盒其实很简单，就是需要我们打破平时的开发思维，给开发者提供更简单的解决方案，一句话概括就是怎么简单怎么来。

对于黑盒原理，我个人认为它其实就是包裹的 webpack 或者其他工具。

本篇文章我们就以 webpack 为例，写一个自己的黑盒。

正常使用 webpack 的开发中，我们需要手动创建一个 webpack 的配置文件 webpack.config.js 。

黑盒现在要做的是：

• 删掉这个配置文件，在内部完成基本配置。

• 如果你想要自己配置，不好意思，你得按照我的约定来，更换新的配置文件 demo.config.js（demo是自己起的名字）

# 实际操作

有一个已经配置好的项目，如下图：

配置文件的内容很简单，如下：

const path = require("path")
module.exports =  {
    mode:"none",
    entry:"./src/index.js",
    output:{
        path:path.resolve(process.cwd(),"dist"),
        filename:"bundle.js"
    }
}

现在我们要移除 webpack.config.js 文件，同时在项目同级目录下建个 cwj-page 的文件夹。

这个 cwj-page 就是我们要实现的黑盒。

它里面的文件结构如下：

bin 文件夹是我们使用该文件夹名称当作指令要执行的文件，在 bin 文件夹下创建一个跟黑盒同名的 js 文件: cwj-page.js 内容如下：

#!/usr/bin/env node​const

config = require("..")
const webpack = require("webpack")
const compiler = webpack(config,(err,state)=>{
    if(err)throw err;
    console.log("编译成功")
})

lib 是我们要存储的一个js文件，这个文件其实就是我们所有关于 webpack.config.js 的基本配置。

const path = require("path")
const cwd = process.cwd()
const fs = require("fs")
let config = {
    mode:"none",
    entry:"./src/index.js",
    output:{
        path:path.resolve(process.cwd(),"dist"),
        filename:"build.js"
    }
}
// const loadconfig = require(`${cwd}/page.config.js`)
let cf = fs.existsSync(`${cwd}/page.config.js`)//判断当前目录下时候有约定的配置文件

​if(cf){ //有约定的配置文件
    try {
        const loadconfig = require(`${cwd}/page.config.js`)
        config = Object.assign({},config,loadconfig)
    }catch(e){
        console.log(e)
    }
}else{ //没有约定的配置文件
    onfig = Object.assign({},config)
}​

module.exports = config

注意：在这个 cwj-page 下的 webpack 必须用 npm install webpack -S 下载，因为它是黑盒所依赖的模块，目的就是要对 webpack 进行包装。

完成之后我们现在要把 cwj-page 发布 npm 或者直接本地软连接，因为我们后面的操作要完全使用黑盒指令对项目打包。所以在 cwj-page 下的终端进行 npm link，这样在全局安装目录下就会有一个 cwj-page 的文件。

再回到 demo 项目下，在 src 下的 index.js 随便写写 js 代码 ，然后使用黑盒指令 cwj-page。

到此，一个简单的黑盒就算包装成功了。