javascript - 如何在 Yii2 Asset Bundle 中使用 JSX 文件

Question

我有 Yii2 项目设置，我决定使用 Facebook 的 JavaScript 框架 React.js它提供了一种在 JavaScript 代码中声明 HTML 模板的便捷方式，称为 JSX .

我的 JavaScript 如下所示:

(function () {
    'use strict';

    MyBlock = React.createClass({
        getInitialState: function () {
            return {data: []};
        },
        componentDidMount: function () {
            $.ajax({
                url: '/api/',
                dataType: 'json',

                success: function (data) {
                    this.setState({ data: data });
                }.bind(this)
            });
        },

        render: function () {
            <div class="block">
                {this.props.variable}
            </div>
        }
    });

    React.render(
        <ProfileQuestion />,
        document.getElementById('profile_question_wrapper')
    );
}());

AssetBundle 帮助我在我的 View 中包含所需的库，因此我将来自 CDN 的 React.JS 和 JSX 文件添加到我的 AssetBundle 中:

class MyAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
    ];
    public $js = [
        '//fb.me/react-0.13.1.min.js',
        '//fb.me/JSXTransformer-0.13.1.js',
        'js/app.jsx',
    ];
    public $depends = [
        'app\assets\AppAsset'
    ];
}

但是，当它在我的页面底部添加脚本时，它显示为

<script src="/js/app.jsx"></script>

并且没有将脚本类型标记为 text/jsx 因此 JSX Transform 库无法识别 JSX 语法并且 .jsx 文件解释为简单的 JavaScript，从而在 JSX 上抛出语法错误消息风格。

SyntaxError: Unexpected token '<'

有没有什么方法可以在 AssetBundle 中指定 .jsx 文件在呈现时在脚本元素中的类型应为 text/jsx？

Answer 1

您将需要使用两个 Assets 来执行此操作您可以将属性传递给 js 文件的脚本标记。但是它将传递给 JS 数组中的所有文件，因此您需要有两个 Assets 类。像这样

class MyAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
    ];
    public $js = [
        '//fb.me/react-0.13.1.min.js',
        '//fb.me/JSXTransformer-0.13.1.js',
    ];
    public $depends = [
        'app\assets\AppAsset'
    ];
}

二等舱

class JSXAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';

    public $js = [
        'js/app.jsx',
    ];
    public jsOptions = ['type'=>'text/jsx'];
    public $depends = [
        'app\assets\MyAsset'
    ];
}

并在您的 View 中包含第二个类。 jsOptions 调用 View::registerjsFile函数依次调用 Html 类中的 jsFile 辅助函数 Here .如果没有特别定义的选项将作为脚本标签属性传递