01-custom-library-npm

Dependencies

Maintainers

Versions

Alerts

File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

01-custom-library-npm

```js npm init -y npm i webpack webpack-cli lodash -D ``` #### 2）配置webpack * 将项目中使用lodash也打包进项目中，增大了项目的体积（不推荐） ```js // webpack.config.js const path = require('path')

1.0.2

latest

npm

Version published: 2 years ago

Weekly downloads: 97; increased by3133.33%

Maintainers: 1

Install size: 78.1 kB

Created: 2 years ago

Weekly downloads

Readme

Source

1、项目搭建

1）项目初始化安装依赖

npm init -y
npm i webpack webpack-cli lodash -D

2）配置webpack

将项目中使用lodash也打包进项目中，增大了项目的体积（不推荐）

// webpack.config.js
const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    filename: 'webpack-numbers.js',
    library: {
      // library 向外暴露的对象名
      name: 'webpackNumbers',
      // 兼容不同的环境 CommonJS、AMD、Node.js 等
      type: 'umd',
    },
  },
}

将lodash等第三方包外部化，由用户安装（推荐）

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    filename: 'webpack-numbers.js',
    library: {
      // library 向外暴露的对象名
      name: 'webpackNumbers',
      // 兼容不同的环境 CommonJS、AMD、Node.js 等
      type: 'umd',
    },
  },

  // 外部扩展：https://webpack.docschina.org/configuration/externals/#externals
  externals: {
    lodash: {
      commonjs: 'lodash',
      commonjs2: 'lodash',
      amd: 'lodash',
      root: '_',
    },
  },
}

3）配置npm script并打包构建

"build": "webpack --config webpack.config.js"

同时将package.json文件中main设置为打包构建的文件

"main": "dist/webpack-numbers.js",

2、发布流程

1）将npm的registry设置为官方的仓库（我们需要将包发布到官方仓库）

不能发布到taobao，taobao镜像是只读镜像，会发布失败
若要发布的私服，需要将仓库地址设置为私服地址

npm config get registry

// 发布library需要使用官方仓库
npm config set registry https://registry.npmjs.org
npm config set registry https://registry.npm.taobao.org

2）在终端中登录npm

npm login输入用户名、密码和邮箱登录npm

3）发布library到npm

使用命令：npm publish

npm logout //登出

// 如果不知道当前登录的账号可以用who命令查看身份：
npm who am i

// 发布的包在72小时内是可以删除的
npm unpublish  <pkg>[@<version>]
npm unpublish 01-custom-library-npm@1.0.1

3、更新包

1、修改完包的代码后，还需要更新下package.json中的version（不能和之前的版本相同）
2、已经登录过了，只需使用发布命令npm publish更新包

4、发布注意问题

1、必须将registry设置为官方仓库，否则发布失败
2、每次修改后重新发布，需要修改package.json中的版本号

5、测试

CommonJS：在test文件夹下创建test.js，可以使用node去运行代码

// test.js
const webpackNumbers = require('../dist/webpack-numbers')

console.log(webpackNumbers.numToWord(3));

script 标签测试：在test文件夹下创建index.html

<body>
  <script src="../dist/webpack-numbers.js"></script>
  <script>
    console.log(webpackNumbers);
  </script>
</body>

5、webpack支持es模块引入

FAQs

What is 01-custom-library-npm?

Is 01-custom-library-npm popular?

Is 01-custom-library-npm well maintained?

Last updated on 28 Feb 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install