乐趣区

教程使用umdcommonjs和es三种模式制作自己的React-组件库

jiezi

创建 package.json 文件

执行命令 npm init 创建 package.json 文件，一步步输入你自己的组件基本信息，下面是我创建的

{
  "name": "react-code-previewer",
  "version": "0.0.1",
  "description": "基于 react 和 antd 的代码预览器组件",
  "main": "index.js",
  "scripts": {"test": "echo \"Error: no test specified\"&& exit 1"},
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/zhangwei900808/react-code-previewer.git"
  },
  "keywords": [
    "react",
    "antd",
    "code-preview"
  ],
  "author": "zhangwei",
  "license": "MIT",
  "bugs": {"url": "https://github.com/zhangwei900808/react-code-previewer/issues"},
  "homepage": "https://github.com/zhangwei900808/react-code-previewer#readme"
}

初始化组件

首先在项目目录下创建相应文件夹和基本配置文件，目录结构如下所示：

|-- com.github
    |-- .editorconfig
    |-- .gitignore
    |-- .npmignore
    |-- LICENSE
    |-- package.json
    |-- .react-code-previewer
    |-- components
    |   |-- index.js
    |   |-- code-previewer
    |       |-- index.js
    |       |-- style
    |           |-- index.js
    |           |-- index.scss
    |-- src

创建好之后，我们开始制作该组件，在目录 code-previewer/index.js 添加代码，如下所示：

import React, {Component} from "react";

class CodePreviewer extends Component {render() {
    <div className="code-preview-container">
      <div className="cp-component">
        <div className="component-header">header</div>
        <div className="component-content">content</div>
        <div className="component-footer">footer</div>
      </div>
      <div className="cp-code">
        <div className="code-header">code header</div>
        <div className="code-tabs">code tabs</div>
        <div className="code-content">code content</div>
      </div>
    </div>;
  }
}

export default CodePreviewer;

在目录 code-previewer/style/index.js 添加代码，如下所示：

import "./index.scss";

在目录 code-previewer/style/index.scss 添加代码，如下所示：

.code-preview-container {
  .cp-component {.component-header {}
    .component-content {}
    .component-footer {}}
  .cp-code {.code-header {}
    .code-tabs {}
    .code-content {}}
}

我们现在已经初始化组件内容，虽然很简单，后面我们再优化，现在我们要对外暴露该组件，所以我们在目录 /components/index.js 添加代码，如下：

import CodePreview from "./code-previewer";

export {CodePreview};
export default {CodePreview};

umd 打包

首先我们在目录创建.react-code-preview/webpack.config.umd.js 文件，并添加如下代码：

const fs = require("fs");
const path = require("path");
const webpack = require("webpack");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const nodeExternals = require("webpack-node-externals");
const WebpackMd5Hash = require("webpack-md5-hash");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");

const resolve = dir => path.join(__dirname, ".", dir);
const isProd = process.env.NODE_ENV === "production";
const {version, name, description} = require("../package.json");
const distDir = path.join(process.cwd(), "dist");

module.exports = {
  mode: "production",
  entry: {[name]: "./components/index.js" },
  output: {
    path: distDir,
    filename: "[name].min.js",
    // 采用通用模块定义
    libraryTarget: "umd",
    library: name
  },
  devtool: "#source-map",
  module: {
    rules: [
      {test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {loader: "babel-loader"}
      },
      {test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {sourceMap: true}
          },
          {
            loader: "sass-loader",
            options: {sourceMap: true}
          }
        ]
      }
    ]
  },
  resolve: {
    enforceExtension: false,
    extensions: [".js", ".jsx", ".json", ".less", ".css"]
  },
  // 注意：本地预览的时候要注释，否则报 require undefined
  // https://stackoverflow.com/questions/45818937/webpack-uncaught-referenceerror-require-is-not-defined
  externals: [nodeExternals()],
  plugins: [
    new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns: [distDir]
    }),
    new MiniCssExtractPlugin({filename: "[name].css"
    }),
    new WebpackMd5Hash(),
    new webpack.BannerPlugin(` \n ${name} v${version} \n ${description} ${fs.readFileSync(path.join(process.cwd(), "LICENSE"))}`)
  ],
  // 压缩 js
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: "styles",
          test: /\.scss$/,
          chunks: "all",
          enforce: true
        }
      }
    },
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      }),
      new OptimizeCssAssetsPlugin({assetNameRegExp: /\.css\.*(?!.*map)/g, // 注意不要写成 /\.css$/g
        cssProcessor: require("cssnano"),
        cssProcessorOptions: {discardComments: { removeAll: true},
          safe: true,
          autoprefixer: false
        },
        canPrint: true
      })
    ]
  },
  node: {
    setImmediate: false,
    dgram: "empty",
    fs: "empty",
    net: "empty",
    tls: "empty",
    child_process: "empty"
  }
};

在目录根目录下创建 .babelrc 文件，并添加如下代码：

{
  "presets": [
    ["@babel/preset-env", {"modules": false,}], "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {"useESModules": false}]
  ]
}

创建完成之后添加依赖包，并修改 package.json 文件，如下：

