使用 TypeScript 构建 一个简单的 React 库

arcsin1
756 阅读3分钟

使用 TypeScript 构建 一个简单的 React 库

本文都是用yarn来安装包

前言

最近在造一个轮子所有就写了这么一个简单的东西

开始

  1. 初始化项目并添加 TypeScript和设置配置
  2. 添加react
  3. 添加rollup和配置
  4. 本地测试
  5. 发布

初始化项目并添加 TypeScript

首先先建一个文件夹

mkdir ts-react-npm && cd ts-react-npm

再用yarn init 初始化

 yarn init

再加入TypeScript

 yarn add --dev typescript

设置Typescript配置

{
    "compilerOptions": {
      "target": "es5",
      "outDir": "lib",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "declaration": true,
      "declarationDir": "lib",
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react"
    },
    "include": [
      "src"
    ],
    "exclude": [
        "node_modules",
        "lib"
    ]
  }

这里使用的一些重要参数是：

  • outDir - 为我们编译的代码指定输出构建目录。由于这将创建一个 ESM 构建，我们会将其输出到一个名为lib/esm.
  • module - 设置您的代码将被编译到的模块系统。TypeScript 支持多种模块类型。( /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */)
  • target - 我们希望 TypeScript 编译到的 ECMAScript 版本目标
  • lib - 指定要支持的内置 JS 库
  • include -编译器应该读取的文件目录和文件
  • exclude -编译器应该忽略的文件目录和文件

添加react

 yarn add --dev react react-dom @types/react typescript

peerDependencies的目的是提示宿主环境去安装满足插件peerDependencies所指定依赖的包，然后在插件import或者require所依赖的包的时候，永远都是引用宿主环境统一安装的npm包，最终解决插件与所依赖包不一致的问题。

"peerDependencies": {
    "react": "^16.8.0",
    "react-dom": "^16.8.0"
 }

现在让我们创建我们的 React 组件，它将被我们的库用户使用，创建src/index.tsx文件

import React from "react";

type IProps = {
  name: string;
};

const SayHi: React.FC<IProps> = ({ name }) => {
  return <div>sayHi,{name}</div>;
};

export default SayHi;

添加rollup进行编译和打包我们的npm包

可以去rollup找到一些文档，我这里描述简单的react包

 yarn add --dev rollup 
 yarn add --dev rollup-plugin-typescript2  // ts插件
 yarn add --dev rollup-plugin-terser // 用于压缩 ES6 代码
 yarn add --dev rollup-plugin-sourcemaps //调式用而已

添加rollup.config.js文件

import typescript from 'rollup-plugin-typescript2';
import { terser } from 'rollup-plugin-terser';

module.exports = {
  external: ['react', 'react-dom'],
  input: 'src/index.ts',
  plugins: [
    typescript({
      exclude: 'node_modules/**',
      typescript: require('typescript'),
    }),
    terser(),
  ],
  output: [
    {
      format: 'esm',
      name: 'hello-say',  // 包名
      file: 'lib/esm/index.js',
    },
    {
      format: 'cjs',
      name: 'hello-say',
      file: 'lib/cjs/index.js',
    },
  ],
};

在package.json 添加打包命令（不是example里面的）

"main": "lib/cjs/index.js",
"module": "lib/esm/index.js",
"types": "index.d.ts",
"scripts": {
    "build": "rm -rf lib & rollup -c",
    "dev":  "rollup -c --watch",
    "lint": "eslint ./src --fix --ext js,ts,tsx"
  },

构建我们的库

yarn build   
实时监听变化用 yarn dev

添加我们的测试实例

直接选用create-react-app的ts模板

 在根文件夹中运行
 yarn create react-app example --template typescript
  
  // 去掉模板本身的东西
 rm -rf example/.gitignore example/.git

建立一个.gitignore

 node_modules
.npmrc

lib

package-lock.json
yarn-lock.json
yarn.lock

example
example/node_modules
example/build

进入example里面，只需将以下内容添加到您的package.json依赖项中

dependencies: {
    "hello-say": "link:.."
  }

  yarn start

浏览器会自动打开了

准备发布

  1. 创建一个.npmignore文件（类似.gitignore 不需要的干掉）
src
demo
docs
node_modules
.eslintcache
package-lock.json
yarn-lock.json
yarn.lock
example
  1. 在packageJs里面添加
"files": [
    "/lib"
 ]

如果第一次发布包，您需要在 www.npmjs.com/ 上创建一个帐户（内部不需要）

然后 npm login.

然后 npm publish在您的根目录中运行

avatar
文章
阅读
粉丝