如何發佈一個npm包(基於vue)

時間 2019-11-12

標籤如何發佈一個 npm 基於 vue 简体版

原文原文鏈接

前言：工做的時候老是使用別人的npm包，然而我有時心底會好奇本身如何發佈一個npm包呢，何時本身的包可以被不少人喜歡並使用呢...今天我終於邁出了第一步。javascript

前提：會使用 npm，有 vue 基礎，瞭解一點 webpackcss

Are you ready? Go!html

1、編寫本身的npm包java

　　1. 新建一個空文件夾node

　　2. 進入文件夾，終端(cmd)運行 npm initwebpack

　　完成後會在目錄下生成一個 package.json 文件git

　　咱們能夠根據本身的須要補充文件內容es6

　　這是個人：web

 1 {
 2   "name": "bing-test-publish-npm",
 3   "version": "1.0.0",
 4   "description": "佈一個npm包",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1",
 8     "start": "webpack-dev-server --hot --inline",
 9     "build": "webpack --display-error-details --config webpack.config.js"
10   },
11   "author": "bing",
12   "license": "ISC",
13   "devDependencies": {
14         "babel-core": "^6.26.0",
15         "babel-loader": "^7.1.2",
16         "babel-plugin-transform-object-rest-spread": "^6.26.0",
17         "babel-plugin-transform-runtime": "^6.23.0",
18         "babel-polyfill": "^6.26.0",
19         "babel-preset-es2015": "^6.24.1",
20         "css-loader": "^0.28.7",
21         "es6-promise": "^4.1.1",
22         "less": "^2.7.3",
23         "less-loader": "^4.0.5",
24         "style-loader": "^0.19.0",
25         "url-loader": "^0.6.2",
26         "vue": "^2.5.9",
27         "vue-hot-reload-api": "^2.2.4",
28         "vue-html-loader": "^1.2.4",
29         "vue-loader": "^13.5.0",
30         "vue-router": "^3.0.1",
31         "vue-style-loader": "^3.0.3",
32         "vue-template-compiler": "^2.5.9",
33         "vuex": "^3.0.1",
34         "webpack": "^3.9.1",
35         "webpack-dev-server": "^2.9.5"
36   }
37 }

　　3. 配置完後，命令行運行 npm install 安裝依賴包，安裝完會生成一個node_modules目錄

　　4. 接下來新建兩個文件夾 src(開發目錄)，dist(發佈目錄)

　　5. 而後咱們就能夠在 src 目錄下編寫本身的組件吧

　　個人文件目錄

　　app.vue

 1 <template>
 2     <div class="helloName">
 3         <input type="text" placeholder="請輸入姓名" v-model="yourName"></input>
 4         <div v-if="name">hello<span class="name">{{name}}!</span></div>
 5     </div>
 6 </template>
 7 <script>
 8     export default {
 9         name:'helloName',
10         data () {
11             return {
12                 yourName: ''
13             }
14         },
15         methods: {
16  
17         },
18         created(){
19         }
20     }
21 </script>
22 <style>
23 </style>

　　index.js

1 import helloName from './app.vue'
2 export default helloName

　　webpack.dev.conf.js

 1 const path = require("path");
 2 const webpack = require("webpack");
 3 const uglify = require("uglifyjs-webpack-plugin");
 4  
 5 module.exports = {
 6     devtool: 'source-map',
 7     entry: "./src/index.js",//入口文件，src目錄下的index.js文件，
 8     output: {
 9         path: path.resolve(__dirname, './dist'),//輸出路徑，就是新建的dist目錄，
10         publicPath: '/dist/',
11         filename: 'helloName.min.js',
12         libraryTarget: 'umd',
13         umdNamedDefine: true
14     },
15     module: {
16         rules: [{
17                 test: /\.vue$/,
18                 loader: 'vue-loader'
19             },
20             {
21                 test: /\.less$/,
22                 use: [
23                     { loader: "style-loader" },
24                     { loader: "css-loader" },
25                     { loader: "less-loader" }
26                 ]
27             },
28             {
29                 test: /\.js$/,
30                 exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
31                 loader: 'babel-loader'
32             },
33             {
34                 test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
35                 loader: 'url-loader',
36                 query: {
37                     limit: 30000,
38                     name: '[name].[ext]?[hash]'
39                 }
40             }
41         ]
42     },
43     plugins: [
44         new webpack.DefinePlugin({
45             "process.env": {
46                 NODE_ENV: JSON.stringify("production")
47             }
48         })
49     ]
50 }

　　文件寫好後，咱們運行 npm run build，結果是會在 dist 目錄下生成一個 helloName.min.js，就是咱們在 webpack.dev.conf.js 中 filename 的值

　　6. 將 package.json 中的 main 字段指向新生成的 helloName.min.js

　　7. 新建一個 .npmignore 文件（npm忽略文件），能夠把不須要發佈的文件忽略，若是隻有 .gitignore，沒有 .npmignore，則會使用 .gitignore

　　如：

.*
*.md
*.yml
build/
node_modules/
src/
test/
gulpfile.js

2、發佈npm包

　　1. 到 https://www.npmjs.com 註冊一個帳號

　　2. 進入你的項目根目錄，運行 npm login

　　會輸入你的用戶名、密碼和郵箱

　　3. 登陸成功後，執行 npm publish，就發佈成功啦，咱們能夠在官網看到

3、使用本身的npm包

　　接下來咱們在其餘項目中使用本身剛發佈的npm包

　　1. 咱們進入咱們的項目目錄運行 npm (或cnpm) install bing-test-publish-npm(咱們剛發佈的包)

　　2. 在須要使用此包的頁面引入，並使用

 1 <template>
 2   <div>
 3     個人npm包
 4     <helloName></helloName>
 5   </div>
 6 </template>
 7 <script>
 8   import helloName from 'bing-test-publish-npm'
 9 export default {
10   name: 'npm',
11   data () {
12     return {
13     }
14   },
15   components: {
16     helloName
17   }
18 }
19 </script>

　　這時我發現個人控制檯報錯了，原來是編碼錯誤，所以，咱們須要修改更新代碼

<template>
    <div class="helloName">
        <input type="text" placeholder="請輸入姓名" v-model="yourName"></input>
        <div v-if="yourName">hello<span class="name">{{yourName}}!</span></div>
    </div>
</template>
<script>
    export default {
        name:'helloName',
        data () {
            return {
                yourName: ''
            }
        },
        methods: {
 
        },
        created(){
        }
    }
</script>
<style>
</style>