typescript html ui,开发一个 react & typescript 的ui组件

完成以上步骤 package.json .babelrc webpack.config.js postcss.config.js相关内容如下

{

// ...

"main": "lib/index.js", // 打包后的入口地址

"scripts": {

"start": "webpack-dev-server --config config/webpack.dev.config.js",

"build": "webpack --config config/webpack.prod.config.js",

"pub": "npm run build && npm publish" // 发布 npm

},

// ...

"dependencies": {

"react": "^16.12.0",

"react-dom": "^16.12.0"

},

"devDependencies": {

"@babel/cli": "^7.8.4",

"@babel/core": "^7.8.4",

"@babel/preset-env": "^7.8.4",

"@babel/preset-react": "^7.8.3",

"@babel/plugin-proposal-class-properties": "^7.8.3",

"@babel/plugin-proposal-object-rest-spread": "^7.8.3",

"@types/react": "^16.9.19", // ts 需要用的相关库types 文件

"@types/react-dom": "^16.9.5",

"@types/react-router-dom": "^5.1.3",

"autoprefixer": "^9.7.4",

"babel-loader": "^8.0.6",

"clean-webpack-plugin": "^3.0.0",

"css-loader": "^3.4.2",

"fork-ts-checker-webpack-plugin": "^0.5.2", // ts类型校验webpack插件

"html-webpack-plugin": "^3.2.0",

"less": "^3.11.1",

"less-loader": "^5.0.0",

"mini-css-extract-plugin": "^0.9.0", // 抽离css插件

"postcss-loader": "^3.0.0",

"style-loader": "^1.1.3",

"ts-loader": "^6.2.1",

"typescript": "^3.7.5",

"url-loader": "^3.0.0",

"webpack": "^4.41.6",

"webpack-cli": "3.3.7",

"webpack-dev-server": "^3.10.3",

"webpack-merge": "^4.2.2"

},

"browserslist": [ // postcss autoprefixer 用到的配置

"iOS >= 6",

"Android >= 4",

"IE >= 9"

]

}

.babelrc

{

"presets": [

"@babel/preset-env",

"@babel/preset-react",

],

"plugins": [

"@babel/plugin-proposal-class-properties",

"@babel/plugin-proposal-object-rest-spread"

]

}

.postcss.config.js

// postcss 配置参考 https://segmentfault.com/a/1190000008030425

module.exports = {

plugins: [

require('autoprefixer')({ /* ...options */ })

]

}

webpack.base.js

const path = require('path');

module.exports = {

module: {

rules: [

{

test: /\.(js|jsx)$/,

use: "babel-loader",

exclude: /node_modules/

},

{

test: /\.(ts|tsx)$/,

use: [

"babel-loader",

{

loader: 'ts-loader',

options: {

// 关闭类型检查，即只进行转译， 类型检查交给 fork-ts-checker-webpack-plugin 在别的的线程中做

transpileOnly: true

}

}

],

exclude: /node_modules/

},

{

// .css/less 解析

test: /\.(less|css)$/,

use: [

'style-loader',

"css-loader",

"postcss-loader",

"less-loader"

],

},

{

// 图片解析

test: /\.(png|jpg|gif)$/,

include: path.resolve(__dirname, "..", "src"),

use: ["url-loader?limit=8192&name=assets/image/[name].[hash:4].[ext]"]

},

{

// 文件、字体解析

test: /\.(eot|woff|svg|ttf|woff2|otf|appcache|mp3|mp4|pdf)(\?|$)/,

include: path.resolve(__dirname, "..", "src"),

use: ["file-loader?name=assets/font/[name].[hash:4].[ext]"]

},

]

},

resolve: {

//后缀名自动补全，引入时可不必写后缀名

extensions: [".ts", ".tsx", ".js", ".jsx", ".less", ".css"]

}

};

webpack.dev.config.js

const path = require('path');

const merge = require('webpack-merge');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const baseConfig = require('./webpack.base.js');

const devConfig = {

mode: 'development', // 开发模式

entry: path.join(__dirname, "../example/src/app.js"), // 项目入口，处理资源文件的依赖关系

output: {

path: path.join(__dirname, "../example/src/"),

filename: "bundle.js",

// 使用webpack-dev-sevrer启动开发服务时，并不会实际在`src`目录下生成bundle.js，打包好的文件是在内存中的，但并不影响我们使用。

},

module: {

rules: []

},

plugins: [

new HtmlWebpackPlugin({

title: 'learn npm',

filename: "index.html",

template: "./public/index.html",

inject: true,

}),

],

devServer: {

contentBase: path.join(__dirname, '../example/src/'),

compress: true,

port: 3001, // 启动端口为 3001 的服务

// open: true // 自动打开浏览器

},

};

module.exports = merge(devConfig, baseConfig);

webpack.prod.config.js

const path = require('path');

const merge = require('webpack-merge');

const baseConfig = require('./webpack.base.js');

// const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 用于将组件的css打包成单独的文件输出到`lib`目录中

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const prodConfig = {

mode: 'production',

entry: path.join(__dirname, "../src/index.tsx"),

output: {

path: path.join(__dirname, "../lib/"),

filename: "index.js",

libraryTarget: 'umd', // 采用通用模块定义

libraryExport: 'default', // 兼容 ES6 的模块系统、CommonJS 和 AMD 模块规范

},

module: {

rules: [

// 我在打包的没有做css抽离，故注释了

// {

// test: /\.css$/,

// loader: [MiniCssExtractPlugin.loader, 'css-loader?modules'],

// },

]

},

plugins: [

// new MiniCssExtractPlugin({

// filename: "main.min.css" // 提取后的css的文件名

// }),

new CleanWebpackPlugin(),

],

externals: { // 定义外部依赖，避免把react和react-dom打包进去

react: {

root: "React",

commonjs2: "react",

commonjs: "react",

amd: "react",

},

"react-dom": {

root: "ReactDOM",

commonjs2: "react-dom",

commonjs: "react-dom",

amd: "react-dom",

}

},

};

module.exports = merge(prodConfig, baseConfig);

tsconfig.json 我把ts强制类型校验都关掉了 ts配置详解、配置、 ts学习

{

"compilerOptions": {

"target": "es6",

"experimentalDecorators": true,

"strictNullChecks": false,

"module": "ESNext",

"moduleResolution": "node",

"jsx": "react",

"noUnusedParameters": false,

"noUnusedLocals": false,

"esModuleInterop": true,

"allowSyntheticDefaultImports": true,

"skipLibCheck": true,

"noImplicitAny": false,

"noImplicitReturns": false,

"noFallthroughCasesInSwitch": false,

"alwaysStrict": false,

"strict": false,

"strictBindCallApply": false,

"strictPropertyInitialization": false,

"types": [

"react",

"react-dom",

"node"

],

// "baseUrl": "src",

// 此处相当于webpack alias

// "paths": {

// "src/*": [

// "*"

// ]

// }

},

"include": [

"src/"

],

"exclude": [

"node_modules",

"dist"

],

"compileOnSave": false

}