preface

It’s like we’re getting to the point now. 2333.

Code changes

package.json

. "name": "tt-utils", "main": "src/main.js", "repository": { "type": "git", "url": "https://github.com/everlose/tt-utils.git" }, "peerDependencies": { "vue": "2.x" }, "keywords": [ "vue", "util library" ], "bugs": "https://github.com/everlose/tt-utils/issues" ...Copy the code

Add some fields describing the package file. The most important of these is the main entry, which determines which file to look for when referencing the package.

For example, reference our custom library of functions in a business project

import ttUtils from 'tt-utils'
Copy the code

The ttUtils variable is actually exported from tt-utils/ SRC /main.js.

.npmignore

Packages published to NPM do not need to show users our example path, node_modules, test directory, etc., so they are filtered out.

test/
dist/
example/
static/
config/
node_modules/
build/
.babelrc
.eslintrc
.gitattributes
.editorconfig
.gitignore
*.log
.tmp
.DS_Store
.idea
Copy the code

Release operation

npm publish
Copy the code

Bug, WTF, 403 appears

$ npm publish
npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! no_perms Private mode enable, only admin can publish this module: @ctt/tt-utils

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/everlose/.npm/_logs/2017-11-17T06_30_52_054Z-debug.log
Copy the code

Oh, I just remembered, I once changed the source to Taobao, of course, there is no permission to post things on the website, so I run a command to switch back to NPM official website source

# NPM config set registry http://www.npmjs.org $NRM use NPM registry has been set to: https://registry.npmjs.org/Copy the code

NPM publish again

$ npm publish
npm ERR! code ENEEDAUTH
npm ERR! need auth auth required for publishing
npm ERR! need auth You need to authorize this machine using `npm adduser`

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/everlose/.npm/_logs/2017-11-17T06_36_56_539Z-debug.log
Copy the code

I forgot to mention that you need to register your account on the official NPM website to send it. Please check the steps of registration by yourself. I already have an account, so I add it on the local NPM

$ npm addUser
Username: everlose
Password:
Email: (this IS public) [email protected]
Logged in as everlose on https://registry.npmjs.org/.
Copy the code
$NPM publish + [email protected]Copy the code

Ok released successfully, the address here is the source of NPM official website is relatively slow to download, taobao source is about 10 minutes to synchronize the NPM official website.

You can build your own VUE project to reference it, as it is used in business projects

import Vue from 'vue'
import ttUtils from 'tt-utils'

Vue.use(ttUtils.formatTime);
Copy the code

To optimize the

SRC /main.js is written in ES6 syntax. If you don’t use ES6 in your business project, you’re going to have to compile a copy of your code, compress it and make it available.

So you need to introduce webpack packaging, blah, blah, code.

webpack.release.js

Add a copy of webpack.release.js as follows:

module.exports = {
    entry: ['./src/main.js'],
    output: {
        filename: './bundle/tt-utils.js',
        library: 'ttUtils',
        libraryTarget: 'umd'
    },
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                loader: ['babel-loader', 'eslint-loader'],
                enforce: 'pre'
            }
        ]
    }
};
Copy the code

SRC source code Babel is translated into esLint syntax and output as bundle/ ttutils.js.

We just need to use es6 to write the code, compile it into UMD and hand it over to Webpack. For details about libraryTarget, you can see the Webpack Chinese document.

webpack.release.min.js

Similar to the above

module.exports = {
    entry: ['./src/main.js'],
    output: {
        filename: './bundle/tt-utils.min.js',
        library: 'ttUtils',
        libraryTarget: 'umd'
    },
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                loader: ['babel-loader', 'eslint-loader'],
                enforce: 'pre'
            }
        ]
    }
};

Copy the code

package.json

You need to modify the main entry and add a release command. Don’t forget to update the version

. "Version" : "1.0.1", "main" : "bundle/tt - utils. Min. Js",... "scripts": { ... "release": "webpack --config build/webpack.release.js && webpack -p --config build/webpack.release.min.js" } ...Copy the code

If you run the following command, you will see two more files in the bundle folder.

$NPM run release > [email protected] release/Users/everlose/workspace/lot/tt - utils > webpack - config build/webpack.release.js && webpack -p --config build/webpack.release.min.js Hash: 1ab049d6a055a193197c Version: Webpack 3.8.1 Time: 1738ms...Copy the code

release

$NPM publish + [email protected]Copy the code

The results of

You can see our library introduced in other test items checked out locally, node_modules/tt-utils as follows

.
|____.eslintignore
|____.eslintrc.js
|____.postcssrc.js
|____bundle
| |____tt-utils.js
| |____tt-utils.min.js
|____index.html
|____package.json
|____README.md
|____src
| |____formatTime.js
| |____main.js
Copy the code

The package.json main entry is set to bundle/tt-utils.min.js. If the error is detected during debugging, simply change it to SRC /main.js.

This code is on TAG V0.0.3.

I found that every two months looking back at his former code will feel good silly force, only by constantly update their latest experience code to their satisfaction, so as of now, the code without any test, one day feel bad function to write a long period, to reconstruct the, no test is very easy to hit the pit, so the next analysis how to write a single measurement.

Previous article: Preliminary construction of the project

Next: Single test writing