小编vij*_*jay的帖子

我正在尝试使用UglifyJS来最小化/压缩我的bundle.js文件.当我跑步时webpack -p,我得到以下内容:

ERROR in bundle.js from UglifyJs Name expected [bundle.js:105519,6]

105519行如下:

const {M, l, pattern} = __webpack_require__(862).

我正在使用React w/ES6.对于什么是错的任何想法？

我相信任何应用都应该有一个真理来源.

我的应用程序将有

• 90多种交易表格和150份报告
• 复杂的数据结构(父级,子级,计算)

所以在React中我找到了三个令人困惑的地方来存储状态:

1. 组件状态-使用时,我们不希望共享数据
2. Redux自定义商店(由开发人员管理) - 在我们想要共享数据时使用
3. Redux-form商店(由redux-form管理) - 用于验证

我开始使用redux表单进行验证,然后当我允许我访问数据的redux-form存储时,我感到困惑,因为我已经从组件状态访问数据而且还从我在redux中的自定义商店访问数据

1. Redux表单不会注册隐藏字段.要注册隐藏字段,您必须创建具有禁用属性的字段等.

2. 如果你做任何计算,如 AMOUNT = QTY*RATE; 这里用户将输入QTY和RATE并且将计算AMOUNT.在这里,它将立即反映在组件状态,但不是在redux-form状态.为了使它以redux形式反映,我们必须开火.

   this.props.dispatch(change('Invoice', 'amount', 55))

3. 如果我写计算公式代码看起来像这样,则不可能总是避免组件状态

   只有Redux形式的状态

   const amount = someReduxFormApiGet(QTY) + someReduxFormApiGet(RATE) this.props.dispatch(change('Invoice', 'amount', 55))

   只有反应状态

   onChange(){ will have set QTY & RATE in component state} const amount = this.state.QTY * this.state.RATE

   结论:如果我继续使用,redux-form我将不得不编写额外的代码以使redux-store稳定同步,其中React组件中的状态将具有handleChange()将绘制状态的函数this.state.还觉得我将在组件状态方面具有很大的灵活性

4. 如果我的数据模型变得更复杂,那么在redux-form商店中管理将非常困难.然后在这里我想不使用redux自定义存储或组件状态

5. 其他验证React输入的库不使用Redux来实现验证.它只是使用redux来管理验证的redux-form.

所以我得出结论

• Redux-form的诞生仅仅是为了验证,而不是为了管理复杂的数据模型.

• 复杂数据模型应相应地在redux自定义存储或组件状态中进行管理

• 从Redux-form的文档中可以很好地处理验证,但是出于数据建模的目的,它建议的解决方案不是100%直截了当

在决定时需要帮助

我应该使用redux-form存储进行数据建模

要么

只是用于验证

和

使用组件状态和自定义redux存储来建模数据？

基本上,我有这个非常简单的反应组件.它的作用是环绕'react-intercom',只有在状态发生变化时才会渲染它.为了简化问题,我已经将该shouldCompoenentUpdate()方法硬连接以始终返回false.

    import React from 'react';
    import Intercom from 'react-intercom';
    
    class IntercomWrapper extends React.Component {
        shouldComponentUpdate(nextProps, nextState) {
            // console.log(!!nextProps.user && nextProps.user.userId !== this.props.user.userId);
            // return !!nextProps.user && nextProps.user.userId !== this.props.user.userId;
            return false;
        }
    
        render() {
            console.log('rendering');
            return <Intercom {...this.props} />;
        }
    };
    
    export default IntercomWrapper;

会发生什么事情,它总是会重新渲染,这不应该发生.

任何人都知道为什么会发生这种情况？

在webpack中出现此错误,target = node但我已经完成target=web(默认)

我也没有在外部加载reactjs

在浏览器中加载应用程序时出现此错误

我做错了什么？

在控制台中

文件

webpack.config.js

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

