Javascript Browserify与grunt Reach JJS和yii2供应商路径合作

背景

我正在尝试使用Browserify设置一个Yii2项目来管理JS依赖性。由于Yii2将JS和CSS依赖性放在

vendor/bower

目录中，因此我试图配置Browserify，将其用作供应商依赖性的包含路径

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

问题

当我尝试使用Grunt任务编译我的js文件时，我在尝试查找

React

（js项目中的第一个包含）时遇到了一个错误

错误：无法从“{my working directory}/modules/contact/asset/js”中找到模块“react”

代码

我已安装React（bower安装）并可在我的

供应商/bower

目录中找到。我试图构建的项目JS src文件位于

modules/contact/asset/JS/

中。在我的JS文件中，我将React包含在文件的顶部

modules/contact/asset/js/main.jsa

var React = require('react');

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

...

我已经用include路径设置了Grunt browserify任务，这样browserify就知道如何找到我的include，我还添加了react转换，这样JSX就可以编译成js

grunfile.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无法找到react或其他包含项？

您不能也不应该从web访问供应商目录。如果您的网站是从

web

文件夹加载的，则您只能访问

web

目录中的文件和文件夹

您可以使用

AssetBundle

从

vendor/bower

目录注册脚本：

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

请参阅更多信息。

我的问题在此步骤之前（构建时而非运行时），因此我应该能够访问供应商/bower。我正在使用browserify预编译一个js文件，并将其放置在web目录

/modules/contact/web/js/main.min.js

，然后按照您提到的方式加载它。