发布js插件zhen-chek（用来检测数据类型）到npm上

今天想到js本身是弱类型，在实际项目中很多时候需要数据类型检测。于是打算做一个判断数据类型的js插件，发布到npm上面。

基本思路：

1，输入参数，便返回数据类型，所有数据类型如下

   '[object String]': 'string',
    "[object Boolean]": "boolean",
    "[object Number]": 'number',
    "[object Null]": 'null',
    "[object Undefined]": "undefined",
    "[object Array]": 'array',
    '[object Object]': 'object',
    '[object Set]': 'set',
    '[object Map]': 'map',
    '[object Symbol]':'symbol',
    '[object Function]':'function',
    '[object RegExp]':'regExp',
    '[object Window]':'window',
    'NaN':'NaN'

使用的判断方法：Object.prototype.toString.call()

2，利用webpack作为工程化工具，webpack.config.js

var path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

var config = {
    mode: 'development',
    entry: [
        path.resolve(__dirname, './src/example.js')
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        libraryTarget: "umd",  //一套完整的规范 cmd  amd 
    },
    devServer: {
        contentBase: './dist'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        })

    ],
    optimization: {
        minimize: true,

        minimizer: [
          new UglifyJsPlugin({
            test: /\.js(\?.*)?$/i,
          }),
        ],
      }
};

module.exports = config;

package.js

{
  "name": "zhen-check",
  "version": "1.4.0",
  "description": "check type of data ",
  "main": "src/index.js",  // 注意这里是index的路径不要写为index.js
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --inline --progress --config webpack.config.js",
    "prod": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "html-webpack-plugin": "^3.2.0",
    "uglifyjs-webpack-plugin": "^2.1.3",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2",
    "zhen-check": "^1.4.0"
  }
}

 

然后，利用在命令行工具使用npm adduser 输出登录的账号和密码，然后使用npm publish发布。

以上完成。

开发过程中有几个注意事项：

1，之所以可以通过import的方式引入，是通过package.js文件的main连接的，所以main后面要写插件的导出文件

2，webpack.config.js配置文件里面，output的配置

  output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        libraryTarget: "umd",  //一套完整的规范 cmd  amd 
    }

libraryTarget 配置为umd。允许amd，cmd规则引入