前端公共组件库搭建0-1发布react组件到npm（webpack版）

臧小半
942 阅读4分钟

这一篇博客和上一周博客相似，但是采用webpack，相信更多人更倾向于去使用webpack，本章就开始使用webpack搭建 react项目并发布到npm包

1.创建项目和初始化
mkdir component_webpack
cd component_webpack
npm init

image.png

可以一路回车默认，这样就得到了一个含有package.json的项目,如图：

image.png

2.依赖安装

首先是基于react的项目所以肯定要先安装react相关的依赖

npm i react react-dom -D

其次我们项目需要webpack来完成构建，webpack将使用Babel进行转译，使用 Webpack Dev erver进行本地服务，相关一系列依赖如下:

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

安装完成之后发现package.json依赖就装好了

image.png

3.代码编写

新增example文件夹 和src文件夹，同时在example下也新建src文件夹用来存放示例代码如图：

image.png

在根目录src的文件夹下创建一个index.js的文件 用来编写组件

//   src/index.js
import React from 'react'
import './index.css'
function index() {
  return (
    <div>这是一个组件的页面</div>
  )
}

export default index

在example/src目录下新增 index.html模板 和一个index.js

 // example/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>


//example/src/index.js
import React from 'react';
import { render} from 'react-dom';
import DemoComponent from '../../src';
const App = () => (
    <DemoComponent />
);
render(<App />, document.getElementById("root"));

在根目录新建一个webpack.config.js来配置我们的webpack

/*** webpack.config.js ***/
const path = require('path');

const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, "example/src/index.html"),
    filename: "./index.html"
});
module.exports = {
    entry: path.join(__dirname, "example/src/index.js"), //使用 example/src/index.js作为项目入口，处理资源文件的依赖关
    module: {
        rules: [
        //babel-loader来编译处理 js和jsx文件
            {
                test: /\.(js|jsx)$/,
                use: "babel-loader",
                exclude: /node_modules/
            },
            //style-loader 和 css-loader来处理 css 依赖和注入内联样式
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    plugins: [htmlWebpackPlugin],//html-webpack-plugin自动注入编译打包好的脚本文件
    resolve: {
        extensions: [".js", ".jsx"]
    },
    devServer: {
    //端口
        port: 8001
    }
};

接下来需要指定 Babel 需要对哪些文件进行编译 在根目录新建一个.babelrc，写入内容如下

//将React 中使用的 JSX 文件需要被编译，让它转换成被主流浏览器都支持的 ES5
{
 "presets": ["env", "react"]
}

这里基本配置就要完成了，我们需要在package.json文件中新增一条命令

"start": "webpack-dev-server --mode development"

新增完成就在命令台执行

npm run start

访问端口8001就可以看到页面了

image.png

4.发布npm包

我们要发布被 babel 编译压缩后的版本，要让没有使用 babel 的项目也能够正常的使用，比如不能出现 JSX 语法

1.安装 Babel cli

npm i babel-cli -D

2.现在我们添加 build脚本，以便使用 Babel 编译我们的源代码，同时拷贝一些静态文件(如：css 文件)到目标打包目录dist下

3.我们需要修改一下package.json的配置

新增 "main":"dist/index.js" 和 "build": "babel src -d dist --copy-files"

image.png

运行 npm run build 这时候会出现一个dist文件夹 这就是我们打包生成的文件

image.png 可以发现文件已经被编译并且压缩好了

4.我们继续为我们的项目添加一个脚本，npmPublish，执行这段脚本，就相当于每次都运行npm run build 让我们每次发布都是最新版本的代码

"npmPublish":"npm run transpile"

image.png

当别人去使用我们的npm包的时候 可能会存在着react多个不同版本的问题我们要规避这一点，这时候我们可以告诉别人我们对于react的版本要求，peerDependencies就能很好的帮助我们表达这个意思 修改我们的package.json文件

image.png 在devDependencies中删除react和react-dom 并在peerDependencies中添加，这样在我们的发布的组件包中不会包含 react , 这样也减小了包的大小，更加重要是可以避免在用户的项目中存在多个 react 版本

5.最后我们需要在根目录新增.npmignore文件，告诉npm我们的哪些文件或者文件夹在发布包中是被忽略的

image.png

6.开始执行npm publish

在发布之我们需要在npm官方注册自己的账户 同时我们要确认我们的包名是否唯一

当以上都准备好我们开始登录自己的账号

image.png

执行npm login 来登录自己的账户 如果出现上面的问题是因为我们要把镜像转成淘宝的

image.png 像这样再执行登录我们就可以了把你的信息填入

最后执行npm publish

image.png

这样子就是成功了 我们现在去访问一下我们的包

image.png 发现已经上传成功了

本篇文章就到这了，下一章我会扩展说一下公用组件的封装为一个系统

avatar
文章
阅读
粉丝