webpack + react + ts + semiDesign +electron

用户4793865

发布于 2023-01-12 13:34:34

2.1K0

发布于 2023-01-12 13:34:34

文章被收录于专栏：前端小菜鸡yym前端小菜鸡yym

初始化

执行 npm init 一些选项只要回车即可。

然后会生成 package.json依赖管理文件

添加执行命令

{
  "name": "musicdesktop",
  "version": "1.0.0",
  "description": "npm init  yarn add webpack webpack-cli -D 新建文件夹  dist src 以及 webpack.config.js",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"
}

安装webpack依赖

yarn add -D webpack webpack-cli 或者npm install -D webpack webpack-cli

📢 这里使用 -D : 是将其添加到开发依赖中

 "dependencies": {
 
 },
 "devDependencies": {
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2"
  }

webpack.config.js

新建一个webpack.config.js文件。此时我们的文件夹内容如下(当然两个README.MD不用管)。我们先不添加配置，后面再添加。

React依赖

这里一共装了四个包

yarn add react react-dom @types/react @types/react-dom

注意这里没用 "-D" 因为react不止是在我们本地开发时使用的所以添加到了dependencies中

{
  "name": "musicdesktop",
  "version": "1.0.0",
  "description": "npm init  yarn add webpack webpack-cli -D 新建文件夹  dist src 以及 webpack.config.js",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.4",
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "devDependencies": {
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2"
  }
}

@types

后两个包，我们发现用的是 @types前缀。表示要额外获得React和ReactDOM的声明文件。当导入 react这样的路径，它会查看react包。但是，并不是所有的包都包含了声明文件，所以TypeScript还会查看 @types/react包

React hello world

新建一个src文件夹然后新建模板index.html 和 index.tsx

index.html

<html>

<head></head>

<body>
    <div id="root"></div>
</body>

</html>

index.tsx

这里用的是 tsx， tsx就是在jsx中使用ts

import * as React from 'react';
import * as ReactDOM from 'react-dom'

ReactDOM.render(<h1>hello World</h1>,document.getElementById('root'))

配置 webpack.config.js

entry : 入口文件
mode : 开发环境 development/production
modules 中的rules中制定转换规则。这里需要将tsx转为js

这里通过正则找到tsx然后对其使用到了 ts-loader。

module.exports = {
    entry: "./src/index.tsx",
    mode: "development",
    module: {
        rules: [
            {
                test: /\.ts(x)/,
                use: [
                    "ts-loader"
                ]
            }
        ]
    }
}

装 ts-loader

yarn add -D ts-loader

装 typescript

因为ts-loader中使用了typescript

yarn add -D typescript

遇到的错误

在我们都装好了之后，我们执行 yarn run build。

此时报错了，说是找不到src

原因

如果是 v4.0.0 以上版本的 webpack，可以不使用配置文件配置 webpack ，使用官网推荐的使用 ./src/index.js 作为入口点。

所以需要在src文件夹下新建 index.js(可以是空内容)

插件html-webpack-plugin

html-webpack-plugin

作用是生成打包文件下的 index.html yarn add -D html-webpack-plugin

安装完依赖后，我们需要在webpack.config.json中添加配置

通过require引入
在plugins配置项中实例化对象。打包文件中的html文件也就是源于我们的 src/index.html

// 因为这个文件运行时就加载了。有可能来不及进行 Es6->Es5的转换 所以都使用Es5的引入方式
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry: "./src/index.tsx",
    mode: "development",
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    "ts-loader"
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

我们将打包好的/dist/index.html，拖到浏览器中。发现我们的代码进来了。

添加一个组件

src下新建components文件夹

Test.tsx

import * as React from 'react';

export default class Test extends React.Component {
  render() {
    return <div>This is Test</div>;
  }
}

在 index.tsx中引入组件

import * as React from 'react';
import * as ReactDom from 'react-dom';
import Test from './components/Test';
ReactDom.render(
  <div>
    hello World
    <Test />
  </div>,
  document.getElementById('root')
);

执行打包命令 yarn run build 此时又报错了。提示无法找到Test.tsx

因为少了配置，在 tsconfig.js中添加include。把src下的所有文件都加入

{
    "compilerOptions": {
        "jsx":"react"
    },
    "include":[
        "./src/**/*"
    ]
}

并且我们的webpack.config.js中也需要添加resolve来对ts tsx等格式进行支持

 resolve: {
        extensions: ['.js', '.tsx','.jsx','.json'],
        alias: {
            components: path.resolve(__dirname, 'src/components')
        }
    },

