1. Introduction

Before always NPM install someone else’s package, using someone else’s plug-in, just recently the interview, the interviewer asked, have you written plug-ins? This is not, today spent all afternoon, to make this thing ~

So I wrote a dialog popover component here, well, because I couldn’t change it to what I wanted to do with Modal in other frames, so I wrote one, and suddenly I thought, why don’t I make it into an NPM package, so I don’t have to say much, let’s do it

Here is based on vUE development of their own NPM package, may write very vegetables, but I very recognize (can) true (love)

I suggest you look at my Github code, and you don’t get confused

  • Github address: p-dialog-modal

  • NPM address: p-dialog-modal

Step 3.

One: write our VUE code as usual

Two: publish to NPM

2.1 Create a blank folder

  mkdir npm // The folder name is NPM
Copy the code

2.2 Initializing the project

Go to the NPM folder and initialize the project. Then you’ll be asked to fill in some information about the project. Just follow the prompts. There’s nothing to say. Note that the name should not be the same as any existing NPM package, otherwise it will fail to send the NPM package later, you can go to npmjs.com to search for the same name.

  npm init
Copy the code

2.3 package. Json

Since this is a vue component package and uses ES6 and WebPack, you should include the following dependencies in the devDependencies field. Here is my package.json field

{
    "name": "p-dialog-modal"."version": "1.0.3"."description": "Popover components, their first NPM package, somewhat sketchy and simple."."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.4.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"."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"}}Copy the code

2.4 Downloading Dependency Packages

  npm install
Copy the code

2.5 Creating folders SRC and dist

Dist represents the directory at publication time, SRC is the development directory. The js in dist is the file that is packaged via WebPack at that time. Only dist directory will be submitted to NPM website, SRC will not be submitted.

SRC folder, we’ll say app.vue

  <! -- app.vue -->

  <template>
    <div>
	  <p>I'm {{user.name}}</p>
	  <p>I'm from {{user.from}}</p>
    </div>
  </template>

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

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

Copy the code

Inside the SRC folder, we’ll write an index.js to export the app

  // index.js

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

Copy the code

2.6 Add webPack configuration and package contents from SRC into dist directory

Add the webpack.config.js file in the root directory

const path = require("path");
const webpack = require("webpack");
const uglify = require("uglifyjs-webpack-plugin");
 
module.exports = {
    devtool: 'source-map'.entry: "./src/index.js".// The entry file is the index.js file in the SRC directory of the previous step.
    output: {
        path: path.resolve(__dirname, './dist'),// The output path is the dist directory created in the previous step.
        publicPath: '/dist/'.filename: 'pdkModal.min.js'.// The output file, corresponding to the main field in package.json
        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")}})]};Copy the code

2.7 packaging

Executing the NPM run build generates a pdkmodal.min.js in the dist directory, which is the main file of our NPM package

Note that you are modifying the main file information that the main field in package.json points to

  npm run build
Copy the code

Modify the main field in package.json

{..."main": "dist/pdkModal.min.js" // Change it to yours
  }

Copy the code

2.8 Ignoring files to be added

Create a new file named.npmIgnore, which is a file and folder that does not need to be published to NPM, using the same rules as.gitignore. If your project has.gitignore but does not have.npmignore, the.gitignore configuration will be used

.*
*.md
*.yml
build/
node_modules/
src/
test/
Copy the code

2.9 release

Go to NPM to register an account (be sure to authenticate your email address), then go to your root directory and run NPM login

It will ask you to enter your username, password and email address. If you have logged in successfully, it will show you:

  Logged in asWhat's your name?//registry.npmjs.org/.
Copy the code

Then execute NPM Publish to the NPM website

When your package needs to be updated, you need to manually change the version number in package.json. The convention is +1, such as 1.0.0–>1.0.1. Then NPM login, NPM Publish. Can.

If you find that NPM login does not work, report 409 error, then you can consider replacing taobao source

npm login --registry http://registry.npmjs.org
npm publish --registry http://registry.npmjs.org
Copy the code

link

This is my own written bag: github.com/PDKSophia/p…

Personal blog: github.com/PDKSophia/b…