來，用心感覺本身的第一個npm包

1.前言

以前老是npm install 別人的包，使用別人的插件，恰好最近面試，面試官有問，本身寫過插件嗎？這不，今天花了一下午的時間，搞了一下這玩意～

這裏我寫了一個對話彈窗的組件，嗯，由於以前用別的框架，對話框Modal老是沒法改爲本身想要的，因而本身寫了一個，忽然一想，爲什麼不作成一個npm 包呢，話很少說，開始吧

這裏是基於vue開發的本身一個npm包，可能寫得很菜，可是我很認 (可) 真 (愛)

建議邊看個人github代碼，邊對應着就不會很懵

• Github地址 : p-dialog-modal

• npm地址 : p-dialog-modal

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…