小编Him*_*mel的帖子

显示最近发布的npm包版本,包括beta版本

如何显示最近发布的npm包版本,包括beta/unstable版本?

这个问题有助于确定如何获得最新的稳定版本(不显示测试版),但我希望看到几个最新版本的列表,包括测试版.

$ npm view webpack versions

  ...
  '0.7.9',
  '0.7.11',
  '0.7.12',
  '0.7.13',
  '0.7.14',
  '0.7.15',
  '0.7.16',
  '0.7.17',
  '0.8.0-beta1',
  '0.8.0-beta2',
  ... 316 more items ]
Run Code Online (Sandbox Code Playgroud)

我想展示这个列表的"尾部",而不是看到发布的前几个包.这可能吗?

如何显示特定npm包的最新发布版本列表?

command-line-interface node.js npm

22
推荐指数
2
解决办法
4184
查看次数

通过shouldComponentUpdate对无状态功能组件进行优化

我知道React优化的一个关键点是使用shouldComponentUpdate()生命周期钩子来检查当前状态/道具对下一个/状态道具.

如果我使用大多数功能组件构建React应用程序,而不是基于类的有状态组件(可以访问生命周期钩子),我是否放弃了这种特定的优化?我可以在功能组件内执行类似的检查吗?

javascript reactjs

10
推荐指数
1
解决办法
1545
查看次数

从子组件访问onChange事件(React/Redux)

我有一个容器组件,它使用输入呈现子组件.我想在onChange事件期间访问子组件的值,但我得到一个"代理"对象而不是输入值.

容器组件

...

class InputContainer extends React.Component {

    handleChange = (val) => {
        console.log(val);

        // => Proxy { [[Handler]]: Object, [[Target]]: SyntheticEvent, [[isRevoked]]: false }
    }

