1. Modify the Webpack configuration

// Add the following code to module.export
// Configure different entrances according to the execution environment
entry: NODE_ENV === 'development' ? './src/main.js' : './src/index.js'.output: {
    path: path.resolve(__dirname, './lib'),
    publicPath: '/lib/'.filename: 'index.js'.library: 'mu-design'.// Specify the module name for require
    libraryTarget: 'umd'.// Specify the output format
    umdNamedDefine: true // AMD modules in the UMD build process are named, otherwise anonymous define is used.
}
Copy the code

Library: Specifies the module name when you use require

LibraryTarget: To support multiple usage scenarios, we need to choose the appropriate packaging format. Common packaging formats are CMD, AMD, and UMD. CMD can only be executed in Node environment, AMD can only be executed in browser, UMD supports both execution environments. The obvious choice is the UMD format.

Sometimes we want to develop a library such as Lodash, underscore, etc. These libraries can be used either commonJS and AMD style or introduced as script.

At this point we need to use library and libraryTarget, we just need to write the code in ES6, compile it into generic UMD and hand it over to Webpack

UmdNamedDefine: AMD modules are named during the UMD build process. Otherwise, use an anonymous define

2. Modify the package.json file and index.html and add readme.md

Change this field to false for open source release
"private": false.// This refers to the path that demo will retrieve when importing it
"main": "./lib/index.js".Copy the code
// The reference address in index.html is changed accordingly
<script src="/lib/index.js"></script>
Copy the code

3. NPM release packages

  1. Release the new package

(1) Register an account on the official website of NPM (address: www.npmjs.com/). After registration:

Note that the email must be verified and will send a verification link to your registered email address. You cannot publish code without verification

Take a look at package.json and try to match the author to the NPM account

(2) Switch to the root directory of the project to send packages, log in to the NPM account, and enter the user name, password, and mailbox

// Go to the project root directory and initialize the NPM package
npm init
/ / login
npmnpm login
// Execute the release
npm publish
Copy the code
  1. Update package
// Change the version of the package, the command will automatically add 1 to the original version,
// The version value in the package.json file is actually changed
npm version patch 
// Republish the package
npm publish
Copy the code
  1. Delete the package
// Delete the specified versionNPM Unpublish Package name @ version number// Delete the entire packageNPM Unpublish package name --forceCopy the code

Use 4.

/ / installation
npm install your-npm-page --save

/ / the main introduction in js
import demo from 'your-npm-page'
Vue.use(demo)
Copy the code

5. Debugging

It is implemented by means of soft link, and the local NPM code is edited so that the coded code can be used in the project

  1. Make sure package.json is configured correctly

  2. Run the NPM link command in the root directory of the local NPM module to register the local module globally

  3. Run the NPM link npm-name command in the project root directory to link the local NPM modules registered globally in step 2 to the project node_modules, where npm-name refers to the module name configured in package.json in step 1

  4. Use the NPM package normally

Common mistakes

  1. The current is not the original mirror, may use other mirror, such as Taobao mirror
no_perms Private mode enable, only admin can publish this module
Copy the code

Modified: NPM is switched back to the original image

npm config set registry http://registry.npmjs.org
Copy the code

If the NRM tool is used, run the NRM use NPM command to switch

  1. Not logged in
npm publish failed put 500 unexpected status code 401
Copy the code

Modified: Re-enter NPM login

  1. The package name is occupied
npm ERR! you doNot have permission to publish "yourmoduleThe name ". You loggedin as the correct user?
Copy the code

Modify the package name

  1. Mailbox not verified
you must verify your email before publishing a new package
Copy the code

5. Check whether NPM is installed successfully

npm who am i
Copy the code
  1. The package name must contain no uppercase letters, Spaces, or underscores
  2. Since you need to register the component with Install, be sure to pay attention to the name value in the component