内容简介：没有发布过npm包的同学，可能会对NPM对开发有一种蜜汁敬畏，觉得这是一个很高大上的东西。甚至有次面试，面试官问我有没有发过npm包，当时只用过还没写过，我想应该挺难的，就小声说了没有，然后就让我回去了o(╯□╰)o。其实，在现在的我看来，npm包就是一个我们平时经常写的一个export出来的模块而已，只不过跟其它业务代码耦合性低，具有较高的独立性。
没有发布过npm包的同学，可能会对NPM对开发有一种蜜汁敬畏，觉得这是一个很高大上的东西。甚至有次面试，面试官问我有没有发过npm包，当时只用过还没写过，我想应该挺难的，就小声说了没有，然后就让我回去了o(╯□╰)o。
其实，在现在的我看来，npm包就是一个我们平时经常写的一个export出来的模块而已，只不过跟其它业务代码耦合性低，具有较高的独立性。
当然，要发布一个npm包，除了写的模块组件外，还需要做一些基础的包装工作。
下面我就以最近开发的react-loading组件为例
源码地址 ，如果对你有帮助的话希望不要吝啬你的 Star
本文主要记录一下如何开发react组件(以react-loding为例)，并在 npm 上发布。废话不多说，进入正题
创建组件
新建项目仓库并初始化
在github上新建一个仓库，名字可以自己取。确保你创建的组件名称没有在 npm 上被使用过， 这里我们用 wsm-loading作为示例。打开编辑器将项目拉到自己本地并初始化
git clone https://github.com/xxx/wsm-loading.git cd wsm-loading npm init
运行npm init问题提示列表可以根据自己的个人爱好填写，也可以采取默认的选项。
安装项目的依赖
我么需要开发的是一个React的loading组件，所以我们要先在项目中安装react依赖
npm i react react-dom -D
我们的项目将通过webpack4进行构建，安装项目所需的webpack依赖
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader babel-core babel-loader babel-preset-env babel-preset-react -D
在项目中我们经常会用到scss作为css的编译，因此我们在安装webpack
npm install sass sass-loader node-sass webpack -D
这时上面安装的依赖已经被添加到根目录下的 package.json中了，接下来我们添加一个 start的脚本，用于启动我们本地开发的服务器， start如下：
{
"name": "wsm-loading",
"version": "0.0.1",
"description": "这是一个react-loading组件",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development",
},
开发loading组件
现在让在我们的项目中创建组件和示例代码目录，目录树结构如下
├── examples // 示例代码存放目录 │ └── src ├── node_modules ├── package.json └── src // 组件源代码和样式存放目录 └── .babelrc // es6及jsx语法编译 └── .gitignore // git提交管理 └── package-lock.json └── package.json └── webpack.config.js webpack配置
lodaing组件接收两个props，一个size控制loading的大小，一个color控制loading的颜色
/*** src/index.js ***/
import React, { Component } from "react";
import "./index.scss";
export default class MyComponent extends Component {
render() {
const { color, size } = this.props;
const sizeStyle = {
width: `${size}px`,
height: `${size}px`
};
const colorStyle = {
border: `1px solid ${color}`,
borderColor: `${color} transparent transparent transparent`
};
const ringStyle = Object.assign({}, colorStyle, sizeStyle);
return (
<div className="loading" style={sizeStyle}>
<div className="loading__ring" style={ringStyle} />
<div className="loading__ring" style={ringStyle} />
<div className="loading__ring" style={ringStyle} />
</div>
);
}
}
MyComponent.defaultProps = {
size: '36',
color: '#000'
}
loading组件的样式这里就不给了，可以直接从我的代码库中复制到你的项目里 css 。
接下来我们添加一个演示demo
<!-- examples/src/index.html --> <html> <head> <title>My Component Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <div id="root"></div> </body> </html>
/*** examples/src/index.js ***/
import React from 'react';
import { render} from 'react-dom';
import MyComponent from '../../src';
const App = () => (
<MyComponent size='36' color='red' />
);
render(<App />, document.getElementById("root"));
loading组件优化
以上就完成了一个基本的loading组件，但是我们还有一个疑问，就是现在引入的loading是在类名为root的元素之中，而一些被广泛使用的UI框架中的loading组件确实在body层，无论你在哪里引入，这样就可以防止loading组件受到父组件的样式的干扰。
我们平时普通的组件的html结构如上图，可见我们的loading是嵌套在我们的主体root元素中的。在仔细看下面这张图。
想要实现这种效果，我们必须得先了解React自带的特性：Portals(传送门)。这个特性是在16版本之后添加的。
我们哎src目录下新建一个newPortal/newPortal.js文件
import React from 'react';
import ReactDOM from 'react-dom';
class NewPortal extends React.Component {
constructor(props) {
super(props)
this.node = document.createElement('div');
document.body.appendChild(this.node);
}
render() {
const { children } = this.props;
return ReactDOM.createPortal(
children,
this.node,
);
}
}
export default NewPortal
将其引入到我们的loading组件中
import NewPortal from './newPortal/newPortal'
并对组件进行一层包裹
<NewPortal>
<div className="loading" style={sizeStyle}>
<div className="loading__ring" style={ringStyle} />
<div className="loading__ring" style={ringStyle} />
<div className="loading__ring" style={ringStyle} />
</div>
</NewPortal>
这里作者是参考 这篇文章 对组件进行优化的。大家感兴趣可以去了解下。
配置webpack
接下来配置 webpack, 在项目根路径下创建 webpack.config.js文件。关于webpack配置不太了解或不熟悉的可以参考我之前之篇文章 webpack详细配置 ，这里讲不在一一讲解。
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
template: path.join(__dirname, "examples/src/index.html"),
filename: "./index.html"
});
module.exports = {
entry: path.join(__dirname, "examples/src/index.js"),
output: {
path: path.join(__dirname, "examples/dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: "babel-loader",
exclude: /node_modules/
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
}
]
},
plugins: [htmlWebpackPlugin],
resolve: {
extensions: [".js", ".jsx"]
},
devServer: {
port: 3001
}
};
配置babelrc
最后需要指定 Babel 需要对哪些文件进行编译，毫无疑问 React 中使用的 JSX 文件需要被编译，让它转换成被主流浏览器都支持的 ES5 ,通用的配置也很简单，只需要添加一对 presets,在项目根目录下添加文件.babelrc
{
"presets": ["env", "react"]
}
接下来运行 demo
npm start
启动完成后打开浏览器输入 http://localhost :3001，你将会在页面上看到你写的组件，你可以修改你的代码并保存，页面将会自动刷新，我们的开发环境已经处于监控模式
发布到npm上
我们要发布被 babel 编译且被压缩后的版本，要让没有使用 babel 的项目也能够正常的使用，比如不能出现 JSX 语法。
首先需要安装 babel cli
npm i babel-cli -D
现在我们添加 transpile脚本，以便使用 Babel 编译我们的源代码，同时拷贝一些静态文件(如：css 文件)到目标打包目录dist下
同时指定被编译后的版本为组件的主入口，更改后的 package.json如下
{
"name": "test",
"version": "1.0.0",
"description": "ceshi",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development",
"transpile": "babel src -d dist --copy-files"
},
尝试编译
npm run transpile
最后让我们在项目的根目录下添加.npmignore文件，告诉 npm，我们项目中哪些文件和文件夹是在发布的包中被忽略掉的
# .npmignore src examples .babelrc .gitignore webpack.config.js
发布我们的组件到 npm 上
npm publish
提交npm之前需要去 npm 上开通自己的账号，并验证邮箱，这样才能正常的提交上去。在终端使用npm login登陆自己的信息
将代码上传到git
项目上传到git之前，我们需要配置下.gitignore，在项目的根目录下添加.npmignore文件
# .gitignore node_modules dist
这样我们上传时，不会上传node_modules和dist的目录
git add . git commit -m 'react-loading组件' git push
后语
当我们不停的陷于业务代码的开发中，何不尝抽出一点时间来做点自己喜欢做的事呢，比如将自己的业务组件抽出来做成一个npm，开源组件库不仅可以提高自己还能接触到原来接触不到东西。这只是一个简单的教程，希望能对你有所启发。
感谢你的阅读！
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- Serverless 组件开发尝试：全局变量组件和单独部署组件
- UI组件库从1到N开发心得-组件篇
- PJBreedsViewController 组件开发总结
- PJPickerView 组件开发总结
- Vue组件开发
- Laravel 后台开发常用组件
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Big Java Late Objects
Horstmann, Cay S. / 2012-2 / 896.00元
The introductory programming course is difficult. Many students fail to succeed or have trouble in the course because they don't understand the material and do not practice programming sufficiently. ......一起来看看 《Big Java Late Objects》 这本书的介绍吧!
