Question

背景

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

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

问题

当我尝试使用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知道如何查找我的包含，我还添加了react变换，以便将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'
    }
},

...

问题

为什么浏览器无法找到反应或其他包含？

Answer 1

您无法并且无法从网络访问vendor目录。如果您的网站从web文件夹加载，那么您只能访问web目录中的文件和文件夹。

您可以使用AssetBundle从vendor/bower目录注册脚本：

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

查看更多in documentation。

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

1 个答案: