nodejswebpack教程,node vue webpack

本文目錄一覽：

• 1、如何使用webpack打包ES6的Nodejs後台程序
• 2、nodejs 怎麼離線安裝webpack
• 3、使用 NodeJs 實現本地接口系統
• 4、Webpack工程化筆記(二)：npm scripts
• 5、手把手教你使用nodejs編寫cli(命令行)

如何使用webpack打包ES6的Nodejs後台程序

這種配置方式和你的可能有點不同，僅作參考 dev.config.js部分 var path = require(‘path’); var webpack = require(‘webpack’); var ExtractTextPlugin = require(‘extract-text-webpack-plugin’); var autoprefixer = require(‘autoprefixer’.

nodejs 怎麼離線安裝webpack

1 安裝nodejs程序包 2 打開nodejs 從開始程序中選擇Node.js—Node.js command prompt 3 在命令窗口輸入以下命令 一、npm install webdreverio -g 二、npm install selenium-standalone@latest -g 4 安裝selenium服務，在命令窗口輸入以及下命…

使用 NodeJs 實現本地接口系統

一個基於node.js的輕量級 API mock服務 。

在存放mock數據的文件夾下執行命令啟動服務。

如果mock數據文件放在名為 mock-data 的文件夾下，則在 mock-data 文件夾下執行以下命令。

以下命令默認端口為 7777

或者使用自定義端口

服務啟動後，訪問地址為

在存放mock數據的目錄下新建 .json 或者 .js 為後輟的文件。

mock規則示例如下：

如果對同一接口分別創建了 js 和 json 兩個mock文件，會優先取 js文件 的數據。

mock文件名必須和API接口的文件名一致，才能將API和mock文件匹配。

示例:

示例：

1） 先安裝包

2） 在任意位置新建一個文件夾 mock-test

3） 在 mock-test 目錄下新建mock數據文件 test.json ，並添加內容如下：

4） 在 mock-test 目錄下面執行命令啟動mock服務 (默認端口7777)

5） 打開瀏覽器，輸入以下地址，訪問mock文件

請求地址只要以 test 結尾的，都可以訪問到上面創建的 test.json 文件

6） 項目中使用

以webpack4為例：

Github倉庫源碼地址： ，歡迎 +Star

Webpack工程化筆記(二)：npm scripts

在npm中，提供了一個scripts的腳本命令，可以直接替換之前冗長的命令行。

webpack的配置非常的多，因此，會經常出現層疊的屬性關係。

webpack對於輸出要求的是絕對路徑(系統根目錄的完整路徑)，而之前在命令行中是使用的相對路徑，因此這部分可以使用nodejs的拼接函數（path.join）

手把手教你使用nodejs編寫cli(命令行)

前端日常開發中，會遇見各種各樣的cli，比如一行命令幫你打包的webpack，一行命令幫你生成vue項目模板的vue-cli，還有創建react項目的create-react-app等等等等。這些工具極大地方便了我們的日常工作，讓計算機自己去干繁瑣的工作，而我們，就可以節省出大量的時間用於學習、交流、開發、 逛steam 。

但是有時候一些十分特別的需求，我們是找不到適合的cli工具去做的。比如說，你的項目十分龐大，你給項目添加一個新的路由，要經過 創建目錄 – 創建.vue文件 – 更新vue-router的路由列表 這一趟流程，就算快捷鍵創建目錄文件用得再熟悉，也比不過你一行命令來得快，特別是路由目錄嵌套深，.vue文件初始化模板複雜的時候。

所以呢，何不為自己項目寫一個cli？就專門做這些繁瑣的活？

nodejs的cli，本質就是跑node腳本嘛，基本上每位前端er都會：

然後命令行調用

可以做得更逼真一點，我們在package.json裡面的scripts字段上添加一下腳本名：

然後命令行調用：

但是，看到這裡你肯定會說，人家webpack還有vue-cli都是“有名字”的！什麼 vue-cli init app 、 webpack -p 的，多漂亮，看看這個命令行， node index.js ，還 npm run hello ，誰不會啊，丑不拉幾的，怕又不是來水文章的哦？差評！！

別急啊各位大人，接下來就說說，如何給這個node腳本起個名字。

姑且，先把這個cli的名字命名為 hello-cli ，就是我們能夠在命令行裡面，輸入 hello-cli ，然後它就打印一句 hello world ，沒有 node 也沒有 npm ，就是：

這樣，你的第一個cli腳本就成功安裝了，可以在命令行裡面，直接敲你的cli名字，看看結果輸出吧。

另外，如果你僅希望你的cli腳本僅在項目里執行，則需要在你項目裡面新建一個目錄，重複上述的操作，只是在第三步的時候，不要llink到全局裡面去，而是使用 npm i -D file:你的腳本cli目錄路徑 ，把它當成項目的依賴安裝到node_modules裡面去，如果安裝成功，那麼在項目的package.json你會看到多了一條依賴，這條依賴的值不是版本號，而是你腳本的路徑。然後在node_modules裡面會有一個.bin目錄，裡面就存放着你的可執行文件。

當然，這樣安裝的cli腳本，必須在項目的package.json的scripts字段上聲明腳本命令，然後通過 npm run 的方式執行。

哦？這樣子使用的話不就回到最最最開始的時候那種原始的 npm run hello 一樣么。

是的，但是有質的區別。使用 node index.js 這種方式調用的話固然簡單靈活，但是嚴重依賴腳本路徑，一旦目錄結構發生變動，寫在scripts的命令就要更改一次；但是使用npm安裝之後，本地的cli腳本就被拉到node_modules裡面，目錄結構變動對其影響不大。其次是不利於分享與發布，如果你想把你的cli腳本發布出去，那麼有一個好聽響亮的名字，比起在說明文檔裡面告訴使用者如何找到你的腳本路徑再用node執行它，簡直好上那麼一萬倍不是么？

這裡也給我們提供了一個cli開發流程思路：

名字有了，輸出也有了，看看我們跟那些大名鼎鼎的cli工具，在形式上還差點啥？對了，人家可以支持不同參數選項的，還可以根據輸入的不同，產生不同的結果。

這樣吧，我們給這個cli加一個功能，既然叫 hello-cli ，那不能只會 hello world 吧，必須要見誰就說 hello 才行：

雖然這個功能很簡單，但是至少也是實現了“根據輸入的不同，產生不同結果”的效果。

命令行上的參數，可以通過 process 這個變量獲取， process 是一個全局對象而不是一個包，不需要通過 require 引入。通過 process 這個對象我們可以拿到當前腳本執行環境等一系列信息，其中就包括命令行的輸入情況，這個信息，保存在 process.argv 這個屬性里。我們可以打印一下：

打印結果：

可以看出，argv是個數組，前兩位是固定的，分別是node程序的路徑和腳本存放的位置，從第三位開始才是額外輸入的內容。那麼實現上面的功能就很簡單了，只要讀取argv數組的第三位，然後輸出出來就可以了。

npm社區中也有一些優秀的命令行參數解析包，比如 yargs ,tj的 commander.js 等等

如果你想使用比較複雜的參數或者命令，建議還是用第三方包比較好，手寫解析太耗精力了。

現在，你可以自由自在的寫你自己的cli腳本了。

如果你希望寫一個項目打完包自動推上git的cli，或者自動從git倉庫裡面拉取項目啟動模板，那麼，你需要通過node的 child_process 模塊開啟子進程，在子進程內調用git命令：

不僅是git命令，包括系統命令、其他cli命令都可以在這裡執行。特別是系統命令，使用系統命令對文件目錄進行操作，效率比fs高到不知道哪裡去了。

社區上也有一些不錯的包，比如阮一峰老師推薦的 shelljs

如果你不那麼希望你的cli用起來那麼“硬核”，希望更人性化一點，比如提供一些友好的輸入、提示啊，給你的輸出加點顏色區分重點啊，寫個簡單的進度條啊等等，那麼你就需要美化一下你的輸出了。

除了顏色這部分，不使用第三方包實現起來非常繁瑣複雜，其他的功能，都可以試試自己寫。

顏色部分使用了第三方包 colors ，這裡就不演示了。

其他都是由nodejs自帶的 readline 模塊實現的。

繪製的思路跟canvas繪製動畫一樣，只不過canvas是清除畫布，而命令行這裡是通過 readline.clearScreenDown 清除輸出。

這樣，一個簡易的，人性化的，帶點點進度條動畫的命令行cli工具就寫好了，你也可以發揮你的想象力，去寫一些更有趣的效果出來。

畢竟我們前端，有瀏覽器我們可以寫動畫，沒了瀏覽器我們一樣可以寫動畫。