在Laravel5.5中，部分地引入符合Vue.js风格的React.js x TypeScript

2 年 ago

科, 雅

2 minutes

总结

在 Laravel 5.5 中，我們將部分引入 React.js 的方式轉換為 Vue.js 的操作。同時，我們也將引入 TypeScript。

引入TypeScript

$ npm install -D typescript @types/node @types/react @types/react-dom

创建tsconfig.json

$ ./node_modules/.bin/tsc --init

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noImplicitAny": false,
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": [
    "vendor"
  ]
}

Laravel-Mix升级

好像只有 webpack 4 才能顺利编译。

.
.
.
        "laravel-mix": "^5.0",
.
.
.

$ npm i

安装 ts-loader

$ npm i ts-loader@^8 -D

编辑webpack.mix.js文件以使用TypeScript

mix.ts('resources/assets/js/app.tsx', 'public/js');

创建resources/assets/js/app.tsx

import * as React from 'react';
import { render } from 'react-dom';

type Props = {
    title: string | null
}
const Example: React.FC<Props> = ({ title }) => (
    <div className="container">
        <div className="row">
            <div className="col-md-8 col-md-offset-2">
                <div className="panel panel-default">
                    <div className="panel-heading">Example Component</div>

                    <div className="panel-body">
                        {title}
                    </div>
                </div>
            </div>
        </div>
    </div>
);

const Element = document.getElementById('example');
if (Element) {
    const title = Element.getAttribute('title');
    render(<Example title={title} />, document.getElementById('example'));
}

在”resources/views/welcome.blade.php”文件中设置props

.
.
.
    <body>
        <div class="flex-center position-ref full-height">
            <div id="example" title="ts-react"></div>
        </div>

        <script src="{{ asset('js/app.js')}}"></script>
    </body>

编译和屏幕显示

$ npm run dev
$ php artisan serve

请看下列内容

[Laravel × React] Laravel×React(Typescript)の環境構築