The preparatory work

Node and NPM are definitely needed, but we’ll skip these

Operation process

Code specification

First go to Github to create a new warehouse, and then clone to the local, our main working environment here ~

Then go to NPM and register an account. portal

After registration, we enter NPM login to login. Please remember to verify your email address before login, otherwise it cannot be published later.

Here’s our source code, and unlike before, we need to do some processing.

(function (global, name, factory) {
    "use strict";

    if (typeof exports === 'object' && typeof module! = ='undefined') {
        module.exports = factory();
    } else if (typeof define === 'function' && (define.amd || define.cmd)) {
        define(factory);
    } else {
        global[name] = factory.apply(this);
    }
}(this."Project Name".function () {
    // logic writing
}));
Copy the code

Export our code as module.exports if the environment supports commonJS specification. Amd and CMD also define the corresponding export mode. By defining our code on the Window object, we can call our code logic directly by accessing the window member variable corresponding to the project name

For example, my js library will eventually return MyModule, so we’ll write MyModule in the project name and import it into the environment to reference our object window.myModule.

If we init it, we’ll see that there are many more options than before. We’ll just fill them out as prompted, and then we’ll generate package.json.

Code compression and obfuscation

Next, we put our files into the SRC directory in the root folder. In order to facilitate the use of development, we need to use the packaging tool for compression confusion. I referred to the compression packaging method of other modules, so I chose gulp to perform the compression code work.

Create the gulpfile.js file in the root directory, install the gulp gulp-uglify gulp-rename package in sequence, and enter the following codes in the gulp.js file

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

gulp.task('default'.function () {
  gulp.src('src/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/'))
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest('dist/'))});Copy the code

After entering the “gulp” command, we will see that the code has been successfully packaged into the dist folder. Here’s the structure in our folder

Finishing touches

By the way, we also need to write LISENCE file, which I created manually. This file is the developer’s open source declaration, which specifies the scope of application of the library. I chose MIT, and the specific scope of the open source declaration can be found here.

The Publish time ~!

If the message is successful, our library has been published to NPM. We can try to install our own package in other projects and use it as much as we like

Tips on pit

First of all, we need to verify email. This step is easy to forget, because NPM website does not have a separate page to ask you to verify, but only has a narrow notification bar on the front page.

Dist /xxx.js or dist/xxx.min.js; otherwise, we will report dependency error.

Finally, if we want to update the code, remember to update our version number in package.json. If the version number is the same, the release will fail.

extension

Github has already integrated the continuous integration service Travis. Just add a.travis. Yml file to your project, and after the next push, Travis will periodically run NPM tests to test your project (in this case, mocha for test management). You can also easily know the current status of your project by displaying it in readme.md.

It should be mentioned here that if we want to make our code more perfect, the first step is to write test cases and use Mocha to complete them (because I have no contact with them, so I have not written use cases for the time being, do not copy me QAQ). The second point is to write a readme. This file is presented as a document on the Github repository home page and the NPM codebase display page for easy use and reference.

Finally, we used Git tool to submit a copy of the code to the repository, so that interested people could submit the issue and help fork the code, and improve our code together

conclusion

My experience above and some of the code and references refer to publishing projects to NPM

The library section I submitted references 15 commonly used javascript regular expressions

By the way, in the end, I have github, my personal blog, and the regex library that I submitted

Hope this article can provide you with useful things ~