記錄下學習釋出一個包到npm上

重慶崽兒brand發表於2018-08-20
NPM

原文釋出在我的個人部落格上：原文連結

工作中一直使用vue來開發專案，使用的專案結構也基本類似，但是vue-cli預設生成的目錄結構不太滿足自己的需求，每次來改又顯得麻煩，於是就自己動手稍微改動了生成的專案的結構，釋出到npm上方便自己使用

新建要釋出的包

1.新建一個==npm==資料夾

檔案加名字隨便取

2.在資料夾下新建一個==lib資料夾==

3.在lib資料夾下新建一個generate.js檔案

在==generate.js==檔案下寫如下程式碼

var Promise = require("bluebird"),
    fs = Promise.promisifyAll(require('fs-extra'));
var root = __dirname.replace(/lib/,'');
function generate(project) {
    return fs.copyAsync(root + 'template', project).then(function (err) {
        return err ? console.error(err) : console.log('gennerate project success')
    })
}

module.exports = generate;
複製程式碼

4.在npm資料夾下新建一個bin資料夾，在下面放一個npm.js檔案

npm.js檔案內容如下

#!/usr/bin/env node
var gs = require('../lib/generate'),
    program = require('commander');
program
    .version(require('../package.json').version)
    .usage('[options] [project name]')
    .parse(process.argv);
var pname = program.args[0];
if (!pname) program.help();
gs(pname);
複製程式碼

5.在npm資料夾下新建一個==template==資料夾

這個資料夾下就放你修改過的用vue-cli生成的專案

要釋出到npm上包的檔案結構如下圖

npm.png

釋出npm

1.首先，當然我們要去註冊一個npm的賬號點此去註冊npm

2.初始化

註冊完成後在資料夾下執行以下程式碼==生成package.json==檔案

npm init
複製程式碼

3.登陸你的npm賬號

執行以下命令會讓你輸入你的npm賬號和密碼，如果提示

Logged in as 你的npm使用者名稱 on registry.npmjs.org/. 則表示你已經登陸成功

npm adduser
複製程式碼

4.釋出你的包

npm publish .
複製程式碼

執行完以上操作，你的一個npm包就釋出完成了，你可以登陸自己的npm去插卡自己剛釋出的包了

生成的目錄結構和使用方式

## vue-vsc
A vue.js project tool that customizes the project template
一個自定義了專案模板的vue.js專案工具
##### 專案採用的vue,vue-router,axios版本
```markdown
"axios": "^0.18.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
複製程式碼

本工具只是用來構建一套自己常用的vue專案的模板，並無其他功能，所以，進行以下幾步操作後，和vue-cli的用法就完全一致了：

npm install -g vue-vsc
$ vsc <project-name>
$ cd <project-name>
$ npm install
複製程式碼

Project structure(專案結構)

---my-project
   --build
     --build.js
     --check-versions.js
     --utils.js
     --vue-loader.conf.js
     --webpack.base.conf.js
     --webpack.dev.conf.js
     --webpack.prod.conf.js
   --config
     --dev.env.js  // 開發環境變數
     --index.js  
     --prod.env.js  // 生產環境變數
     --test.env.js  // 測試環境變數
   --src
     --api // api請求資料夾
       --axios.js 
     --common //放一些公共的css、js、圖片檔案等
       --css
       --image
       --js
     --components //元件
     --router //路由
       --index.js
     --utils // 公共工具方法
       --utils.js
      --views // 頁面檔案		
     --App.vue
     --main.js
   --static
     --.gitkeep
   --.babelrc
   --.babelrc
   --.editorconfig
   --.gitignore
   --.postcssrc.js
   --index.html // 本檔案中新增了針對移動端js+rem佈局的程式碼，用不到可自行刪除
   --package.json
   --package-lock.json
   --README.md
複製程式碼

Installation（安裝）

 npm install -g vue-vsc
複製程式碼

Usage（用法）

 $ vsc <project-name>
 $ cd <project-name>
 $ npm install
複製程式碼

使用vsc 構建的專案的目錄結構如下圖

demo.png
Example(例子):

$ vsc my-project
$ cd my-project
$ npm install
複製程式碼

Others（其他說明）

Other usage is the same as vue-cli usage when you install this project
專案install下來後，其他用法和vue-cli的用法一樣
特別說明：
在專案中執行如下命令
 npm run  dev // 開發環境
 npm run  test // 測試環境打包
 npm run  build //生產環境打包
複製程式碼
複製程式碼

相關文章