<tbody id="iajvf"></tbody>

    1. <em id="iajvf"><acronym id="iajvf"><menuitem id="iajvf"></menuitem></acronym></em>
        <li id="iajvf"><acronym id="iajvf"></acronym></li>

        [技術分享]npm 發布及腳手架爬坑小結

        zjscy666發布于2 年前 ? 736 次閱讀

        前言


        最近小編試著做了做腳手架,再打成npm包,從中遇到了不少問題,下面來總結下。

        主要知識點


        • package.json
        • bin目錄

        package.json中最重要的是兩個部分,main和bin,其他的你可以隨意


        新建一個目錄,然后是輸入

        npm init
        

        之后在生成的package.json目錄中使用bin和main

        "main": "./bin/index.js",
        "bin": {
            "lgrt": "./bin/index.js"
         },
        

        bin目錄


        新建一個bin目錄,再建立index.js,記住bin目錄下必須有package.json的中bin字段下包含的文件名,上例中就是index.js,然后在第一行寫上

        #!/usr/bin/env node
        

        剩下的其余事情,npm服務器和本地系統會幫你完成。

        額外注意點


        • 基礎就是上面部分了,同目錄下也必須包含package.json中main字段下包含的文件名,不然當你發布到npm上后就會出現問題
        • 包名不要重復,即package.json中name不要和已有的包名(包括本地和npm服務器)沖突,前者會導致你本地運行包的時候運行了已有的包,而不是你寫的這個包。后者會導致你提交不上去。

        開始寫腳手架


        首先要注意你是在用node寫,這個很容易,看看文檔,用文檔api,配合js你就明白了。這里簡單介紹幾個包

        • commander 命令行交互工具,具體看npm網站上說明
        • inquirer和commander類似,但是比commander強大,通常和rxjs連用,具體看npm網站上說明
        • fs-extra這個是fs的增強版,并不是必須的。

        有了上面這些包,就可以寫個簡單的腳手架 ,但是想到CRA這類腳手架,也許你想著要從git上copy一個自己已經有的模板下來,那么你需要這個包

        • download-git-repo,讓你從git上下載包到本地,這樣就初步可以完成一個類似CRA腳手架的開箱即用功能了,但是你可以覺得我能不能幫用戶在使用腳手架的過程中,直接npm install,把依賴也下載下來呢?答案是可以的。我們可以利用node的child_process這個模塊執行npm install,但是這遠遠不夠,我們還要拿到系統中的npm才可以,這個時候我們使用node中的process,process.platform確定系統,如果是win32,那么我們直接獲取npm.cmd,如果不是我們獲取npm即可。上面我們還沒有提到如何獲取npm或者npm.cmd路徑,看下面那個包。
        • which,官網的解釋Finds the first instance of a specified executable in the PATH environment variable. Does not cache the results, so hash -r is not needed when the PATH changes.大家自行翻譯,如果單詞看不懂,請自行google。

        到這里基本差不多了,但是還有個問題,比如我下載的模板在github上文件夾名是A,但是用戶使用我的腳手架,創建了文件名為B的文件夾,這個時候如果直接下載,目錄結構就是B/A/…, 而我們需要B/…,我們想到的方案是能不能下載完,把A中的文件copy到上一層,然后刪除B目錄。當然還有其他辦法,我們把模板文件夾A下載到B目錄同級的目錄,然后把B目錄的文件copy到已經下載好的A目錄,再刪除B目錄,再把A目錄改名成B目錄。這里都要進行一次刪除操作,有點麻煩,但是又不能影響用戶體驗,所以我們最終的方案是把A模板下載到腳手架相關的npm包下面,我們稱為C,然后copy到B目錄,這樣不用進行刪除操作,也不影響用戶體驗,還能對下載到本地的模板在copy到B目錄前進行更改?,F在只差一個問題了,如何優雅的把本地修改后的模板C,copy到最終的B目錄,我們想到了gulp的copy功能,通過研究gulp部分源碼,我們最終通過使用下面兩個包完美的完成了任務。

        • vinyl-fs和map-stream,具體看npm網站上說明

        后記


        本文主要都是思路,具體的代碼大家可以在npm下載看。

        npm i  little-ghost-react-ts  -g
        lgrt c <AppName>
        

        最后再說個npm publish遇到的問題,因為作者安裝了nrm,使用了淘寶鏡像,所以npm publish時報錯了,遇到這類報錯先檢查是不是登陸,npm login,如果登陸了,那么就輸入nrm ls檢查下現在的源,如果不是npm源,那就用nrm use npm,再publish即可。

        共收到 0 條回復