The reason

As Giser, I used the function of adding legends to maps. The legend standard is fixed so I wanted to publish it to NPM for easy use.

Note: front-end novice + first release NPM package step by step will illustrate through the afternoon read a lot of big guy to write a summary of some of the understanding may not be welcome to point out

Build templates to build VUE components

We use Webpack-Simple to develop components.

vue init webpack-simple <project-name>

Frame structures,

1 focuses on components that need to be published

2 is the output file output published component

I don’t want to go into the details of the code here but to illustrate these index.js files

Document describing

Under the package of the index. Js

SipLegend component siplegend. install = Vue => Vue.component(siplegend. name, Vue => Vue.com) SipLegend); // Export default SipLegend;Copy the code

Here is the focus on the problem I encountered the error

Siplegend. name in Vue.component(siplegend. name, SipLegend)

The sip-legend. Vue component name must be written in the component name otherwise an error will be reported

The index in the SRC directory is primarily the output of the component

/ /... Const install = function(Vue,) const components = [SipLegend //... opts = {}) { components.map(component => { Vue.component(component.name, component); })} /* Support the use of tags to import */ if (typeof window! == 'undefined' && window.Vue) { install(window.Vue); } export default { install, SipLegend // ... Keep adding} if anyCopy the code

Refer to the component

successful

With an output, there is also an entrance

The entry is in main.js

Export the component in this way

Webpack. Config. Js configuration

Var webpack = require('webpack') // execute environment //process The current node process process.env contains information about the system environment, but there is no such thing as NODE_ENV. //NODE_ENV is a user-defined variable used to determine the production environment or development environment const NODE_ENV = process.env.node_env module.exports = {// Configure different entries for different execution environments: NODE_ENV == 'development' ? './ SRC /main.js' : './ SRC /index.js', output: {// modify the package exit, package an index.js file in the outermost directory, our import default will point to this file path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'gis-ui.js', library: 'gis-ui', // specify the module name when you use require: 'umd', // libraryTarget will generate different UMD code, can be commonJS standard, can refer to amd standard, or just through the script tag introduced umdNamedDefine: True // names AMD modules in the UMD build process. {rules: [{test: /\.css$/, use: ['vue-style-loader', 'css-loader'],}, {test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] }, devServer: { historyApiFallback: true, noInfo: true, overlay: true }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([  new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }Copy the code

Package. js configuration file packaging

{" name ":" gisui ", / / NPM package name "main" : "dist/gis - UI. Js", / / build package file name}Copy the code

Ready to release

Local test

NPM run build package is packaged as.tgz using NPM back

The NPM I address/gisuI-1.0.0. TGZ is introduced as a component in main after the required project

Use it where needed

release

You need to register on the OFFICIAL website of NPM after you verify your email address

NPM login // Login

NPM publish // publish

And you’re done!

Publish organization package @my-org organization name

npm init --scope=@my-org
Copy the code

release

npm publish --access public
Copy the code

One quick question

After the release, I went to the vue component to launch and found an error. Finally, IT was found that the webpack.config.js configuration was faulty. I don’t know what the problem is at the moment. After all, WEBpack has not been learned yet. I will learn it later.

Use YARN LD and I said it is now recommended to use YARN as a package management tool so now add a use yarn to publish

NPM install -g YARN

Login yarn login

Release yarn publish

Update the yarn publish

The same as the NPM release, but you haven’t tried the next component yet

Thank you: juejin. Cn/post / 684490… reference