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 (

header
content
footer
code header
code tabs
code content

);

}

}

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,

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值