手把手教你写一个自定义指令的基于webpack的脚手架

 做一个自定义命令行webpack脚手架

问题：为什么我们不直接只用webpack-cli直接打包不就好了吗。

回答：这个问题没有毛病，我们的webpack整个项目就是只用一个工程的时候，是没有问题的。但是有一种情况，我们需要使用一个webpacl-cli开控制一个目录下的所有项目。这个目录下有非常多的单页，且每一个单页都是以一个项目。与其他的单页没没有联系。同时要给多人同时进行这个目录下的不同单页的开发。这个时候。一个自己命令行脚手架就会变得非常有必要的

笔者做了一个基于webpack的脚手架。下面教你如何搭建自己的前端脚手架

        其中的核心思想是webpack中的 入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

本文假设你已经安装了node,同时了解webpack中的相关参数的配置，假如对webpack的配置不是很了解->>>点击跳转

我已经将做好的一个简单的项目放到了gitlub上，关于webapck的配置是不全的，点击跳转，添加你需要的相关配置项

gitlub:https://github.com/soGooday/make-self-webpack-cli

使用webpack作为一个自己定义的命令行脚手架，我们需要明确几点

1，如何使用node创建自己命令行

2，如何在不使用webpack-cli得情况是下启动webpack插件

3，如何在不使用webpack-dev-server得情况是下开启一个本地的服务器。

下面我会就这三个作为整个的基础，来进行处理创建自己的交手教

 如何使用node创建自己命令行

问：

1，如何使用node运行一个js脚本

2，webpack.json中bin里面放什么参数

3，如何拿到命令行中输入的相关参数

答：

1，node下运行一个js脚本

首先创建一个空文件夹名字叫 make-self-webpack-cli，并在文件夹下创建一个叫做index.js的文件,里面写上我们的老朋友

console.log('hello world');

此时我们的文件目录是这样的红框部分，这里有一个孤独的守望者。我们难过只有他孤零零的站在。

黄框就是我们写入的内容

然后按下 ctrl+~ 或者是鼠标右键击红色非index文件地方，选择在终端中打开。

然后输入神奇的   node index.js 指令 我们就看见了篮筐的内容了。简直是棒极了。我们完成了一个问题，node执行一个脚本文件

2，

然后再z终端中继续输入 如下指令。嘿，伙计这个是件很严肃的事情！

npm  init -y

这个时候，你就会发现一个叫做 webapck.json的文件，终于index.js有了自己的朋友了。

我自己和你一样，想迫不及待的打开它，看看有没有什么可以帮助它的。再给他们搞些它们喜欢朋友。

{
  "name": "webpack01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1", 
  },
  "keywords": [],
  "author": "",
  "license": "ISC",

}

原来这里是关于webapck.json身世。我们仔细看发现了一行特殊的字符

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1", 
  },

等下伙计们，是的，就是他，刚刚webpack.json告诉我这个相关简写配置项 通过 key:value的键值对。从而可以让我们偷偷来懒。我靠这也太让人喜欢了。我打算带着你们尝试尝试。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1", 
    "index":"node index.js"
  },

其中"index":"node index.js"是我们新增的，

此时我在上述的绿框中的终端中写下 

npm run index

好了，我们可以发现依旧打印出来了 ‘holle world’的字段。是的这就是们些的第一个指令，虽然这个指令中index字段是我们自己创建。下面我们将会学习如何创建一个完全的自定义指令，而不再借助于 node 开头的指令

3，

打造自己的node 指令

我们需要在package.js中，修改一些参数，让它变得更加的强壮,

{ 
  "bin": {
    "happly": "./bin/index.js"
  }, 
}

上面的参数中我们，我们就相当于创建了一个happly指令 同时 指定一个要链接的脚本，是的伙计。相当于懒省事。

我们在相关目录下创建这个index.js的脚本。但是需要我们是加一些魔法，让这个脚本变为node的土壤（就是告诉电脑系统我们需要在node环境下运行）

//.bin/index.js脚本里面

#!/usr/bin/env node

console.log('我知道你刚刚输入的指令是什么:',process.argv.slice(2))

是的，我们需要让node知道 这个happly的指令是我们自己定义。才能让我们顺利的启动。可以去查查下面指令的作用哦

npm link

然后我们就能实现我们的目的了

happly  ahahahaha

嘿！伙计恭喜你！ 已经能够实定义自己的node指令。我们已经完成了第一部分