XMit

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif|svg)/,
        use: {
          loader: "file-loader",
          options: {
            // placeholders 占位符
            name: "[name].[ext]", // 自定义打包文件名
            outputPath: "images/", // 自定义输出目录
          },
        },
      },
    ],
  },
};

2024-11-19 08:42:23

Web Developer

阅读全文

ffmpegGUI 开发笔记

如何开启硬件加速

注意： 在开启硬件加速时，转码的速度虽然快了，但视频质量会出现大幅下滑，目前解决办法只能通过设置高码率来解决，目前我的做法是在原码率的基础上提高 1.5 倍，基本能保证视频质量，但体积也会增加 1.5 倍（如果有更好的方法请告诉我）

以我这个项目为例，首先通过执行 ffmpeg -hwaccels 来获取当前机器支持哪些硬件加速的方法，不同的平台开启硬件加速的方法不一样

查看机器支持的硬件加速的方法：

// node子进程的方式
let exec = require("child_process").exec;
exec(`${ffmpegPath} -hwaccels`, (err, stdout, stderr) => {
  console.log(stdout); // Hardware acceleration methods: videotoolbox
});

1 2	// 原生ffmpeg的方式 ffmpeg - hwaccels;

2024-11-19 08:42:23

Web Developer

ffmpeg

阅读全文

记 React 中一次复用与封装

前提

最近发现自己一直在写很多重复性的代码，比例公司的某个项目的搜索栏有很多的下拉选择器,而我的做法是不停的初始化store、配置api、引入select组件、配置select组件，这还只是其中一个下拉选择器，如果有多个就觉得这么写是不是很傻，所以最近一直在考虑如果优化。

当重复性的工作过多的时候，就应该考虑自己的代码写的是不是有问题。

封装：把客观事物封装成抽象的类，隐藏属性和方法的实现细节，仅对外公开接口。

初步想法是减少重复性的工作，而目前我能想到的解法方法有几个：

用 class 抽象成一个公共的组件（这种最简单也最实用）
用 HOC（高阶组件）抽象成一个公共的组件
用 Render Props （函数子组件 FaCC）抽象成一个公共的组件

2024-11-19 08:42:23

Web Developer

React

阅读全文

React Router v4 Auth 例子解读

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  withRouter
} from "react-router-dom";

////////////////////////////////////////////////////////////
// 1. Click the public page
// 2. Click the protected page
// 3. Log in
// 4. Click the back button, note the URL each time

function AuthExample() {
  return (
    <Router>
      <div>
        <AuthButton />
        <ul>
          <li>
            <Link to="/public">Public Page</Link>
          </li>
          <li>
            <Link to="/protected">Protected Page</Link>
          </li>
        </ul>
        <Route path="/public" component={Public} />
        <Route path="/login" component={Login} />
        <PrivateRoute path="/protected" component={Protected} />
      </div>
    </Router>
  );
}

// 保存着是否登录状态
const fakeAuth = {
  isAuthenticated: false,
  authenticate(cb) {
    this.isAuthenticated = true;
    setTimeout(cb, 100); // fake async
  },
  signout(cb) {
    this.isAuthenticated = false;
    setTimeout(cb, 100);
  }
};

// 首先根据某个状态判断用户有没有登录，如果登录了就显示登出按钮，否则就显示用户没有登录
const AuthButton = withRouter(({ history }) =>
  fakeAuth.isAuthenticated ? (
    <p>
      Welcome!{" "}
      <button onClick={() => { fakeAuth.signout(() => history.push("/")); }}>登出</button>
    </p>
  ) : (
      <p>你没有登录.</p>
    )
);

// 拿到传给 PrivateRoute 的 Protected 组件 和 Protected 属性，然后把传进来的属性和组件传给Route组件，Route组件返回前进行判断，如果已经登录而返回原组件，则否则生定向到login页面
function PrivateRoute({ component: Protected, ...rest }) {
  return (
    <Route {...rest} render={props =>
      (fakeAuth.isAuthenticated ? (
        <Protected {...props} />
      ) : (
          <Redirect to={{
            pathname: "/login",
            state: { from: props.location }
          }} />
        )
      )
    } />
  );
}

// Public 组件
function Public() {
  return <h3>公开的</h3>;
}

// Protected 组件
function Protected() {
  return <h3>受保护的</h3>;
}

// 登录组件
class Login extends React.Component {
  state = { redirectToReferrer: false };

  // 更改 fakeAuth 里的状态，即登录
  login = () => {
    fakeAuth.authenticate(() => {
      this.setState({ redirectToReferrer: true });
    });
  };

  render() {
    debugger
    let { from } = this.props.location.state || { from: { pathname: "/" } };
    let { redirectToReferrer } = this.state;
    // 如果用户已经登录则重定向到之前的页面
    if (redirectToReferrer) return <Redirect to={from} />;

    return (
      <div>
        <p>您必须登录才能查看该页面 {from.pathname}</p>
        <button onClick={this.login}>登入</button>
      </div>
    );
  }
}

export default AuthExample;

2024-11-19 08:42:23

Web Developer

React Router

阅读全文