Question

我正在研究reactJS。我在两个两个javaScript文件中分别创建了两个名为App和Layout的组件。我的应用应该使用布局。

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="react-0.14.7.js"></script>
<script src="react-dom-0.14.7.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel" src="/js/components/App/App.js" ></script>
</body>
</html>

//App.js

var Layout = require('/js/components/Layout/Layout.js');    
var App = React.createClass({
  render() {
      return(
          <div>
            <p>hello from App</p>
            <Layout/>
          </div>
      )
  }
});

ReactDOM.render(
        <App />,
        document.getElementById('root')
    );

//Layout.js

Var Layout= React.createClass({
    render:function(){
        return(
            <div>
                <p>hi from Layout</p>
            </div>
        ) 
    },

});
//even i tried 'export default Layout'

当我从（'/ js/components/Layout/Layout.js'）使用导入布局时。它出错意外令牌导入。

使用require（'/ js / components / Layout / Layout.js'）。它给出了错误 require not defined 。

我尝试了很多方法将Layout放到App中，但我找到的唯一解决方案是使用Browserify，node和npm，webpack ......

但是我希望它既不用依赖包也不用jar。我有什么方法可以完成这件事吗？

提前致谢。

Answer 1

简短的回答是否定的。 Browserify和Webpack都是模块捆绑包，将为您进行文件捆绑。我建议你先了解这两种工具的用途。

Browserify网站告诉你的第一件事就是它的唯一目的：

Browserify允许您通过捆绑所有依赖项来在浏览器中要求（“模块”）。

Webpack也是如此：

Webpack是现代JavaScript应用程序的模块捆绑器。当webpack处理您的应用程序时，它会递归地构建一个包含应用程序所需的每个模块的依赖关系图，然后将所有这些模块打包成少量的包 - 通常只有一个 - 由浏览器加载。

这些只是对它们两者的非常简短的描述。

在Reactjs中导出/导入而不使用依赖项

1 个答案: