如何将 ES6 React 模块发布到 NPM

2019-09-27 08:00:00 · 飞浪

介绍在本指南中，我们将了解如何将自定义React组件编写为npm包并发布。入门我们可以从一个空目录开始，并将其命名为“my-react-app”。然后，我们将在此目

介绍

在本指南中，我们将了解如何将自定义 React 组件编写为 npm 包并发布。

入门

我们可以从一个空目录开始，并将其命名为“my-react-app”。然后，我们将在此目录中运行一些命令。让我们从运行 npm init 开始。控制台将提示我们提供一些输入。输入相同的内容并继续按 ENTER，直到它完成询问信息。

接下来，我们将安装应用程序的依赖项。

      npm install --save react webpack

由于我们正在编写 React 组件，因此我们需要 React 库以及 Webpack 将 ES6/JSX 转换为 ES5 JavaScript 代码。

接下来，我们将安装 devDependencies

      npm install -D webpack-cli babel-cli babel-core babel-loader babel-plugin-transform-object-rest-spread babel-plugin-transform-react-jsx babel-preset-env
    

当我们的包发布后，如果有人想要使用它，他们只需运行 npm install my-react-app，所有依赖项就会自动安装。但是，“devDependencies”不会安装。

然后我们将更新 package.json 以将 React 设置为 peerDependencies。“peerDependencies”是特殊的依赖项，仅在我们发布包时才会出现。声明“peerDependencies”意味着我们的包需要一个依赖项版本，该版本与将使用我们包的人的版本完全相同。在发布 React 模块方面，这非常有用，因为我们可以只拥有一个“react-dom”副本，并且安装我们包的人将使用相同的版本。

我们将“main”或入口点设置为 index.js，并设置“build”和“start”脚本。此外，一旦我们的代码从 ES6 或 JSX 代码转换为 ES5 代码（因为这是浏览器广泛支持的），这应该与 Webpack 创建的输出文件名相匹配。

我们的 package.json 看起来是这样的：

      {
  "name": "my-react-app",
  "version": "1.0.0",
  "description": "How to publish ES6 React modules to NPM!",
  "main": "./index.js",
  "peerDependencies": {
    "react": "^16.4.0"
  },
  "scripts": {
	"start": "webpack --watch",
	"build": "webpack",
	"test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Pluralsight",
  "license": "ISC",
  "keywords": [
    "promise",
    "async",
    "Virtual reality (VR)",
    "Augmented reality (AR)"
  ],
  "dependencies": {
	"react": "^16.8.6",
	"webpack": "^4.29.6"
  },
  "devDependencies": {
	"babel-cli": "^6.26.0",
	"babel-core": "^6.26.3",
	"babel-loader": "^8.0.5",
	"babel-plugin-transform-object-rest-spread": "^6.26.0",
	"babel-plugin-transform-react-jsx": "^6.24.1",
	"babel-preset-env": "^1.7.0",
	"webpack-cli": "^3.3.0"
  }
}
    

这里的“keywords”属性是一个带有字符串值的关键字数组。它可以是用于描述我们模块的关键字集合。当我们的包发布时，它确实有助于识别我们的包。

然后我们需要配置 webpack 来转译我们的代码。为此，我们将更新 webpack.config.js 和 .babelrc 文件，如下所示：

      // webpack.config.js
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }, {
        test: /\.*css$/,
        use : ExtractTextPlugin.extract({
            fallback : 'style-loader',
            use : [
                'css-loader',
                'sass-loader'
            ]
        })
       },
    ]
  },
  externals: {
    'react': 'commonjs react' 
  }
};
    

将 output => libraryTarget 设置为“commonjs2”很重要。这会将输出文件中的 module.exports 属性设置为 React 组件。这对于将我们的自定义组件用作 npm 包是必需的。

接下来我们设置 .babelrc 如下：

      {
    "presets": ["env"],
    "plugins": [
        "transform-object-rest-spread",
        "transform-react-jsx"
    ]
}
    

这用于配置 Babel 将我们自定义的 React 组件 ES6/JSX 代码转换为 ES5 所使用的预设。

如果你查看上面的 webpack.config.js 文件，你会注意到我们正在配置 webpack 以在 modules.rules 部分中的所有 *.js 文件上应用“babel-loader”。

我们还将创建如下的 .npmignore 文件：

      src
demo
.babelrc
webpack.config.js
    

通过添加上述内容，我们只需指示 npm cli 在发布到 npm 包存储库时应排除哪些文件。它本质上有助于保持我们的包干净，因为它只包含在生产中运行我们的自定义 React 组件所需的文件。您会注意到这里没有 node_modules 条目，因为它会被 NPM 自动忽略。

创建一个基本的 React 组件

让我们创建一个非常基本的组件。我们将创建一个新的“src”文件夹，并在其中创建 index.js，它将是 webpack 的入口点。

该组件的外观如下：

      import React from "react";

const MyReactApp = props => {
  const { width, height, bgColor, content } = props;
  return (
    <div
      style = {{
        width: width || 200,
        height: height || 200,
        backgroundColor: bgColor || "green",
		color: color || "black"
      }}
    >
      {content}
    </div>
  );
};

export default MyReactApp;
    

