A prelude to

Recently in the project to do some tool components, I think it is better to become NPM package, precipitation into the basic ability, but also convenient to use in the following other projects, because of the previous experience, full of confidence to open 😀. As a result, the dist package successfully printed a reference, emMM seems to be unable to find the export component. Went through the process from the beginning, no problem, so… The deviation should be “Scaffold upgrade!” , it is right, now are using vuE-CLI3 and above version to create the project, and the last play NPM seems to be in the vue-cli2 era [I did not read I guilty 😭], it is not determined to check the document, so ran to the official website document to see again, finally step on the pit success liao!

Library pattern packaging

In the official vue CLI documentation, you can find a way to package the library pattern. For detailed documentation, see vue-CLI to build a target library

#1 Import file

The entry file can be a.js or a.vue file. If no entry is specified, SRC/app.vue is used. Here we create a new index.js for the direct export component:

export { default as myLib } from '@/views/myLib'
Copy the code

When using a.vue file as an entry point, your library directly exposes the Vue component itself, since the component is always exported by default. When you use a.js or.ts file as an entry, it may contain named exports, so the library is exposed as a module. This means that your library must be accessed via window.yourlib.default in UMD builds or const myLib = require(‘ myLib ‘).default in CommonJS builds. If you don’t have any named exports and want to expose the default export directly, you can use the following webpack configuration in vue.config.js:

module.exports = {
  configureWebpack: {
    output: {
      libraryExport: 'default'}}}Copy the code

#2 Build command

You can build a single entry into a library by using the following command.

Vue-cli-service build --target lib --name myLib [entry] # File Size Gzipped dist/ mylib.umd.min.js13.28 kb                 8.42 kb
dist/myLib.umd.js        20.95 kb                 10.22 kb
dist/myLib.common.js     20.57 kb                 10.09 kb  
dist/myLib.css           0.33 kb                  0.23 kb
Copy the code

Building a library outputs:

  • Dist/mylib.common.js: a CommonJS package for packers (unfortunately, Webpack doesn’t currently support ES Modules output)
  • Dist/mylib.umd. js: a UMD package for use directly by browsers or AMD loaders
  • Dist/mylib.umd.min.js: compressed UMD build
  • Dist/mylib.css: Extracted CSS file (you can force inlining by setting CSS: {extract: false} in vue.config.js)

Create a new index.js file as the entry file to execute the build command:

vue-cli-service build --target lib --name myLib --dest lib src/index.js
Copy the code

After reviewing the contents of the file, we found that mylib.umd. js uses umD’s unified module definition method, which can be compatible with all modularization methods and can be used in any environment, which is exactly what we need.

# 3 vue dependence

In library mode, Vue is external. This means that there is no Vue in the package, even if you import the Vue in your code. If the library will be used through a wrapper, it will try to load the Vue in a dependent manner through the wrapper; Otherwise it falls back to a global Vue variable. To avoid this behavior, add the –inline-vue flag in the build command.

vue-cli-service build --target lib --name myLib --dest lib src/index.js --inline-vue
Copy the code

#4 Test results

Copy the built lib folder into the project for testing:

<template>
  <div>
    <myLib />
  </div>
</template>
<script>
import { Vue, Component} from 'vue-property-decorator';
import { myLib } from './lib/myLib.umd.min.js';
@Component({
  components: {
    myLib: myLib,
  },
})
export default class extends Vue {}</script>
Copy the code
Embarrassed ~ layout out of control, crazy error 😥

#5 Solve problems

Problem 1: Missing CSS styles

Manually import the built CSS file, or you can force inlining by setting CSS: {extract: false} in vue. Config. js at build time

If you are developing a library or multi-project repository (MONorePO), be aware that importing CSS has side effects. Be sure to remove “sideEffects”: false from package.json, otherwise the CSS block will be discarded by WebPack when it is built in production.

import 'myLib/lib/myLib.css';
Copy the code
Fault 2: VuEX data initialization fails

After investigation, IT is found that VUEX dependency has not been introduced, resulting in all the data stored in all stores are UNDtherefore

When building a Web Components component or library, the entry point is not main.js, but the entry-wc.js file, so to use vuex in the target of a Web Components component, You need to initialize the store in app.vue:

import store from './store'

// ...

export default {
  store,
  name: 'App'.// ...
}
Copy the code
Start solving problems

Update app. vue file and manually mount store:

<template>
  <div id="app">
    <myLib />
  </div>
</template>
<script>
import 'element-ui/lib/theme-chalk/index.css'
import '@/styles/index.scss'
import '@/styles/element-variables.scss'
import store from './store'
import myLib from './views/myLib'

export default {
  store,
  components: { myLib }
}
</script>
Copy the code

Modify the build command:

vue-cli-service build --target lib --name myLib --dest lib src/App.vue
Copy the code

Reintroducing tests:

<template>
  <div>
    <myLib />
  </div>
</template>
<script>
import { Vue, Component} from 'vue-property-decorator';
import { myLib } from './lib/myLib.umd.min.js';
import './lib/myLib.css';
@Component({
  components: {
    myLib: myLib,
  },
})
export default class extends Vue {}</script>
Copy the code
Test successful! ✨

NPM package release

#1 Change the entry file

Change package.json “main”:” dist/index.js”, entry file to “main”:”lib/ mylib.umd.min.js “.

#2 Simplify build commands

Add a shortcut syntax to package.json to simplify the “vue-cli-service build –target lib –name myLib –dest lib SRC/app. vue” command to lib.

# NPM run lib build"scripts": {
    "build": "vue-cli-service build"."lint": "vue-cli-service lint"."dev": "vue-cli-service serve"."lib":"vue-cli-service build --target lib --name myLib --dest lib src/App.vue",},Copy the code

#3 Change package permissions

Set package.json to “private”: false.

#4 Log in to NPM

  • If you do not have an account, go to the official website to register NPM first
  • Input at terminalnpm loginThen enter the account you created, password and email address to log in

# 5 release

  • npm publishPublish – Note that the version number in package.json is changed each time you publish an update
  • In the projectnpm installPublished package name for import use

# 6 to delete

  • Delete the specified version:npm unpublishPackage name @ Version number
  • Delete the entire package:npm unpublishThe package name — force

npm Organization

We created a new organization for our team with our colleagues. Now we want to publish this package to the organization for common maintenance:

#1 Register an organization

  • Go to the official website to create our Organization’s official steps

Initialization # 2

  • npm init --scope=<org_name>
  • Change the name field in package.json to@org_name/<pkg_name>
  • Public package release:npm publish --access public 

# 3 validation

  • Go to the official website and you can see the package information under the organization.

The last

Welcome to correct mistakes, see will be timely modification! ❤

Review the old and learn the new, I hope we can keep our hearts, never forget, there will be echoes.