const config = {
    target: 'web',
    externals: [nodeExternals()],
    entry: './src/index.js',
    output: {
        filename: '[name].bundle.js',
        path: __dirname + '/build'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.(png|svg|jpe?g|gif)$/,
                use: [{
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]'
                        }
                    }
                ]
            },
            {
                test: …

在$pod install它上面发出警告并失败

用于生成lockfile(1.5.3)的CocoaPods版本高于当前可执行文件的版本(1.5.2)

它试图说什么？

macOs:10.11.6 osx el capitan

我的pod版本是:1.5.3

什么是"当前执行"(1.5.2)意味着什么？

和

如何更新？

我试图在react-datepicker组件中实现限制或验证.我使用redux-form进行验证和规范化(实现限制)

https://redux-form.com/6.0.0-rc.1/examples/normalizing/

问题:我观察到当我们尝试在字段中输入内容时,不会调用redux-form的规范化函数和验证函数

虽然我们提交表单时未提交此值,但我需要显示一些验证错误或限制用户输入无效字符.

我为日期选择器组件创建了一个包装器,并通过redux字段在我的表单中使用它

我的日期选择器组件: -

return (
      <div className={"render-date-picker "}>
        <div className="input-error-wrapper">
          {(input.value) ? <label> {placeholder} </label> : ''}
          <DatePicker className="input form-flow" {...input}
            placeholderText={placeholder}
            selected={input.value ? moment(input.value) : null}
            maxDate={maxDate || null}
            minDate={minDate || null}
            dateFormat={isTimePicker ? "LLL" : "DD/MM/YYYY"}
            showYearDropdown
            showMonthDropdown
            disabledKeyboardNavigation
          />

          {touched && error && <span className="error-msg">{t(error)}</span>}
          <span className="bar" style={{ 'display': this.state.is_focus ? 'block' : 'none' }} ></span>
        </div>
      </div>
    );

redux表格字段: -

<Field
 name="date_of_birth"
 type="text"
 className="input form-flow extra-padding-datepicker"
 component={RenderDatePicker}
 maxDate={moment().subtract(18, "years")}
 validate={[required, …

实现webpack资产管理教程.但是webpack不在输出路径中生成css文件

webpack.config.js

const config = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/build'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(jpeg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]'
            }
          }
        ]
      }
    ]
  }
};

索引.js

  import './style.css';
  import Icon from './yo1.jpg';

  function component() {
    var element = document.createElement('div');

    element.innerHTML = 'hello webpack'
    element.classList.add('hello');

    var myIcon = new Image();
    myIcon.src = Icon;

    element.appendChild(myIcon);

    return …

为什么它不接受传播属性？我正在使用babel-preset-env.

.babelrc

{
    "presets": [
        "react",
        [
            "env",
            {
                "targets": {},
                "debug": true,
                "modules": "commonjs"
            }
        ]
    ]
}

的package.json

{
  "name": "myapp",
  "version": "0.1.0",
  "main": "index.js",
  "private": true,
  "dependencies": {
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "extract-text-webpack-plugin": "3.0.0",
    "file-loader": "0.11.2",
    "html-webpack-plugin": "^2.30.1",
    "moment": "^2.18.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.2",
    "redux": "^3.7.2",
    "redux-form": "^7.0.3",
    "style-loader": "0.18.2",
    "url-loader": "0.5.9",
    "webpack": "3.5.1",
    "webpack-dev-server": "2.7.1",
    "webpack-node-externals": "^1.6.0"
  },
  "scripts": {
    "start": "",
    "build": "webpack" …

如何在nodejs中查看Fork和Spawn创建的子进程列表？

我正在制作一个解决益智游戏的程序,它会在棋盘上找到所有可能的移动并将所有可能产生的棋盘放在一个对象中.然后它会找到所得到的电路板的所有可能移动,依此类推.该对象看起来像这样:

{
  "board": {
      "starts": [[0,0],[0,3]],
      "blocks": [[3,0],[3,3]],
      "ends":   [[2,4]]
  },
  "possibleMoves": [
    {
      "board": {
        "starts": [[0,0],[2,3]],
        "blocks": [[3,0],[3,3]],
        "ends":   [[2,4]]
      },
      "possibleMoves":[
        {
          "board": {},
          "possibleMoves": [{}]
        }
      ]
    },
    {
      "board": {
        "starts": [[0,3]],
        "blocks": [[3,0],[3,3]],
        "ends":   [[2,4]]
      },
      "possibleMoves":[{}]
    }]
}

我可以弄清楚如何从顶层电路板添加可能的移动,但我无法弄清楚如何在第二级循环所有生成的电路板并找出它们可能的移动,然后循环遍历所有第三级电路板等等.如何使用广度优先搜索添加可能的移动并遍历对象？