來，用心感受自己的第一個npm包

彭道寬發表於2018-10-22
NPM

1.前言

之前總是npm install 別人的包，使用別人的外掛，剛好最近面試，面試官有問，自己寫過外掛嗎？這不，今天花了一下午的時間，搞了一下這玩意～

這裡我寫了一個對話彈窗的元件，嗯，因為之前用別的框架，對話方塊Modal總是無法改成自己想要的，於是自己寫了一個，突然一想，為何不做成一個npm 包呢，話不多說，開始吧

這裡是基於vue開發的自己一個npm包，可能寫得很菜，但是我很認 (可) 真 (愛)

建議邊看我的github程式碼，邊對應著就不會很懵

2.步驟

一: 跟平常一樣寫我們的vue程式碼

二: 釋出到npm上

2.1 新建一個空白資料夾

  mkdir npm // 這裡資料夾名為 npm
複製程式碼

2.2 初始化專案

進入到 npm 資料夾，初始化專案。然後會讓你填一些專案相關的資訊，跟著提示填就是了。沒啥說的。注意name不要和現有的其他npm包重名了，不然一會兒發Npm包的時候會失敗，可以先去npmjs.com搜一下有沒有重名的。

  npm init
複製程式碼

2.3 package.json

因為這是一個vue的元件包，而且使用了es6和webpack，所以在devDependencies欄位中，應該至少加入以下依賴，下邊這是我的package.json，對應的欄位，自己查一哈

{
    "name": "p-dialog-modal",
    "version": "1.0.3",
    "description": "彈窗元件，自己的第一個npm包，有些粗略和簡單",
    "main": "dist/pdkModal.min.js",
    "scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"start": "webpack-dev-server --hot --inline",
	"build": "webpack --display-error-details --config webpack.config.js"
    },
    "repository": {
	"type": "git",
	"url": "git+https://github.com/PDKSophia/p-dialog-modal.git"
    },
    "author": "PDK",
    "license": "ISC",
    "bugs": {
	"url": "https://github.com/PDKSophia/p-dialog-modal/issues"
    },
    "homepage": "https://github.com/PDKSophia/p-dialog-modal#readme",
    "devDependencies": {
	"babel-core": "^6.26.0",
	"babel-loader": "^7.1.2",
	"babel-plugin-transform-object-rest-spread": "^6.26.0",
	"babel-plugin-transform-runtime": "^6.23.0",
	"babel-polyfill": "^6.26.0",
	"babel-preset-es2015": "^6.24.1",
	"css-loader": "^0.28.7",
	"es6-promise": "^4.1.1",
	"less": "^2.7.3",
	"less-loader": "^4.0.5",
	"style-loader": "^0.19.0",
	"url-loader": "^0.6.2",
	"vue": "^2.5.9",
	"vue-hot-reload-api": "^2.2.4",
	"vue-html-loader": "^1.2.4",
	"vue-loader": "^13.5.0",
	"vue-router": "^3.0.1",
	"vue-style-loader": "^3.0.3",
	"vue-template-compiler": "^2.5.9",
	"vuex": "^3.0.1",
	"webpack": "^3.9.1",
	"webpack-dev-server": "^2.9.5"
    }
}

複製程式碼

2.4 執行下載依賴包

  npm install
複製程式碼

2.5 新建 src 和 dist 資料夾

dist代表釋出時的目錄，src是開發目錄。dist裡面的js是到時候通過webpack打包後的檔案。待會只會提交dist目錄到npm官網上，src不提交。

src資料夾中，我們寫一個app.vue

  <!-- app.vue -->

  <template>
    <div>
	  <p>我是{{ user.name }}</p>
	  <p>我來自{{ user.from }}</p>
    </div>
  </template>

  <script>
    export default {
      data () {
        return {}
      },
      props: {
        user: {
          type: Object
        }
      }
    }
  </script>

  <style scoped lang='less'>
  </style>

複製程式碼

src資料夾中，我們寫一個index.js，目的就是把這個app匯出去

  // index.js

  import NpmVue from './app.vue'
  export default NpmVue

複製程式碼

2.6 加入webpack打包配置，並把src中的內容打包進dist目錄中

在根目錄下新增webpack.config.js檔案

const path = require("path");
const webpack = require("webpack");
const uglify = require("uglifyjs-webpack-plugin");
 
module.exports = {
    devtool: 'source-map',
    entry: "./src/index.js",//入口檔案，就是上步驟的src目錄下的index.js檔案，
    output: {
        path: path.resolve(__dirname, './dist'),//輸出路徑，就是上步驟中新建的dist目錄，
        publicPath: '/dist/',
        filename: 'pdkModal.min.js', // 輸出檔案，對應package.json中的main欄位
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    module: {
        rules: [{
                test: /\.vue$/,  
                loader: 'vue-loader'
            },
            {
                test: /\.less$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "less-loader" }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
                loader: 'babel-loader'
            },
            {
                test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
                loader: 'url-loader',
                query: {
                    limit: 30000,
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
        })
    ]
};

複製程式碼

2.7 打包

執行 npm run build，就會在dist目錄下生成一個pdkModal.min.js,這就是我們npm包的主檔案

注意，這裡要修改package.json中的main欄位指向的主檔案資訊

  npm run build
複製程式碼

修改package.json中的main欄位

  {
	...
	"main": "dist/pdkModal.min.js" // 換成你的
  }

複製程式碼

2.8 忽略要上的檔案

新建一個檔案，名為.npmignore，是不需要釋出到npm的檔案和資料夾，規則和.gitignore一樣。如果你的專案底下有.gitignore但是沒有.npmignore，那麼會使用.gitignore裡面的配置

.*
*.md
*.yml
build/
node_modules/
src/
test/
複製程式碼

2.9釋出

先去npm註冊一個賬號 （一定要進行郵箱驗證），然後進入根目錄，執行 npm login

它會讓你輸入你的使用者名稱，密碼和郵箱，若登入成功，會顯示：

  Logged in as 你的名字 on https://registry.npmjs.org/.
複製程式碼

接著執行 npm publish 釋出到npm官網上

當你的包需要更新時，需要自己手動修改package.json中的version版本號，慣例是+1啦，比如1.0.0-->1.0.1。然後 npm login, npm publish。即可。

連結

這是我自己寫的包 : github.com/PDKSophia/p…

個人部落格 : github.com/PDKSophia/b…

相關文章