标签: es6-module-loader

假设我有一个网站，其中包含多个标签，并使用react.js构建，每个标签包含大量数据。通常，Webpack捆绑包会将应用程序反应为一个捆绑包，但是如果您从不访问其中一个选项卡，这将浪费资源。是否有可能将它分成单独的捆绑包，而不必重新捆绑react core和react DOM，然后根据请求调用这些额外的静态模块？

我愿意接受不同的建议-webpack，systemjs等。

有人可以帮助我了解命名空间和模块的不同之处吗？

AWS.d.ts

declare module AWS {
  ...
  ...
}
export = AWS

helper.d.ts

export declare namespace Helpers{
  ...
  ...
}

app.component.d.ts

import {Helpers} from 'mystartup_commons'; //<= works fine
import {AWS} from 'aws-sdk';

错误：

/Users/ishandutta2007/Documents/Projects/myproj/src/app/app.component.ts (1,9) 中的错误：模块 '"/Users/is handutta2007/Documents/Projects/myproj/node_modules/aws-sdk/typings /AWS"' 没有导出成员 'AWS'。)

我的代码组织如下:

哪里,

资源/ ActionLog /组件/ Layout.js

import React from 'react';

export default class Layout extends React.Component {
    render() {
        return (
            <p>Test</p>
        );
    }
}

资源/ ActionLog /组件/ index.js

export * from './Layout';

资源/ ActionLog/index.js

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

import Layout from './Components'; // <--- ISSUE HERE.

const app = document.getElementById('app');
ReactDOM.render(
    <Layout/>,
    app
);

为什么不Layout使用此设置导入？

如果我改变要阅读的行,

import Layout from './Components/Layout';

它工作正常,但Layout总是未定义!即使我尝试,

import Layout from './Components/index';

我使用webpack作为我的模块捆绑器,并且之前已经实现了类似的东西,我只是不明白为什么/如何这是不同的..

我正在使用带有babel polyphill的webpack,所以我可以在es6中编写我的代码.

我不明白webpack如何使用polyfill所以我的代码可以在像IE这样的浏览器中得到支持？

例如,假设我们有一个简单的类

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  } 
}

由于IE不了解class关键字是什么,我的代码需要更改为:

function Polygon(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  } 

这些更改是在运行时发生的(使用类似于应该解释的代码的引用),还是webpack编译我的代码,以便生成的代码只是es5？

我的意思是,如果在运行时发生这种情况,我的包中会有更多的代码:我编写的代码+ polyphill ......

实际上,当使用webpack时,我的代码(更多)更大.

如果在运行时没有出现,那么为什么我必须将polyphill包含在我的依赖项中(而不是在我的dev依赖项中)？

谢谢