"scripts": {"build:umd": "webpack --mode production --config .react-code-previewer/webpack.config.umd.js"},
"devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.5.5",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "fs": "^0.0.1-security",
    "mini-css-extract-plugin": "^0.8.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "path": "^0.12.7",
    "react": "^16.9.0",
    "sass-loader": "^7.2.0",
    "style-loader": "^1.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.6",
    "webpack-node-externals": "^1.7.2"
  }

添加完成之后，执行命令打包

yarn build:umd

成功在 dist 目录下创建好了打包后的.js 文件，目录如下所示：

|-- com.github
    |-- .babelrc
    |-- .editorconfig
    |-- .gitignore
    |-- .npmignore
    |-- LICENSE
    |-- directoryList.md
    |-- package.json
    |-- yarn.lock
    |-- .react-code-previewer
    |   |-- webpack.config.umd.js
    |-- components
    |   |-- index.js
    |   |-- code-previewer
    |       |-- index.js
    |       |-- style
    |           |-- index.js
    |           |-- index.scss
    |-- dist
    |   |-- react-code-previewer.min.js
    |   |-- react-code-previewer.min.js.map
    |-- src

注意：因为后面组件会使用 bable-plugins-import 按需加载组件，所以上面的组件并没有直接引用.scss 文件，这样也就不会在 dist 文件夹下打包.css 文件了，但是.css 文件一定要有，后面会讲 gulp 如何打包.css 文件

commonjs 打包

上面讲了如何使用 webpack.config.umd.js 的 umd 模式打包 react 组件，接下来我们讲如何使用 commonjs 模式打包 react 组件，commonjs 模式打包我们使用的是 babel 直接打包，并且要修改.babelrc 和 package.json，如下：

.babelrc

{
  "presets": [
    ["@babel/env", {
      "loose": true,
      "modules": "cjs"
    }], "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {"useESModules": false}],
  ]
}

package.json

"build:commonjs": "babel components -d lib --source-maps"

添加完成之后，执行命令打包

yarn build:commonjs

|-- com.github
    |-- .babelrc
    |-- .editorconfig
    |-- .gitignore
    |-- .npmignore
    |-- LICENSE
    |-- directoryList.md
    |-- package.json
    |-- yarn.lock
    |-- .react-code-previewer
    |   |-- webpack.config.umd.js
    |-- components
    |   |-- index.js
    |   |-- code-previewer
    |       |-- index.js
    |       |-- style
    |           |-- index.js
    |           |-- index.scss
    |-- dist
    |   |-- react-code-previewer.min.js
    |   |-- react-code-previewer.min.js.map
    |-- lib
    |   |-- index.js
    |   |-- index.js.map
    |   |-- code-previewer
    |       |-- index.js
    |       |-- index.js.map
    |       |-- style
    |           |-- index.js
    |           |-- index.js.map
    |-- src

es modules 打包

es modules 打包和 babel 打包很类似也是通过 babel 打包，不同的是.babelrc 文件有所修改，代码如下：
.babelrc

{
  "presets": [
    ["@babel/env", {
      "loose": true,
      "modules": false
    }], "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {"useESModules": true}]
  ]
}

package.json

"build:es": "babel components -d es --source-maps"
添加完成之后，执行命令打包

yarn build:es


![clipboard.png](/img/bVbwtk0)


![clipboard.png](/img/bVbwtlf)

|– react-code-previewer

|-- .babelrc
|-- .editorconfig
|-- .gitignore
|-- .npmignore
|-- LICENSE
|-- package.json
|-- yarn.lock
|-- .react-code-previewer
|   |-- webpack.config.umd.js
|-- components
|   |-- index.js
|   |-- code-previewer
|       |-- index.js
|       |-- style
|           |-- index.js
|           |-- index.scss
|-- dist
|   |-- react-code-previewer.min.js
|   |-- react-code-previewer.min.js.map
|-- es
|   |-- index.js
|   |-- index.js.map
|   |-- code-previewer
|       |-- index.js
|       |-- index.js.map
|       |-- style
|           |-- index.js
|           |-- index.js.map
|-- lib
|   |-- index.js
|   |-- index.js.map
|   |-- code-previewer
|       |-- index.js
|       |-- index.js.map
|       |-- style
|           |-- index.js
|           |-- index.js.map
|-- src


这样就完成了 umd、commonjs 和 es 的三种打包方式，但是这样有个问题：每次打包都要修改.babelrc 文件，能不能直接通过一条命令打包三种模式的方法呢？下面我们就来讲讲。## 组合三种打包模式
通过三种打包模式我们发现，.babelrc 文件跟三种模式打包有关，尤其是其中几个对象的设置，如：loose、modules 和 useESModules，其它的设置都一样，所以我们可以使用 cross-env BABEL_ENV=umd(commonjs 或者 es)增加 BABEL_ENV 环境变量进行判断。还有，.babelrc 文件我们要换成.babelrc.js，因为前者不能使用 js 语法，这里 [有篇文章](https://www.babeljs.cn/docs/configuration) 很好的分析.babelrc、.babelrc.js 和 babel.config.js 文件之间的区别

## gulp 打包 css

## 组件按需加载

## 发布组件到 npm

## 发布组件到 github pages

## 使用组件

## 总结
1、js sourcemap
2、css sourcemap
退出移动版