我已经在我的laravel项目中安装了使用npm的ReactJS和Babel。它们位于 npm 本身创建的"node_modules"文件夹中。但问题是如果我使用以下代码导入,我的反应代码似乎不起作用:
<script src="node_modules/react/react.js"></script>
<script src="node_modules/react-dom/dist/react-dom.js"></script>
<script src="node_modules/babel-core/lib/api/browser.js"></script>
路径的格式是否正确?因为如果我只是使用这种类型的代码进行 ReactJS 所需的所有导入:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
如果我只是使用互联网来获取软件包,它似乎有效。
我的反应代码在这里:
<div id="myapp"></div>
<!-- JavaScripts -->
<script type="text/babel">
var BuckyComponent = React.createClass({
render: function() {
return(
<h2>{this.props.user} likes to eat {this.props.food}</h2>
);
}
});
React.render(
<div>
<BuckyComponent user="Arth" food="Bacon"/>
<BuckyComponent user="Arth" food="Pork"/>
<BuckyComponent user="Arth" food="Chicken"/>
</div>,
document.getElementById('myapp')
);
</script>
这不是你在 Laravel 中使用 Npm/Bower 包的方式。任何一个包管理器都会将其文件存储在Laravel公共文件夹之外,第一个存储在node_modules
内,后者存储在bower_components
内。因此,它们不打算公开可用。
那么,您将如何在Laravel中使用他们的软件包呢?使用像Laravel Elixir这样的构建系统,只是Gulp甚至Grunt。
复制 React 和 Babel 的分发文件、连接它们、缩小它们等等完全取决于你。您最终会将它们放在公共文件夹中,但在您需要对所有内容进行很好的串联和缩小以提供尽可能少的文件数量及其大小之前。