怎样宣布你本身的React模块至NPM

2023年5月24日 104次阅读 来源: 飞翔的荷兰人

文章引见怎样建立宣布一个npm包，包含项目搭建、宣布流程、注意事项等。 演示代码GitHub地点

1. 初始化项目

起首在建立好的项目文件夹下面实行

npm init

依据对应提醒完成package.json文件初始化。

  • package name 为你建立的npm包的称号，在宣布后被装置运用即该名字，npm划定包名首字母须要为小写。如import App from 'your-module';
  • version 即为包版本，每次宣布前都须要更新包版本，否则会失利，包版本应当恪守语义化范例。语义化版本号分为三位0.0.0。主版本号：当举行了多数修改或许对api有很多不兼容修改时应当举行版本号晋级。次版本号：增加了部份特征或许优化时晋级该版本。订正号：当修改了项目bug或许小的修改时晋级该版本。
  • entry point 项目的进口途径，当用户运用包的时刻，会依据该进口也就是package.json的main中的途径来举行索引
  • git repository 关联的git堆栈
  • keywords 会在npm中展现你的项目关键字

2. 项目构建

开辟环境webpack.config.js设置

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'app.js'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {test: /\.css$/, loader: 'style-loader!css-loader'},
      {
        test: /\.(png|jpg|gif|svg)$/,  //对图片文件，运用 url-loader里的加载器处置惩罚
        loader: 'url-loader',
        options: {
          limit: 8192,   //限定图片文件字节，大于8KB则不天生base64 用途径援用替换（相当于file－loader）
          name: '[name].[ext]?[hash]' //文件名
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      template: './index.html',
    }),
    new webpack.HotModuleReplacementPlugin(), // 热更新插件
  ],
  devtool: 'inline-source-map', // map文件追踪毛病提醒
  devServer: {                  // 启动当地开辟的node效劳器环境（webpack-dev-server）
    port: 8080,                 // 端口
    contentBase: './dist',      // 开辟环境的效劳目次
    historyApiFallback: true,
    host: '0.0.0.0',
    inline: true,
    hot: true,
  },
};

在开辟环境中就是一些很罕见的设置，保证我们能够举行当地的组件模块开辟即可。

打包模块webpack.prd.js设置

const path = require('path');
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const NODE_ENV = process.env.NODE_ENV;
const prdWebpackConfig= {
  mode: 'production',
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    path: path.join(__dirname, 'lib'),
    filename: "chat-react.js",
    libraryTarget: 'commonjs2'  //模块输出体式格局
  },
  externals: {
    react: 'react' //打包时刻消除react
  },
  module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {test: /\.css$/, loader: 'style-loader!css-loader'},
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 8192,
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  plugins: []
};

if (NODE_ENV !== 'publish') {
  prdWebpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = prdWebpackConfig;

打包模块与我们写应用逻辑代码有些差别，由于大部份用户运用模块都不会去再对模块举行es5转换，一切我们宣布的模块也应当是已被转换以后的代码，而且须要供应模块的援用进口以及消除模块本身之外的代码。

  1. entry 在完成模块打包时，修改了项目的进口途径entry。设置打包的entry途径为该宣布模块的文件，而不是开辟环境中的项目进口。
  2. output path为天生的目次位置以及目次名，filename 为打包后的模块文件。libraryTarget 为天生模块的引入体式格局，由于我们写的react组件基础为模块化打包开辟体式格局，挑选运用commonjs2设置，末了打包会天生相符commonjs范例的模块，详细设置划定规矩可见output.libraryTarget
  3. externals 由于我们是基于react的组件，但是在完成打包的时刻假如将react也打包进去，库的体积就会变大，而且react库一般会在运用组件的时刻被外部引入，所以我们要消除react。externals 设置
  4. BundleAnalyzerPlugin 在非宣布敕令下打包时刻，我们能够用该插件检察一下打包完成的包体积大小。所以只需推断下在npm scripts中设置的NODE_ENV环境变量，按需运用该插件即可。
  5. mode 在webpack4中设置mode为production，会本身启用临盆环境的部份设置优化，此时UglifyJsPlugin紧缩插件也会启用，协助完成我们的library的代码紧缩。

3. 宣布前设置

1.宣布前须要准确设置package.json中的main内容，运用时会依据该内容自动索引模块内容

  "main": "lib/chat-react.js"

2.在宣布前我们须要完成打包，为了确保我们宣布的版本为编译完成后的版本，能够应用npm scripts中的prepublishOnly钩子。这个钩子能够保证我们在实行npm publish的前举行打包操纵。

  "scripts": {
    "prepublishOnly": "NODE_ENV='publish' npm run build"
  }

prepublish钩子也会在实行npm publish前触发该周期，我运用的是npm v5.5版本，在运用npm install的时刻prepublish周期也会被触发，翻到了一篇阮先生的文章，个中提到npm5版本时刻会改掉这一状况，prepublish将只在npm publish敕令之前运转，不过看起来跟预期不一致。在15年的npm官方议论issue里说未来可能会烧毁prepublish或许prepublishOnly某一个，不过翻看了官方npm script文档对两个钩子的用法都有申明，看起来是都保留了。

3.设置.npmignore，.npmignore的用法与.gitignore一致。由于我们在实行npm publish宣布敕令时会将项面前目今掉一切文件都宣布至npm，.npmignore能够疏忽掉我们不须要宣布都文件

node_modules
example
src
.babelrc
app.js
index.html
package-lock.json
webpack.config.js
webpack.prd.js

4.编写运用文档(readme)。为我们的模块组件编写运用文档是必不可少的，README.md运用的是markdown语法，记不住语法的小伙伴也能够运用我的在线markdown编辑器。

4. 完成宣布

宣布流程

  1. 起首注册你的npm帐号
  2. 敕令行实行npm login登录你的npm账号
  3. 进入你项目目次下npm publish即可完成宣布

回撤版本

假如你不测的宣布错了包，运用npm unpublish +包名即可删除该包。如：

npm unpublish chat-react

假如你想撤回指定版本，实行npm unpublish + 包名@版本号。如：

npm unpublish chat-react@1.0.0

Tips：npm为了保证包不会影响到运用者，宣布的版本只能在24小时内举行撤回。

文章代码演示GitHub地点

    原文作者：飞翔的荷兰人
    原文地址: https://segmentfault.com/a/1190000017938008
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