小编Jus*_*ith的帖子

当我尝试运行它时,Grunt imagemin会抛出以下错误:

Running "imagemin:dynamic" (imagemin) task
Fatal error: Cannot read property 'contents' of undefined

这是我的package.json文件:

{
  "name": "project1",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-imagemin": "^1.0.0",
    "grunt-contrib-uglify": "^0.11.0",
    "imagemin" : "4.0.0"
  }
}

这是我的Gruntfile.js

module.exports = function(grunt) {

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        uglify: {
          build: {
            src: 'views/js/src/main.js',
            dest: 'views/js/build/main.js'
          }
        },

        imagemin: {
          dynamic: {
            files: [{
              expand: true,
              cwd: 'views/images/src/',
              src: ['**/*.{png,jpg,gif}'],
              dest: 'views/images/build/'
            }]
          }
        }

    });

    // 3. Where we tell Grunt we plan to use this …

我有一个 React Audio Player，它使用 useAudio 钩子来管理 HTML5 音频。除了 Mobile Safari 之外，它在任何地方都可以正常工作，在播放器开始播放几秒钟后声音就会开始。

奇怪的是，我canplaythrough在调用HTMLAudioElement.play(). 所以 Safaricanplaythrough启动并开始“播放”音频，除了音频直到一秒钟左右才真正开始。

这是 CodeSandbox 上的完整示例：https ://codesandbox.io/s/useaudioplayer-jvftw ? file =/ src/useAudio.tsx

要复制，请在 Mobile Safari 中打开并播放音频。

假设我想将十几个或更多 SVG 内联到我的 React 应用程序中。现在，我正在使用svg-react-loader像这样导入它们。

import Svg1 from "!babel!svg-react!../../images/sdg1.svg";
import Svg2 from "!babel!svg-react!../../images/sdg2.svg";
import Svg3 from "!babel!svg-react!../../images/sdg3.svg";
import Svg4 from "!babel!svg-react!../../images/sdg4.svg";

...等等。我需要在每个事件上设置事件处理程序和悬停事件。此外，当选择其中之一时，我想更改其不透明度。

经过几个小时和多次失败的实验后，我尝试过的唯一有效的方法是将它们全部渲染在像这样的父组件中。

const Icon = React.createClass({

    //Callback that updates the state of a parent component
    clickHandler() {
        this.props.handler(this.props.svg) 
    }

    render() {

        const icons = [
            <Svg1 className="svg1" opacity={this.props.svg === this.props.currentSvg ? 1 : 0.3} />
            <Svg2 className="svg2" opacity={this.props.svg === this.props.currentSvg ? 1 : 0.3} />
            <Svg3 className="svg3" opacity={this.props.svg === this.props.currentSvg ? 1 : 0.3} />
            <Svg4 className="svg4" …

尝试使用webpack加载font-awesome会给我这个错误:

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3
Module parse failed: ...\node_modules\font-awesome\fonts\fontawesome-webfont.eot?v=4.6.3 Unexpected character '?' (1:0)
You may need an appropriate loader to handle this file type.

我试图在这样的React组件中导入font-awesome:

import "font-awesome/scss/font-awesome.scss";

这是我的webpack.config.js的样子.我想将font-awesome和相关资产与其他所有资源分开加载,即因为我已经加载了带有babel的SVG,但是不想用font-awesome来做.

{
    test: /\.scss/,
    loader: ExtractPlugin.extract("style", "css!sass")
},
{
    test: /\.svg$/,
    loader: "babel!svg-react",
    exclude: /node_modules/
},
{
    test: /\.ttf$/,
    loader: "file-loader?mimetype=application/octet-stream&name=[name].[ext]",
    exclude: /node_modules/
},
{
    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&mimetype=application/font-woff&name=[name].[ext]",
    exclude: /node_modules/
},
{
    test: /\.(otf|eot|png|svg|ttf|woff|woff2)(\?[\s\S]+)?$/,
    loader: "url?limit=10000",
    include: "node_modules/font-awesome/fonts"
}

我也尝试过这样的正则表达式而且它不起作用:

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000" }