临近校招,因无实习,还非科班,想给简历加分,故只能自己做项目,但类似后台管理系统、购物商城的都已经烂大街了,所以尝试一下能不能做点难度稍微高一点的ui组件库
环境配置
建立仓库
在github上建立fun ui仓库,注意现在github上默认的分支不是master了,我克隆到本地的后,练习上传到另一个地址时,发现不用master了,是main分支
在建立的时候勾选了,为仓库创建README文件和 .gitignore文件,
.gitignore文件,在里面写了的文件,不会被git工具进行更新,比如后续会将 dist文件下的所有文件都不进行推送,只在本地就行
初始环境配置
在终端输入
npm init -y
生成package.json
根目录下新建lib文件夹,lib文件夹下新建index.tsx
首先要说明的是,浏览器不支持Ts,所以要用webpack把Ts转换成Js
配置webpack
首先先下载webpack,进官网查看如何安装webpack
这里我们用yarn add,比npm命令稳定一些
webpack用4.29.6版本 webpack-cli用3.2.3
–save-dev的意思是开发者模式,这个依赖是给程序员用的,打包后不会放到包里
yarn add webpack@4.29.6 webpack-cli@3.2.3 --save-dev
在这里简单复习一下-dev
在npm命令里,- -save-dev是给程序员用的,即开发环境development,- -save是给用户用的,什么都不写,默认是- -save,
在yarn命令里,可以直接默认不写 - -save,写
yarn --dev
其次- -save可以简写为-S
–dev可以简写为-D
以下为配置文件,注释写的还是比较详细,
不过还得安装以下依赖
“webpack-dev-server”: “^3.11.2”
“typescript”: “^4.3.4”,
“awesome-typescript-loader”: “^5.2.1”,
“html-webpack-plugin”: “3.2.0”,
// webpack的配置文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 配置mode环境。生产环境是production上线给用户用,会压缩代码,超过244k会警告,开发环境是development
mode: 'development',
// 入口文件,键名index就是外部要找的根目录下的文件名,默认找html后缀
// 键值就是要转换的那个文件的地址,经过webpack的转换,写进index.html里面
entry: {
index: './lib/index.tsx'
},
// 支持的后缀,不然在import的时候,不写tsx就找不到tsx文件
resolve:{
extensions:['.ts','.tsx','.js','.jsx'],
},
// 输出目录,要用到绝对路径,所以在上方引入path模块
output: {
// 路径
path: path.resolve(__dirname, 'dist/lib'),
// 库的名字
library: 'FunUI',
// 库的目标格式 , 这个是跟cmd,amd类似的一种模块化
libraryTarget: 'umd'
},
// 配置loader
module: {
rules: [
{
// //表示正则, .要用转义\ ?表示x可有可无 $表示以这个结尾
test: /\.tsx?$/,
// loader有多种多样,这里用的是其中一个比较好的,一般都是直接输名字然后--dev安装
loader: 'awesome-typescript-loader'
}
]
},
// 配置plugin
plugins: [
// 用于生成html里面的script src标签,引入经过转换的ts文件
new HtmlWebpackPlugin({
title: 'FunUI - React',
// 引入进index.html文件里
template: 'index.html'
})
],
// 用于将react包排在外面,让其他开发者自己下载,不然这个太大了
externals: {
react: {
// 对应的模块化标准,该怎么引用,比如require('xxx'),这个xxx就是下面的'react'
commonjs: 'react',
commonjs2: 'react',
amd: '