html5读取umd,教程：使用umd、commonjs和es三种模式制作自己的React 组件(库)

创建 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() {

return (

);

}

}

export default CodePreviewer;

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

import "./index.scss";

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

.code-preview-container {

.cp-component {

.component-header {

color: red;

}

.component-content {

color: green;

}

.component-footer {

color: yellow;

}

}

.cp-code {

.code-header {

color: red;

}

.code-tabs {

color: green;

}

.code-content {

color: yellow;

}

}

}

我们现在已经初始化组件内容，虽然很简单，后面我们再优化，现在我们要对外暴露该组件，所以我们在目录 /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,