Browserify使用grunt ReacjJS和yii2供应商路径

背景

我正在尝试使用Browserify设置Yii2项目来管理JS依赖关系。 由于Yii2将JS和CSS依赖放置在vendor/bower目录中,我试图将Browserify配置为使用它作为供应商依赖的包含路径。

我有一个Grunt任务设置来运行我的js构建。

问题

当我尝试使用Grunt任务编译我的js文件时,发现尝试查找React (第一个包含在我的js项目中)的错误。

Error: Cannot find module 'react' from '{my-working-directory}/modules/contact/asset/js'

我安装了React(bower install),并在我的vendor/bower目录中提供。 我正在尝试构建的项目JS src文件位于modules/contact/asset/js/ 。 在我的JS文件中,我在文件的顶部添加了React。

模块/接触/资产/ JS / main.jsa

var React = require('react');

var component = React.createClass({
    render: function() {
       ...
    }
});

...

我已经使用包含路径设置了Grunt browserify任务,以便browserify知道如何找到我的包含,我还额外添加了反应转换,以便将JSX编译为js。

Gruntfile.js

...

browserify: {

    options: {
        transform: [ require('grunt-react').browserify ], 

        browserifyOptions: {
            paths: [
                './vendor/bower/',
                './modules/contact/asset/js/'
            ]
        }
    },

    client: {
        src: [
            './modules/contact/asset/js/*.js'
        ],
            dest: './modules/contact/web/js/main.min.js'
    }
},

...

为什么browserify无法找到反应或其他包含?


您不能也不应该从Web访问vendor目录。 如果您的网站从web文件夹加载,那么您只能访问web目录中的文件和文件夹。

您可以使用AssetBundlevendor/bower目录注册脚本:

class ReactAsset extends AssetBundle
{
    public $sourcePath = '@bower';
    public $js = [
        'react/react.js'
    ];
}

在文档中查看更多。

链接地址: http://www.djcxy.com/p/52107.html

上一篇: Browserify working with grunt ReacjJS and yii2 vendor path

下一篇: handleClick not working