README

日语

PHP项目的JavaScript UI应用程序骨架

不同于PHP的模板引擎，服务器端或客户端的JavaScript负责创建视图。服务器端渲染使用V8Js或Node.js完成。包含Redux React示例代码，但您可以自由选择JS模板引擎或UI框架。

Webpack 2 模块打包器
Gulp 构建系统
Babel JS编译器
Karma 测试运行器
Mocha 测试框架
Chai BDD / TDD断言框架
Enzyme React的JavaScript测试工具
Eslint JS和JSX的代码风格检查工具
Phantomjs 可脚本化无头WebKit
React UI框架
React Hot Loader 3 + BrowserSync 实时更新
Redux 状态容器

渲染

SSR仅限

在服务器端渲染静态页面。使用JS的模板引擎和SSR启用的视图库，如ReactJs或VueJs。

SSR + CSR

在服务器端生成DOM并将其转换为HTML。生成的DOM传递给浏览器JS。我们使用SSR启用的视图库，如ReactJs和VueJs，可以生成DOM。

CSR仅限

在服务器端仅创建JSON，并使用CSR生成DOM或HTML。通常，文档根的非DOM部分（如OGP <meta> 标签）在PHP中渲染。

先决条件

Node
Yarn
V8Js PHP扩展（可选）

演示

构建和运行示例Redux代码。

composer create-project koriym/js-ui-skeleton -n -s dev js-ui
cd js-ui
yarn install
yarn run ui

安装

有两种方式可以将JS UI应用程序作为一个独立项目，并将其包含在现有的PHP项目中。

新安装

composer create-project koriym/js-ui-skeleton -n -s dev MyVendor.MyUi
cd MyVendor.MyUi
yarn install

当将其作为一个包创建并从PHP项目中使用时，将此包添加到依赖中。由于您可以自己管理版本，因此从PHP项目中执行UI依赖管理很容易，并且可以并行工作。

添加到现有项目

将ui文件夹和 package.json添加到现有项目中。

cd path/to/project
composer require koriym/js-ui-skeleton 1.x-dev
cp -r vendor/koriym/js-ui-skeleton/ui .
cp vendor/koriym/js-ui-skeleton/package.json .
yarn install

目录结构如下。

├── src             # php
├── tests           # php
├── package.json    # JS
├── node_modules    # JS
├── ui              # JS
│   ├── .babelrc
│   ├── .eslintrc
│   ├── entry.js
│   ├── gulpfile.js
│   ├── karma.conf.js
│   ├── src
│   ├── test
│   ├── ui.config.js
│   └── webpack.config.js
└── vendor

UI配置

编辑ui/ui.config.js以指定Web公共文件夹和Webpack打包JS文件的输出目录。

const path = require('path');
  
module.exports = {
  public: path.join(__dirname, '../public'),
  build: path.join(__dirname, '../public/dist'),
};

入口文件

在ui/entry.js中指定入口文件。SSR文件添加_ssr后缀。

module.exports = {
  index_ssr: 'src/page/index/server',
  index: 'src/page/index/client',
};

运行配置

在ui/dev/config/目录中设置JS应用程序配置文件。

<?php
$app = 'index';
$initialState = [
    'hello' => ['name' => 'World']
];
$ssrMetas = [
    'title' => 'page-title'
];

return [$app, $initialState, $ssrMetas];

$app 是应用程序名称，对应文件 public/build/dist/{$app}.bundle.js。 $initialState 是JS应用程序的初始状态（对于模板引擎，它是对模板赋予的值）$ssrMetas 仅在SSR中传递。

将设置文件保存为任意名称，您在屏幕上选择它并执行。

创建UI应用程序

服务器端

在一个JS渲染器应用程序中，实现接受两个参数（preloadedState 和 metas）并返回HTML字符串的 render 函数。此示例说明了典型的SSR Redux应用程序。

// server.js
import render from './render';

global.render = render;

// render.js
const render = (preloadedState, metas) => {
  return
  `<html>
    <head>
      <title>${escape(metas.title)}</title>
    </head>
    <body>
      <script>window.__PRELOADED_STATE__ = ${serialize(preloadedState)}</script>
      <script src="/build/index.bundle.js"></script>
    <body>
  </html>`
};
export default render;

客户端

使用由SSR提供的 preloadedState 进行渲染。然后将生成的DOM插入到文档根DOM中以继续。

// client.js
const preloadedState = window.__PRELOADED_STATE__;
const store = configureStore(preloadedState);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

运行JS应用程序

执行使用JavaScript创建的UI应用程序。

yarn run ui

执行上述命令，选择并执行屏幕上出现的渲染方法。您还可以在浏览器中运行服务器端代码以简化调试。

命令

运行PHP应用程序

在PHP内置服务器上启动PHP应用程序。

yarn start

以同步方式运行PHP应用程序

使用热模块加载器和browserSync启动PHP应用程序。

yarn run dev

为了监控 phpmd 和 phpcs，编辑项目根目录中的 phpmd.xml 和 phpcs.xml 安装 package.json 的dev命令，将其从 dev 更改为dev-qa。

"Dev": "cross-env NODE_ENV = development gulp - gulpfile ui / gulpfile.js dev - qa",

测试

yarn test

通过 Karma + Mocha + Chai 监控JS测试执行。编辑 karma.conf.js 以更改设置。

代码风格检查

yarn run lint

运行 Eslint。编辑 .eslintrc 以更改设置。

SSR实用库

Baracoa 是SSR的实用库。支持V8快照以提升性能。

korium / js-ui-skeleton

维护者

详细信息