前端专题之npm包

npm install nrm -g // 下载
nrm ls  // 查看所有源
nrm use <registry>
nrm add <registry> <url>
nrm del <registry>

npm init

npm install <package> -S/-D

1.touch webpack.config.js
2.vim webpack.config.js

module.exports = {
  entry: {
    test: './index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    libraryTarget: 'umd',
    library: 'test',
    libraryExport: 'default',
    umdNamedDefine: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['@babel/preset-env'],
            },
          },
        ],
      },
    ],
  },
}

mkdir src
cd src
touch index.js

module.exports = {
  entry: {
    test: './index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    libraryTarget: 'umd', // 将你的 library 暴露为所有的模块定义下都可运行的方式
    library: 'test', // 如果生成的输出文件，是在 HTML 页面中作为一个 script 标签引入，则变量 MyLibrary 将与入口文件的返回值绑定。
    libraryExport: 'default', // 导出的模块名称
    umdNamedDefine: true, // 当使用 libraryTarget: "umd" 时，设置 output.umdNamedDefine 为 true 将命名由 UMD 构建的 AMD 模块。否则将使用一个匿名的 define。
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['@babel/preset-env'],
            },
          },
        ],
      },
    ],
  },
}

{
  "name": "npmtestlkz",
  "version": "1.0.0",
  "main": "dist/test.js",
  "author": "likaizhu",
  "license": "MIT",
  "description": "a demo for test npm",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [
    "demoTest",
  ],
}

nrm use npm // 切换源
npm login // 登录
npm publish // 发布