react组件从搭建脚手架到在npm发布的步骤实现
最近公司给公司里架设了私有的npm仓库，相应地也需要一个用来发布react组件用的脚手架，在这个过程中又又又又复习了一下webpack，在这里分享下脚手架搭建的过程。
首先，我们预期的脚手架具有如下功能
- 开发组件时可以实时预览
- 对组件各种资源进行打包(js/css/图片等)
- 一键打包发布
1.创建项目
脚手架的名字暂时取react-simple-component-boilerplate。
首先创建一个新目录用于放我们的文件:
mkdir react-simple-component-boilerplate cd react-simple-component-boilerplate
使用npm命令创建一个项目
npm init
接下来会提示你输入项目的名称、版本号、作者等，也可以一路回车，稍后修改。
这一步完成后，你的项目文件夹里应该有一个package.json文件了，这个文件保存了我们项目和组件的各种信息。
接下来创建如下的目录结构
react-simple-component-boilerplate |-- config // webpack配置 |-- demo // 开发时预览用 |-- dist // 打包结果 |-- src // 源文件目录 | -- assets // 存放图片等媒体文件 | -- style // 存放样式，项目使用的是less来编写样式
2.安装依赖
既然我们要发布的是react组件，那依赖里肯定少不了react。
使用npm install安装下面的依赖
npm install react react-dom --save
打包工具选择的是webpack，下面是开发依赖，也需要一并安装
"devDependencies": {
// babel用于将你写的es6+的代码转换到es5
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0", // 用于支持class属性
"@babel/plugin-proposal-decorators": "^7.0.0", // 支持decorator
"@babel/plugin-transform-modules-commonjs": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0", // 自动polyfill es5不支持的api特性
"@babel/preset-env": "^7.0.0", // 根据目标环境来按需转码
"@babel/preset-react": "^7.0.0", // 让babel支持react语法
"babel-loader": "^8.0.0",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"html-loader": "^0.4.4",
"less-loader": "^4.1.0", // 使用less来编写样式
"mini-css-extract-plugin": "^0.5.0", // 将css提取成一个单独的文件
"style-loader": "^0.23.0",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2", // webpack4之后需要额外安装webpack-cli
"webpack-dev-server": "^3.1.14", // 开发时预览组件所用的服务，在文件变化时会自动刷新页面
"webpack-merge": "^4.1.4" // 用于合并webpack配置
},
3.编写组件
在/src目录下新建一个index.js，这就是我们组件的入口文件了。
如果项目中要使用图片、css等，分类放到assets、style文件夹下就好。
下面我们就在index.js中写一个简单的组件
/* src/index.js */
import React from 'react';
import './style/style.less'; // 使用less的情况
import testPng from './assets/test.png'; // 使用图片的情况
export default class MyComponent extends Component {
render(){
return (<div>A new Component</div>)
}
}
接下来，我们在/demo目录下新建index.html和demo.js这两个文件用于在开发组件时预览组件效果。
index.html内容如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="root"></div> <script src="demo.bundle.js"></script> </body> </html>
在demo.js中，我们要使用一下刚刚写的组件(位于/src/index.js)看一下效果，开发中这个demo.js文件会被打包成demo.bundle.js，就是在上面index.html中引用的js。
import React from 'react';
import ReactDom from 'react-dom';
import MyComponent from '../src/index'
const Demo = () => {
return <div>
<h1>组件预览：</h1>
<MyComponent />
</div>
}
ReactDom.render(<Demo />, document.getElementById('root'));
4.配置webpack和babel
4.1 配置webpack
在/config下我们建立三个webpack配置文件
- webpack.base.js
- webpack.config.dev.js // 开发时的配置
- webpack.config.prod.js // 打包发布时的配置
由于开发和发布打包时webpack的配置有一部分是公共而且重复的，我们把这部分的配置单独拿出来放到webpack.base.js中。
首先是公共配置webpack.base.js:
module.exports = {
module: {
rules: [
{ // 在webpack中使用babel需要babel-loader
test: /\.js?$/,
loader: 'babel-loader',
exclude: '/node_modules/',
},
{ // 用于加载组件或者css中使用的图片
test: /\.(jpg|jpeg|png|gif|cur|ico|svg)$/,
use: [{
loader: 'file-loader', options: {
name: "images/[name][hash:8].[ext]"
}
}]
}
]
}
}
下面是开发时所用的webpack配置，写在webpack.config.dev.js中
const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js'); // 引用公共的配置
const devConfig = {
entry: './demo/demo.js', // 入口文件
mode: 'development', // 打包为开发模式
output: {
filename: 'demo.bundle.js', // 输出的文件名称
path: path.resolve(__dirname, '../demo') // 输出的文件目录
},
devServer: { // 该字段用于配置webpack-dev-server
contentBase: path.join(__dirname, '../demo'),
compress: true,
port: 9000, // 端口9000
open: true // 自动打开浏览器
},
module: {
rules: [
{ // 编译less
test: /\.less$/,
exclude: '/node_modules/',
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'less-loader'
}]
},
]
},
}
module.exports = merge(devConfig, baseConfig); // 将baseConfig和devConfig合并为一个配置
需要注意的是，等会使用webpack-dev-sevrer启动开发服务时，并不会实际在demo文件夹下生成demo.bundle.js，打包好的文件是在内存中的，但并不影响我们使用。
下面是打包发布时所用的webpack配置，写在webpack.config.prod.js中
const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 用于将组件的css打包成单独的文件输出到`dist`目录中
const devConfig = {
entry: './src/index.js',
mode: 'production',
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'index.js', // 输出文件
libraryTarget: 'umd', // 采用通用模块定义, 注意webpack到4.0为止依然不提供输出es module的方法，所以输出的结果必须使用npm安装到node_modules里再用，不然会报错
library: 'react-simple-component-boilerplate', // 库名称
libraryExport: 'default', // 兼容 ES6(ES2015) 的模块系统、CommonJS 和 AMD 模块规范
},
externals: {
react: {
root: "React",
commonjs2: "react",
commonjs: "react",
amd: "react"
},
"react-dom": {
root: "ReactDOM",
commonjs2: "react-dom",
commonjs: "react-dom",
amd: "react-dom"
}
},
module: {
rules: [{
test: /\.(le|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "less-loader",
options: {
sourceMap: false
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "main.min.css" // 提取后的css的文件名
})
],
}
module.exports = merge(devConfig, baseConfig);
上面我们配置了externals字段，这一点非常重要。
externals定义了外部依赖。将react和react-dom添加进该字段，说明我们的组件将依赖外部的react和react-dom，这样就可以避免把react和react-dom打包进去（不然组件会很大）
4.1 配置babel
我们需要用babel把我们的代码编译成es5版本。在项目根目录新建一个.babelrc文件，输入以下内容。
{
"presets": [
[
"@babel/preset-env",
{
"targets": "> 0.25%, not dead"
}
],
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-transform-modules-commonjs",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread"
]
}
我们在presets其中使用了preset-env, 规定了输出的代码目标环境是份额大于0.25%的浏览器。另外由于我们的项目里使用了react，presets中就要加入preset-react。
同时，plugins配置了一些babel插件，用于支持装饰器展开操作符等类内直接定义属性等新的es特性。
4.3 配置启动命令
我们再次回到项目根目录下的package.json中，编辑如下
"scripts": {
"build": "set NODE_ENV=production && webpack --config ./config/webpack.config.prod.js",
"pub": "npm run build && npm publish",
"dev": "webpack-dev-server --config ./config/webpack.config.dev.js"
},
"main": "dist/index.js",
"files": ["dist"]
- build 命令用于打包组件
- dev 命令会使用webpack-dev-server启动一个开发服务用于预览组件效果
- pub 命令进行打包组件并且发布到npm上
- main字段指定了我们的组件的入口文件，files字段用于指定我们的npm包的文件目录。
5.试用和发布
要发布一个npm包，我们需使用如下命令添加一个npm的账号，如果已经添加过的这一步可以跳过。
npm adduser
如果已经有npm账号，可以使用npm login登陆。
如果不知道自己是否已经添加过了npm账号，使用npm whoami查看登陆信息即可
接下来就编辑package.json把组件的名称/版本/介绍等字段都填写一下。
好了，接下我们先使用npm run dev命令，此时会自动打开默认浏览器预览组件。
如果没什么问题的话，接下来使用npm run pub进行打包和发布。
等待发布完成后，我们就下载安装一下。
npm i your-component // 假设你的包名字叫your-component
使用自己发布的组件
import YourComponent from 'your-component'; import 'your-component/dist/main.min.css'; // 如果给组件写了样式，需要手动导入css文件
6.总结
到这里，一个非常非常简单的用于发布react小组件的脚手架就搭好了，总结一下其中要注意的地方:
- webpack打包时libraryTarget要使用umd
- externals 里要把外部依赖配置好
- 如果还要生成es module，可以额外使用gulp或rollup等工具
- webpack4 之后建议使用MiniCssExtractPlugin来提取css
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于react后端渲染模板引擎noox发布使用
React 组件化思想受到越来越多开发者的关注,组件化思想帮助开发者将页面解耦成一个一个组件,代码更加模块化, 更易扩展.而目前流行的后端模板引擎如 ejs, swig, jade, art 共同的问题是: 需要学习各类模板引擎定义的语法,如 {{if}}, {{loop}} 对组件化支持不够强,实现复杂,不易用 针对以上痛点,笔者基于 React 造出了 noox 这样一个工具,专注于后端模板的解析,让模板解析更加简单,易用. 使用方法 安装 npm install noox 简单的 demo
-
react build 后打包发布总结
一,部署在apache web服务器上(wamp | xammp) 1.后台接口需要做跨域设置 (1)在服务端利用Access-Control-Allow-Origin响应头解决. 设置Access-Control-Allow-Origin:*,允许所有域名的脚本访问该资源. 如果考虑到安全问题,也可以设置Access-Control-Allow-Origin:www.build.im 允许特定域名访问 (2)服务器做反向代理 2.打包文件单独放置一个服务器 (1)把react 项
-
react组件从搭建脚手架到在npm发布的步骤实现
最近公司给公司里架设了私有的npm仓库,相应地也需要一个用来发布react组件用的脚手架,在这个过程中又又又又复习了一下webpack,在这里分享下脚手架搭建的过程. 首先,我们预期的脚手架具有如下功能 开发组件时可以实时预览 对组件各种资源进行打包(js/css/图片等) 一键打包发布 1.创建项目 脚手架的名字暂时取react-simple-component-boilerplate. 首先创建一个新目录用于放我们的文件: mkdir react-simple-component-boile
-
详解使用React全家桶搭建一个后台管理系统
引子 学生时代为了掌握某个知识点会不断地做习题,做总结,步入岗位之后何尝不是一样呢?做业务就如同做习题,如果'课后'适当地进行总结,必然更快地提升自己的水平. 由于公司采用的react+node的技术栈,于是就完成了一个reactSPA小项目,计划日后把平时工作中遇到的业务以及学习中遇到有趣的东西给抽象成demo展示出来.目前该项目只是把雏形搭好,效果如下.在此文的基础上,写了篇新文章使用React全家桶搭建一个后台管理系统,欢迎围观.(附注:因为项目不时更新,文章不一定会即时更新,所以以实际的
-
vite + react +typescript 环境搭建小白入门教程
目录 前言 1. 使用 vite 创建 react 项目 1. npm / yarn 命令初始化 2. 输入项目名称 3. 选择框架 4. 选择 Js / Ts 5. 项目创建完成 6. 启动项目 2. 规范项目目录 3. 使用 react-router-dom 路由 1. 使用 npm / yarn 命令下载 2. 更改 react-router-dom 版本 3. 修改App.tsx文件 4. 配置 alias 别名 5. 配置 Ant Design 样式库 6. 配置axios与顶部加载进
-
React Native 环境搭建的教程
一直对 RN 充满了好奇,前段时间学习并实际使用 RN 来开发了一个简单的应用.第一步从环境搭建开始. 环境搭建 分别需要安装Node,Watchman,Yarn 和 RN 命令行工具,推荐把 react-devtools 的 debug 工具也一并安装了 $ brew install node $ brew install watchman $ brew install yarn $ npm install -g react-native-cli $ npm install -g react-
-
React 组件转 Vue 组件的命令写法
基于目前React和Vue比较火,开发react-to-vue工具的目的是为了进一步提高组件的可复用用性,让组件复用不仅仅局限在一个框架里面 简介 对于react-to-vue工具,转化的是基本的react component,而不是全部的react应用.而基本react component的定义更多是基于props和state来渲染的组件,其中也可以包括发请求. 本文先介绍两个框架的组件共性和不兼容的地方,再介绍react-to-vue的使用和原理.在实际业务中,陆金所100多个的react基
-
用react-redux实现react组件之间数据共享的方法
上篇文章写到了redux实现组件数据共享的方法,但是在react中,redux作者提供了一个更优雅简便的模块实现react组件之间数据共享.那就是利用react-redux 利用react-redux实现react组件数据之间数据共享 1.安装react-redux $ npm i --save react-redux 2.从react-redux导入Prodiver组件将store赋予Provider的store属性, 将根组件用Provider包裹起来. import {Provider,c
-
基于visual studio code + react 开发环境搭建过程
开发环境 windows 开发工具 visual studio code node 安装和 npm windows 安装node 可以直接在 node官网直接下载直接当作普通软件安装即可. 安装完成可以在控制台中运行node测试是否安装成功 win + r 输入 cmd ,直接在终端输入node -v 输出版本号及已经成功安装. 目前新版本的node自带npm(npm 是随同 node 一起安装的包管理工具).这里安装好了 node并且测试安装成功之后,可以继续在控制台输入 npm -v 检查是
-
webpack搭建脚手架打包TypeScript代码
创建文件夹 目录结构: dabaots 初始化 npm init -y生成package.json文件 目录结构: dabaots dabaots / package.json 然后在开发环境中安装以下几个工具 npm i -D webpack··························(打包代码的核心工具 webpack-cli·····················(webpack的命令行工具) typescript ·······················(写ts所需的核心
-
React组件通信之路由传参(react-router-dom)
目录 最近在学习react,现在的工作中使用的是vue,在学习的过程中对两者进行比较,加深理解. 以下是react中的一小部分知识点,我个人觉得也是比较常用的知识点,react组件通信的其中一种方式--路由传参(react组件通信的方式有多种,如props.事件回调.context.router.redux.缓存等等).现在单页面SPA应用的比较广泛,在不刷新整个页面进行部分页面的跳转,使用路由跳转便在所难免,那么react路由除了进行页面之间的跳转,还有很大一个作用就是进行页面或者组件切换时传
-
React组件间通信的三种方法（简单易用）
目录 一.父子组件通信 二.跨级组件通信 1.逐层传值 2.跨级传值 三.兄弟(无嵌套)组件通信 四.路由传值 五.Redux React知识中一个主要内容便是组件之间的通信,以下列举几种常用的组件通信方式,结合实例,通俗易懂,建议收藏. 一.父子组件通信 原理:父组件通过props(与vue中的props区分开)向子组件通信,子组件通过回调事件与父组件通信. 首先,先创建一个父组件Parent.js跟子组件Children.js,二者的关系为直接父子关系. Parent.js父组件如下,给父组