var path = require('path');
// 因为这个文件运行时就加载了。有可能来不及进行 Es6->Es5的转换 所以都使用Es5的引入方式
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry: "./src/index.tsx",
    mode: "development",
    resolve: {
        extensions: ['.js', '.tsx','.jsx','.json'],
        alias: {
            components: path.resolve(__dirname, 'src/components')
        }
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    "ts-loader"
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

再次执行打包命令，此时不报错了。然后在浏览器中看一下我们的页面，可以发现，组件起作用了。

css相关

添加配置

首先，在webpack.config.js中添加plugins的配置

   // css
            {
                test: /\.css/,
                use: [
                    "style-loader", "css-loader"
                ]
            }

var path = require('path');
// 因为这个文件运行时就加载了。有可能来不及进行 Es6->Es5的转换 所以都使用Es5的引入方式
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry: "./src/index.tsx",
    mode: "development",
    resolve: {
        extensions: ['.js', '.tsx', '.jsx', '.json'],
        alias: {
            components: path.resolve(__dirname, 'src/components')
        }
    },
    module: {
        rules: [

            // tsx
            {
                test: /\.tsx?$/,
                use: [
                    "ts-loader"
                ]
            },
            // css
            {
                test: /\.css/,
                use: [
                    "style-loader", "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

这里经过了两个转换："style-loader", "css-loader"

安装插件

yarn add -D style-loader css-loader

组件中使用

我们引入css文件可以有如下两种方式

import './index.css';
import style from './index.css'

对于第一种我们使用时候，如下：字符串的写法

<div className="title">

对于第二种，写法如下，但是现在报错：找不到这个文件。

这是因为这是typeScript的写法，所以需要读取相应的ts文件。如下我们添加了index.css.d.ts就不再报错了

我们看一下index.css.d.ts中的内容，将 index.css中的内容转换为了ts

/* index.css */
foo{}

/* index.css.d.ts */
declare const styles: {
  readonly "foo": string;
};
export = styles;

但是我们肯定不能每次都去手动创建，因此我们使用了一个插件

typed-css-modules

npm地址

安装

npm install -g typed-css-modules

然后执行如下命令，就会把src文件夹下的css文件都生成相应的 css.d.ts

 tcm src

less

添加配置

正常我们不满足于只写css，我们还会使用less或scss。在webpack.config.js中添加less的配置。

var path = require('path');
// 因为这个文件运行时就加载了。有可能来不及进行 Es6->Es5的转换 所以都使用Es5的引入方式
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry: "./src/index.tsx",
    mode: "development",
    resolve: {
        extensions: ['.js', '.tsx', '.jsx', '.json'],
        alias: {
            components: path.resolve(__dirname, 'src/components')
        }
    },
    module: {
        rules: [

            // tsx
            {
                test: /\.tsx?$/,
                use: [
                    "ts-loader"
                ]
            },
            // css
            {
                test: /\.css/,
                use: [
                    "style-loader", "css-loader"
                ]
            }
            ,
            // less  从后往前处理
            {
                test: /\.less$/,
                use: [
                    "style-loader", "css-loader", {
                        loader: "less-loader",
                        options: {
                            lessOption: {
                                module: true
                            }
                        }
                    }
                ],

            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

less-loader

然后需要下载less-loader插件

yarn add -D less-loader

还需要 less的插件

yarn add -D less

引用样式文件

我们在组件Test.tsx中引入 index.less

如图一直提示找不到 index.less。这与刚才的css的引用报错原因一样。同样也需要插件

typed-less-modules

npm地址

yarn add -D typed-less-modules

执行命令tlm src -i 即可生成相应的 .less.d.ts 我们测试了三个不同层级

我们为了方便将这个命令和css文件编译的命令都添加到 package.json 中。 📢 执行两个命令通过&相连

 "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
    "build": "webpack",
    "start": "webpack-dev-server",
    "style": "tlm src -i &amp; tcm src"
  },

但是这里其实还是有问题的。

我们在 index.less 中添加了背景色，然后也生成相应的 index.less.d.ts，但是不起作用。

.text {
  background-color: red;
}

index.module.less

这是因为，使用typesctipt后引入的样式文件需要固定的 .module.less。并且，如果想要使用css文件，也需要固定的 .module.less。

字节semi切换主题

官网：地址

安装semi : yarn add @douyinfe/semi-ui

安装semi-webpack-plugin ： yarn add -D @douyinfe/semi-webpack-plugin

如下还需要在webpack.config文件中去配置

选择你想要的主题

安装主题商店的你想要的主题

这里和图上不是用一个主题 yarn add @ies/semi-theme-figma

但是发现这里有一个报错，因为semi都是使用的sass，我们只配置了less并没有配置sass。因此我们还需要配置一下sass

sass

npm install sass-loader sass webpack --save-dev

typed-scss-modules

yarn add -D typed-scss-modules

执行如下命令。会生成相应的 module.scss

typed-scss-modules src

为了方便，我们在package.json中添加一个运行命令。用于生成css、less、scss等文件的相应ts约束文件。(但是每次新建样式文件后都需执行 npm run style)

   "style": "tlm src  &amp; tcm src &amp; typed-scss-modules src",

SemiWebpackPlugin

在webpack.config.js文件中进行配置。注意：在引入的时候，这里需要.default。theme下的name对应的就是我们主题的名字

const SemiWebpackPlugin = require("@douyinfe/semi-webpack-plugin").default;


  plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new SemiWebpackPlugin({
            theme: {
                name: '@ies/semi-theme-figma'
            }
            /* ...options */
        })
    ]

babel

yarn add  @babel/preset-react --save-dev

新建.bablelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
  }

yarn add  babel-loader@8 @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties @babel/preset-react -D

react-router

yarn add react-router-dom -D

react-router-dom6.3

在6.3版本中useNavigate替代了useHistory

useHistory->useNavigate

使用useNavigate

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate("/sss");

但注意一点 useNavigate 需要在 <BrowserRouter> 作用域内使用。

添加 electron

安装

npm install electron -D
yarn add electron -D

新建main.js

我们在运行electron窗口前需要启动我们的react项目
这里win.loadURL是electron窗口加载我们的react项目的网址。(现在使用3000端口)

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  })

  // 加载应用----适用于 react 项目
  win.loadURL('http://localhost:3000/')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

复制代码

添加启动命令

 "electron-start": "electron ."

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-06-04，如有侵权请联系 cloudcommunity@tencent.com 删除

webpack

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度