我们运行 npm start 并验证组件没有错误。现在让我们在实际发布组件之前将其作为 npm 包进行测试。为此，我们将在 package.json 中指定包的名称。我们还可以设置作者和 git repo。如果您没有 npm 帐户，可以通过导航到https://www.npmjs.com/signup进行注册。注册是免费的。

本地测试我们的包

现在我们已经创建了上面创建的 npm 包。让我们测试一下。为此，我们将在项目文件夹中运行命令 npm run build。这将构建我们的自定义组件。然后我们运行 npm link，它将我们的包链接到 npm 依赖项。这将允许我们在其他项目中使用该包，但目前仅限于您的本地机器。要开始在任何其他 React 应用程序中使用，我们只需运行 npm link my-react-app。然后我们就可以像任何其他依赖项一样导入该包。以下是代码：

      import React, { Component } from "react";
import MyReactApp from "react-box";

class App extends Component {
  render() {
    return (
        <MyReactApp height={150} bgColor="black" color="white" text="How to publish ES6 React modules to NPM!" />
    );
  }
}

export default App;
    

在上面的例子中，我们只是将高度、背景颜色、颜色和文本的值传递给我们的组件“MyReactApp”，它只是根据收到的参数渲染一个“div”元素。

我们可以使用 npm run build 来构建我们的项目并查看更改。

发布我们的包

一旦我们完成本地测试并看到组件按预期工作，我们就可以发布它。为此，我们将导航到我们的项目文件夹并运行“npm login”。我们将使用我们的凭据登录。身份验证完成后，我们只需运行命令“npm publish”。

就这样。我们的 React 组件现已上线，任何人都可以使用。

我们可以在npm 网站上查看我们发布的 React 组件。

要从命令行查看有关我们的包的元数据信息，我们只需运行 npm info PACKAGE_NAME。

如果我们想要更新我们的组件，我们可以在 package.json 中增加版本号（主要 / 次要 / 补丁取决于更新本身），然后再次运行 npm publish。

我们还可以使用以下命令自动更新版本，而不必每次有更新时手动更新它们：

      npm version patch
npm version minor
npm version major
    

上述命令实际上是基于语义版本控制或 semver。

准备发布时，还有几点需要记住：从 package.json 中删除属性“private”：true（如果在任何时候添加了该属性）。还要从“dependencies”对象中删除 react、react-dom 和 react-scripts，并将它们移至“devDependencies”。我们可以将 react 和 react-dom 添加到“peerDependencies”。最后，将以下内容添加到 package.json：

      "files": [ "dist", "README.md" ],
"repository": {
	"type": "git",
	"url": "YOUR_GIT_REPO_URL"
}
    

“repository” 字段将包含指向 Github 上的 repo 的链接。我们还可以添加一个“bug”字段，其中包含指向我们的 Github 问题页面的链接。这对于使用我们软件包的人很有用，因为他们可以在这里报告错误，也可以请求添加他们可能需要的任何新功能。

最后，删除默认的 README.md 文件并添加一个包含有关组件的一些信息的新文件。它看起来可能如下所示：

      my-react-app
A library of custom React components created using create-react-app
Installation
To install, run the following command:
npm install my-react-app
    

结论

至此，我们学习了如何设置新的 React 项目，如何将 React 组件编写为 npm 包，在本地验证组件并发布。我们还了解了 package.json 中各种属性（例如关键字、依赖项、devDependencies、peerDependencies 和存储库字段）的重要性。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何将 ES6 React 模块发布到 NPM

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

{ "name": "my-react-app", "version": "1.0.0", "description": "How to publish ES6 React modules to NPM!", "main": "./index.js", "peerDependencies": { "react": "^16.4.0" }, "scripts": { "start": "webpack --watch", "build": "webpack", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Pluralsight", "license": "ISC", "keywords": [ "promise", "async", "Virtual reality (VR)", "Augmented reality (AR)" ], "dependencies": { "react": "^16.8.6", "webpack": "^4.29.6" }, "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.3", "babel-loader": "^8.0.5", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-react-jsx": "^6.24.1", "babel-preset-env": "^1.7.0", "webpack-cli": "^3.3.0" } }

// webpack.config.js var path = require('path'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: './index.js', output: { path: path.resolve(__dirname, 'build'), filename: 'index.js', libraryTarget: 'commonjs2' }, module: { rules: [ { test: /\.js$/, include: path.resolve(__dirname, 'src'), exclude: /(node_modules|bower_components|build)/, use: { loader: 'babel-loader', options: { presets: ['env'] } } }, { test: /\.*css$/, use : ExtractTextPlugin.extract({ fallback : 'style-loader', use : [ 'css-loader', 'sass-loader' ] }) }, ] }, externals: { 'react': 'commonjs react' } };

import React from "react"; const MyReactApp = props => { const { width, height, bgColor, content } = props; return ( <div style = {{ width: width || 200, height: height || 200, backgroundColor: bgColor || "green", color: color || "black" }} > {content} </div> ); }; export default MyReactApp;

import React, { Component } from "react"; import MyReactApp from "react-box"; class App extends Component { render() { return ( <MyReactApp height={150} bgColor="black" color="white" text="How to publish ES6 React modules to NPM!" /> ); } } export default App;