在 github 创建了一个由 react 搭建的 UI 组件库,最初为了方便直接使用了 create-react-app 官方脚手架搭建了项目,虽然方便了,但是显得太臃肿以及不够灵活。因此自己使用 webpack 来重新搭建整个环境
项目地址:https://github.com/Dilomen/Dark-Compontent
通过 npm install dark-ui -D 指令进行安装使用
在项目文件夹下输入指令,创建 package.json 文件
npm init
webpack 创建环境
npm install webpack webpack-cli --save-dev
react 的环境
npm install react react-dom
babel 相关,babel7 和 6 的依赖会有些差别
npm install @babel/cli @babel/core @babel/preset-env @babel/preset-react --save-dev
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
head>
<body>
<div id="root">div>
body>
html>
import React from "react";
import ReactDOM from "react-dom";
import "./index.css"; // 随便在src下建一个index.css测试样式是否导入
ReactDOM.render(Hello World
, document.getElementById("root"));
module.exports = {
presets: ["@babel/preset-env", "@babel/preset-react"]
};
npm install html-webpack-plugin clean-webpack-plugin --save-dev
npm install style-loader css-loader file-loader url-loader --save-dev
// 导入
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// CleanWebpackPlugin的导入,看版本,之前的版本的默认,不需要加{}
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
// 这里输入输出是一对一的,如果想一对多,多对多请参考 webpack 配置
// 输入文件:
entry: [path.resolve(__dirname, "./src/index.js")],
output: {
path: path.resolve(__dirname, "./build"),
filename: "[hash:8].js"
},
// 识别后缀
resolve: {
extensions: [".js", ".jsx", "ts", "tsx"]
},
// 插件
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: "index.html",
template: "./index.html"
})
],
// 不同类型文件的模块
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: ["style-loader", "css-loader"]
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.(jpg|png|svg)$/,
loader: ["file-loader"]
},
{
test: /\.(woff|woff2|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: "url-loader?limit=10000"
}
]
}
};
"scripts": {
"dev": "npm run start",
"start": "webpack-dev-server --config webpack.config.js",
"build": "webpack --config webpack.config.js"
}
npm install html-webpack-plugin cnode-sass sass-loader --save-dev
然后在 webpack.config.js 文件中的 module 下添加
module: {
rules: [
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
...
]
}
tip: 由于本人 ts 的功力有限,暂时还没有学习 ts 文件声明,而下面的@types/*的依赖就是为了你不需要在写文件声明
安装依赖
如果在全局安装了就不要再执行下面的指令
npm install typescript ts-loader source-map-loader --save-dev
tsc -init
{
"compilerOptions": {
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"esModuleInterop": true
},
"exclude": ["node_modules"]
}
ts 关于 react
npm install @types/react @types/react-dom
在 webpack.config.js 文件下 modules 的 rules 中添加
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: ["ts-loader"]
},
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
}
前端单元测试 —— jest
js环境就装
npm install jest react-test-renderer --save-dev
ts环境就装
npm install @types/jest @types/react-test-renderer --save-dev
"scripts": {
...
"test": "jest"
}
tip:接下来的部分属于个人项目,别的项目可能需要有所改变
ts 和 scss 不能执行,最终还是要转化成 js 和 css 的,由于没有找到更好的办法,这边直接使用 gulp 将 scss 实时编译成 css,在 js 中直接引入 css
npm install gulp gulp-sass --save-dev
let gulp = require("gulp");
let sass = require("gulp-sass");
gulp.task("sass", function() {
return gulp
.src("src/components/**/*.scss")
.pipe(sass())
.pipe(gulp.dest("src/style/"));
});
gulp.task("watch", function() {
gulp.watch("./src/components/**/*.scss", gulp.series("sass"));
});
gulp watch
// tsconfig.js
{
"compilerOptions": {
"outDir": "./lib",
"noImplicitAny": false,
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "commonjs",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react",
"baseUrl": "./",
"paths": { "*": ["types/*"] }
},
"exclude": ["node_modules"],
"include": ["lib/*"]
}
{
"name": "dark-ui",
"version": "0.1.2",
"description": "react开发的UI组件",
"main": "./lib/index.js",
"files": [
"lib",
"style"
],
"keywords": [
"react",
"component"
],
"author": "dilomen",
"dependencies": {},
"devDependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0"
...
}
}
npm publish
然后你就可以通过npm install 来安装你的项目啦