浏览器化使用咕噜咕噜的 ReacjJS 和 yii2 供应商路径

Browserify working with grunt ReacjJS and yii2 vendor path

本文关键字：yii2 供应商 路径 ReacjJS 浏览器      更新时间：2023-09-26

Background

我正在尝试使用浏览器设置一个 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 安装）并在我的 vendor/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() {
       ...
    }
});
...

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

咕噜

咕噜.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'
    }
},
...

问题

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

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

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

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

在文档中查看更多信息。

相关文章：