跟我一起写一个hello-world react组件并发布到npm
第一步：初始化我们的配置
$ mkdir react-hello-world
$ cd react-hello-world/
$ npm init -y
修改我们的package.json文件
//package.json
{
"name": "react-hello-world",
"version": "1.0.0",
"description": "",
"main": "dist/bundle.js",
"files": [
"dist"
],
"scripts": {
"build": "webpack --env.NODE_ENV=production",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC"
}
接下来安装相关依赖
npm i react react-dom
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react webpack webpack-dev-server webpack-cli html-webpack-plugin webpack-node-externals css-loader style-loader
接下来配置 webpack。这里分成两份配置，一份用于开发环境(development)，一份用于单独打包组件用于生产环境(production)。
在开发环境下，我们需要搭建一个完整的项目，让我们可以开发组件，并可以将其引入其他组件，渲染到浏览器中看到效果。
同时我们也需要一些开发工具的支持，比如 HMR（hot module reloa） 组件热更新和详细的报错信息。
在生产环境下，只需要打包组件本身，不包括工程里面的其他组件。同时我们需要压缩文件体积，尽量减小组件打包之后的体积。
Webpack 配置
下面是我们的 webpack 开发配置
//dev.config.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../dist'),
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
devServer: {
contentBase: './dist'
},
plugins: [
new htmlWebpackPlugin({
template: 'public/index.html'
})
],
};
//prod.config.js
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
mode: 'production',
entry: './src/helloWorld.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../dist'),
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
externals: [nodeExternals()]
};
//webpack.config.js
module.exports = (env) => {
if (env && env.NODE_ENV === 'production') {
return require('./webpack/prod.config.js');
} else {
return require('./webpack/dev.config.js');
}
}
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
//public/index.html
<!DOCTYPE html>
<html>
<body>
<div id="app" />
</body>
</html>
完成以上配置以后，我们可以在 src 文件夹里面开发自己组件。
src内的内容如下
//app.js
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';
ReactDOM.render(<HelloWorld/>,document.getElementById('app'));
//helloWorld.css
.hello-world {
font-size: 40px;
background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
-webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
-webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
font-weight: bold;
}
//HelloWorld.js
import React,{ Component } from 'react';
import './HelloWorld.css';
class HelloWorld extends Component{
constructor(props){
super(props);
this.state={
value:'HelloWorld'
}
}
render(){
const { value } = this.state;
return(
<div className="hello-world">
{value}
</div>
)
}
}
export default HelloWorld;
//index.js
import HelloWorld from './HelloWorld';
export default HelloWorld;
运行 npm run dev，让 webpack-dev-server 渲染到浏览器中，实时看到效果
打包并验证
打包组件，只需要运行 npm run build 就可以了。
接下来可以通过 npm link 把打包之后的组件引入到 global node_modules 中，然后在验证 demo 中再通过 npm link HelloWorld 引入这个组件，并验证是否符合预期。
接下来 demo 里面就可以直接 “import HelloWorld from ''react-hello-world”
组件发布到npm是：npm publish
我使用npm publish发包发现并没有发布，这个是要登录npm.org进行注册
使用npm publish进行发布
上面是我遇到的一个报错，说明hello-world组件已经被注册过了，我得选一个没有人发布的名字呢
下面是发布成功的标志
可以在npm上面搜到react-hello-dimple
24小时之后才能够搜到我呢
关于撤销包和删除包博客：https://www.cnblogs.com/penghuwan/p/6973702.html#_label3_0
关于发包博客：https://www.jianshu.com/p/db6113c94dbc
关于发包博客：https://blog.csdn.net/qq_24956515/article/details/80514262
跟我一起写一个hello-world react组件并发布到npm的更多相关文章
- 如何创建一个前端 React 组件并发布到 NPM
首先npm文档摆在这里: https://www.npmjs.cn/ 参考组件 https://github.com/rakuten-rex/rex-dropdownhttps://www.npmjs ...
- 如何手写一个js工具库？同时发布到npm上
自从工作以来,写项目的时候经常需要手写一些方法和引入一些js库 JS基础又十分重要,于是就萌生出自己创建一个JS工具库并发布到npm上的想法 于是就创建了一个名为learnjts的项目,在空余时间也写 ...
- 手写一个简单的starter组件
spring-boot中有很多第三方包,都封装成starter组件,在maven中引用后,启动springBoot项目时会自动装配到spring ioc容器中. 思考: 为什么我们springBoot ...
- 我想写一个前端开发工具（一）:在npm发布模块
有必要说说我为什么要开始写这个,正文从下面的第一条开始 我最近忙于公司的项目,一直没有抽出时间来写文章.本来想每个月写一片文章,保质保量,无奈上个月没有坚持. 这段时间有点忙,主要是由于公司业务调整, ...
- Tsx写一个通用的button组件
一年又要到年底了,vue3.0都已经出来了,我们也不能一直还停留在过去的js中,是时候学习并且在项目中使用一下Ts了. 如果说jsx是基于js的话,那么tsx就是基于typescript的 废话也不多 ...
- Vue学习—Vue写一个图片轮播组件
1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...
- 如何写一个全局的 Notice 组件？
下面将会实现这样的效果: 组件动态创建脚本: NotificationBanner.js import Vue from "vue"; import Notice from &qu ...
- python安装及写一个简单的验证码组件（配合node）
1.安装Python 到官网下载响应系统的版本(这里以windows为例):https://www.python.org/downloads/windows/ 然后就是不断地"下一步&quo ...
- react学习笔记（二）编写第一个react组件
继续上一节课的内容,打开App.js:会看到如下代码: import React, { Component } from 'react'; //在此文件中引用React,以及reat的组件类 imp ...
随机推荐
- Django的一些操作与视图函数
一 . Django的安装 pip install django==1.14.6 # 后面的数字是django的版本 二 . 通过命令行(cmd)来创建Django项目 1. 切换到保存项目的文件夹 ...
- python数据结构与算法第十七天【概率算法】
1. 古典概率 例如:麻将开始摸到的14张牌中无将的概率,两张相同的牌即为将,则有: 所有的情况:从136张牌中选出14张牌,为C136-14 无将的情况:将不同的牌分组,共有34组,依次取14张牌, ...
- web跨域请求
第一种情况: 1. sina.com=====>baidu.com/xxx.jsp 也就是前面的域名不相同,(url第三根斜杠之前的内容,也就是主机) 2:localhost =====> ...
- Essential Phone刷机教程
安装fastboot驱动(Essential-PH1-WindowsDrivers) 下载ADB刷机指令工具:platform-tools(ADB): 进入开发者选项,打开 USB 调试,OEM解锁选 ...
- Coalesce (MS SQL Server)——取指定内容（列）中第一个不为空的值
oalesce 获得参数中第一个不为空的表达式. 语法: COALESCE ( expression [ ,...n ] ) 例子:CREATE TABLE wages ...
- Web API Help Page Install WebApiTestClient 简单的测试客户端
第一步: 安装the Test Client package 从NuGet安装包管理安装WebApiTestClient . 确保选择 “Include Prerelease” 然后输入 “WebAp ...
- hdu 4578 Transformation 线段树多种操作裸题
自己写了一个带结构体的WA了7.8次 但是测了几组小数据都对..感觉问题应该出在模运算那里.写完这波题解去对拍一下. 以后线段树绝不写struct!一般的struct都带上l,r 但是一条线段的长度确 ...
- Linux系统下手把手完成无人值守安装服务
刚入职的运维新手经常会被要求去做一些安装操作系统的工作,如果按照用镜像光盘安装操作系统,效率会相当低下.那么如何提升效率,搭建出一套可以批量安装Linux系统的无人值守的安装系统? PXE+TFTP+ ...
- BZOJ1835 [ZJOI2010] 基站选址 【动态规划】【线段树】
题目分析: 首先想一个DP方程,令f[m][n]表示当前在前n个村庄选了m个基站,且第m个基站放在n处的最小值,转移可以枚举上一个放基站的村庄,然后计算两个村庄之间的代价. 仔细思考两个基站之间村庄的 ...
- BZOJ1001 洛谷4001 [BJOI2006]狼抓兔子 题解
题目 这个题目有多种解法,这个题也是一个比较经典的题了,正是因为他的多样的做法,这个题主要难在建图和优化,因为这是一个网格图,所以spfa肯定过不去,所以用最短路解法的话,只能用dij,而网络流也是要 ...