最近项目用到了ahooks，也顺便试试搭建一个hooks库，ahooks用的是dumi(基于umi)来搭建，本文先尝试从0搭建

从0搭建

这里使用webpack构建

先看看必要的包(不包含eslint, 测试等包)

  "dependencies": {
    "@babel/core": "^7.14.8",
    "@babel/preset-env": "^7.14.8",                 // es语法转换
    "@babel/preset-react": "^7.14.5",               // react语法转换
    "@babel/preset-typescript": "^7.14.5",          // typescript语法转换，这次用ts-loader代替
    "babel-loader": "^8.2.2",                       // babel-loader for webpack    
    
    "@types/node": "^12.19.12",
    "@types/react": "^16.14.2",
    "@types/react-dom": "^16.9.10",
   
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    
    "rimraf": "^3.0.2",                            // 打包前删除文件
    "ts-loader": "^9.2.4",                         // typescript语法转换
    "typescript": "^4.1.3",                        // typescript包
    "uglifyjs-webpack-plugin": "^2.2.0"            // 压缩js文件
  }

webpack.config.js

这里主要是loader配置，注意loader是从左到右执行的，因此这里是先用ts-loader将ts解析为js，再用babel解析react和es语法

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader','ts-loader'],
        include: [path.resolve('src')]
      }
    ],
  },

其中，babel-loader要搭配preset，在.babelrc中设置preset

{
  "presets": [
    [
      "@babel/preset-env",{ // 再转化 ES6 语法
        "targets": {
          "chrome": "67"
        },
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react" // 先转化 react 语法
    // "@babel/preset-typescript"
  ]
}

打包

"scripts": {
  "clean": "rimraf ./lib",
  "build": "npm run clean  && webpack"
},

为啥不用「@babel/preset-typescript」呢，因为试验发现这样做的话，tsconfig将不起作用，没法生成类型文件。

使用dumi

传送门

「✍ 搭建一个Typescript + React Hooks工具库」

从0搭建

使用dumi