    render() {
        return <Input handleChange={this.handleChange} {...this.props} />;
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(InputContainer);
Run Code Online (Sandbox Code Playgroud)

输入组件

export default function Input(props) {
    return <input onChange={props.handleChange} />;
}
Run Code Online (Sandbox Code Playgroud)

为什么我得到这个"代理"对象,我如何从中获取输入的值InputContainer?

javascript reactjs redux

10
推荐指数
1
解决办法
8668
查看次数

在没有Traceur的情况下在生产中使用SystemJS

我想使用SystemJS根据需要动态导入AMD模块和System.import()模块.当然,我可以包括<script src="system.js"></script>,但我收到的错误是Traceur没有定义.我故意不希望包括Traceur,或任何其他的依赖,以保持请求到最低限度.是否有一个版本的SystemJS允许System.import在一个半轻量级脚本中导入AMD和调用?

javascript systemjs

9
推荐指数
1
解决办法
871
查看次数

使用SystemJS/jspm在生产中加载async,es5模块

我希望能够使用异步加载依赖项System.import(),但不必在生产运行时将ES6转换为ES5.我希望将这些模块转换为单独的ES5模块,这些模块仅在需要时才能获取.我不希望它们成为主要包的一部分.

开发工作流程

这些模块在我的生产构建期间有效加载,这实际上令人担忧,因为我不想包含任何允许转换的依赖项.

我有一个工作流程,我正在使用jspm bundle并jspm unbundle在开发和生产配置之间切换.在我的开发环境中,我包括以下脚本:

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>

<script>
    System.import('src/main');
</script>
Run Code Online (Sandbox Code Playgroud)

生产工作流程

在生产中,我正在使用jspm bundle --inject注入bundles选项System.config.这有效地只加载了必要的文件:

system.js
config.js
main.bundle.js
Run Code Online (Sandbox Code Playgroud)

当我尝试System.import()在生产期间异步加载模块时,它会正常加载,这意味着在生产过程中浏览器中会发生转换.


问题

  1. 我可以很容易地将我的每个模块构建到AMD中,但是我怎样才能使用异步和单独获取它们System.import()?

  2. 我还想确保尽可能少地包含浏览器开销,这意味着不包括任何执行转换的脚本.有没有一种方法可以包含system.js没有透明功能的方法?

javascript systemjs jspm

9
推荐指数
1
解决办法
492
查看次数

Firebase部署404找不到index.html

我正在跑步firebase init,它正在创造firebase.json.firebase.json在apps根目录中,指向我的公共目录app.看这里:

firebase.json

{
  "firebase": "harrison",
  "public": "app",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}
Run Code Online (Sandbox Code Playgroud)

这是我的firebase.json所在的地方: 在此输入图像描述

这是我的公共目录,app: 在此输入图像描述

当我从命令行运行时firebase deploy,一切似乎都正确上传.然后我运行firebase open或等效地转到部署站点,我得到一个404说我的index.html在指定目录中清除时未找到.

deployment firebase-hosting

7
推荐指数
5
解决办法
7304
查看次数

等待$ rootScope值在页面加载之前在Angular中解析

所以我遇到了这个问题,我正在使用ngView,我有一个静态的导航栏,如下所示:

<div ng-include="'views/nav.html'" ng-controller="NavCtrl"></div>
<div class="container-fluid" ng-view=""></div>
Run Code Online (Sandbox Code Playgroud)

如果用户已注销(使用ng-show),则此nav.html(导航栏)显示一组特定功能(登录,注册),如果用户已登录,则显示其他菜单选项.由于当前大量使用用户,我把这些信息放在$ rootScope中,如下所示:$rootScope.currentUser- 返回用户对象,并$rootScope.signedIn返回布尔值.

基本上,我想延迟导航加载直到$rootScope.signedIn加载,无论是真还是假,并且$rootScope.currentUser是一个对象或未定义.

我已经尝试过在我的app.config路由中创建promises,但我不确定如何返回对永久视图状态的promise.

任何帮助表示赞赏.

编辑:

这是我广播登录的服务.只要用户通过身份验证/登录或注销时,就会触发此消息:

    var authClient = new FirebaseSimpleLogin(refDownload, function(error, user) {
        if (error) {
            incorrectLogin(error.code);
        }
        if (user) {
            // user authenticated
            $rootScope.$broadcast('login');
            correctLogin(user.id);
        } else {
            // user is logged out
            $rootScope.$broadcast('logout');
        }
    });
Run Code Online (Sandbox Code Playgroud)

此服务以下列方式注入NavCtrl控制器:

    $scope.isHidden = true;

    $scope.$on('login', function() {
        console.log('login broadcast');
        $scope.isHidden = false;
    });

    $scope.$on('logout', function() {
        console.log('broadcast logout');
        $scope.isHidden = true;
    });
Run Code Online (Sandbox Code Playgroud)

该控制器的模板是nav.html,如下所示:

<div …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angular-promise

6
推荐指数
1
解决办法
7170
查看次数

获取所有已声明模块导入的列表(SystemJS)

我正在使用jspm和SystemJS导入ES2015模块.

是否可以通过System对象或其他任何位置获取项目中所有导入模块的列表?我可以通过访问我的项目特定模块System._loader.moduleRecords,但是我通过jspm安装的模块(例如d3,jquery)不会出现在此列表中.

System._loader.modules包含所有模块的列表,但遗憾的是还包括转换我的代码和模块加载包所需的模块列表.

System._loader.moduleRecords (项目模块) 在此输入图像描述

System._loader.modules (项目模块,库,transile包) 在此输入图像描述

我只想要一个已声明的导入列表,特别是我导入的导入列表import x from 'x'.这应该包括这两个项目的模块和库,但不巴贝尔/模块加载相关的模块.我想解决方案不涉及使用正则表达式进行过滤.

javascript ecmascript-6 systemjs jspm

6
推荐指数
1
解决办法
1231
查看次数

Redux reducer用于按名称从列表中删除对象

我见过的关于从列表中删除项目的大多数示例都使用列表中项目的索引,例如:

case REMOVE:
  return [
    ...list.slice(0, action.index)
    ...list.slice(action.index + 1)
  ]
Run Code Online (Sandbox Code Playgroud)

但是,如果我想调度一个无法访问列表中项目索引但只能访问名称的操作,我该如何过滤一组对象并仅删除一个具有n名称的对象?

ecmascript-6 reactjs redux react-redux

5
推荐指数
2
解决办法
6370
查看次数

来自React / Redux应用程序中组件的权限检查

我正在尝试与一个团队一起构建一个React应用程序,并试图找出创建一个“高阶” React组件(一个包装另一个组件)以与Redux数据存储结合执行身份验证的最佳方法。

到目前为止,我的方法是创建一个模块,该模块由一个函数组成,该函数根据是否有经过身份验证的用户来返回新的React组件。

export default function auth(Component) {

    class Authenticated extends React.Component {

        // conditional logic

        render(){
            const isAuth = this.props.isAuthenticated;

            return (
                <div>
                    {isAuth ? <Component {...this.props} /> : null}
                </div>
            )
        }
    }

    ...

    return connect(mapStateToProps)(Authenticated);

}
Run Code Online (Sandbox Code Playgroud)

这使得我团队中的其他人可以轻松地指定某个组件是否需要某些权限。

render() {
    return auth(<MyComponent />);
}
Run Code Online (Sandbox Code Playgroud)

如果您要执行基于角色的检查,则此方法很有意义,因为您可能只有几个角色。在这种情况下,您可以致电auth(<MyComponent />, admin)。

对于基于权限的检查,传递参数变得笨拙。但是,在构建组件时(以及在团队环境中可管理)在组件级别指定权限可能是可行的。设置静态方法/属性似乎是一个不错的解决方案,但据我所知,es6类导出为函数,但不会显示可调用方法。

有没有办法访问导出的React组件的属性/方法,以便可以从包含的组件中访问它们?

javascript ecmascript-6 reactjs redux react-redux

5
推荐指数
1
解决办法
9854
查看次数