建立乙個前端的工具庫 建立npm工程

要建乙個工程，首先得明白這個工程的作用。因為現在公司還有部分工程是老工程，所以，這次規劃除了針對新工程，還需要能夠將js打包成壓縮檔案提供給老工程使用標籤引入。打包工具選擇webpack，單元測試整合了karma+jasmine。好了，現在就開始搭建吧！

生成的package.json檔案如下：

,

"author": "xuchao"
,  "license": "isc"
}

然後我們建乙個src資料夾來存放自己的**。再新建乙個index.js。目錄結構如下：

|-- src                             

└─index.js                            
|-- package.json                    
|-- readme.md

至此，我們已經搭建了乙個最簡單的npm工程。這裡按照前面介紹的配置好的話，就可以使用npm publish來提交自己的**了。

這裡我統一使用的是es6的模組化語法。也就是import和export。

主要是因為目前公司的新工程都是使用webpack打包。也都支援這種語法。此外個人比較喜歡這種語法。

而對於老工程，我們後面給工具工程引入webpack，然後我們可以按需打包出我們想要的js工具集合，然後通過標籤引入。

其實看了上面的步驟，發現搭建乙個npm工程還是很簡單的。也的確如此，我們更加關心的是這個工程的**實現方式。比如說，乙個工具類隨著時間的積累，必然是十分龐大的。我們乙個專案可能用到了其中的十分之一都不到。那麼，如何做才能讓我們的工具庫支援按需載入呢？

比如說日期相關的工具函式我們都放在date資料夾中，然後統一提供乙個index.js來彙總這些工具函式。然後在跟目錄的index.js中再彙總各個分類的工具函式。這裡要注意的是根目錄的index.js的export的寫法。

// utils/src/index.js

// 這種寫法是輸出乙個物件，並不能實現按需載入
export default 
// main.js
// 一旦import就是載入所有，裡面的分類只是這個大物件的屬性而已
import utils from 'utils';
// 即使你這裡只用了其中乙個模組
utils.module1();
// utils/src/index.js
// 這種寫法支援按需載入
export 
// main.js
// 我們只需要引入我們需要的模組就好
import  from 'utils';
// 這裡只用到了乙個模組
module1();

從上面我們可以看到兩種相近的export的寫法其實差別還是很大的。這些知識其實閱讀過es6模組的語法的人也應該都清楚。

當然，我們很多時候如果追求絕對的按需載入的話，可能會導致我們的函式分布的過於碎片。這很不利於維護和文件的編寫。合理的分類很多時候是在做一種權衡。

雖然在上面的模組化中我們使用了es6的語法，但是除此之外還是建議不要使用es6的語法。

因為es6目前需要babel轉碼之後才能真正被瀏覽器執行（雖然少部分瀏覽器實現了部分es6的語法）。但是很多時候我們的腳手架（比如我用的vue-cli）在打包的時候並不會去掃瞄node_moduls資料夾底下的js檔案。因為node_moduls裡面的檔案太多了。這時候如果你的工具**使用了es6語法的話，被別的工程引入，打包的時候會報錯。

// good

var a = 123;
// bad
const a = 123;
let b = 123;
// good
function
a() 
// bad
const a = _=>{};

利用npm 建立乙個空的專案

在硬碟任意路徑下新建乙個目錄 demo1 作為專案總目錄，然後在cmd命令列工具切換到該目錄下，也可以通過直接在目錄下摁住shift 滑鼠右鍵的方式開啟powershell視窗，這樣可以在命令列工具下直達檔案目錄，快捷方便。還可以用vscode的終端工具，效果是一樣的。npm init回車後命令列裡...

前端 使用yeoman建立乙個空專案

利用yeoman一鍵建立專案，方便很多，不需要自己去配置很多東西 2.安裝yeoman 開啟cmd命令，使用npm install g yo 安裝yeoman yo version可以檢視是否安裝成功 3.安裝webpack 命令為 npm install g generator react web...

乙個前端vue專案應該怎樣建立

在我們建立vue專案之前，需要node環境，你們先window r輸入cmd，在輸入框搜尋 cmd 然後進入，在命令列輸入node v 按回車,可以看見當前node的版本。接下來就是安裝腳手架了，接著按照第一步的步驟開啟cmd，但這次不輸入noede v，如果我們網速不好，可以下乙個 映象，這個步驟...