README

此软件包允许您在 blade 模板中安全地编写现代的内联 JavaScript。编译仅在 blade 模板缓存时间发生，因此对生产性能没有影响。

安装

通过 composer 安装此包

composer require flat3/babel-blade

编译器期望在相同的 PATH 上安装 nodejs，该 PATH 正在被您的 PHP 解释器使用。

您必须在 Laravel 项目中安装 babel（以及通常的 env 预设）

npm install --dev @babel/core @babel/preset-env

编译器从视图根目录（通常是 resources/views）开始查找 babel 配置，并向上搜索。因此，您可以在项目中使用任何现有的 babel 配置文件，或者您可以在 resources/views 中创建一个，该文件将仅用于 babel-blade。

例如在 resources/views/.babelrc.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        }
      }
    ]
  ]
}

使用方法

Babel-blade 会查找使用字符串字面量 <script type="text/babel"> 的脚本块，因此不会修改其他 JavaScript 或脚本块。

此使用上述配置的脚本块

<script type="text/babel">
(...args) => console.log(...args)
</script>

将在编译时转换为

<script type="text/javascript">
(function() { "use strict";

(function () {
  var _console;

  return (_console = console).log.apply(_console, arguments);
});
  
})();
</script>

Laravel Vapor

Vapor 构建过程在首次服务器端加载时清除视图缓存并构建模板。这与 babel-blade 不兼容，因为 nodejs 等将不可用。

为了解决这个问题，请在 vapor 部署过程中作为 BABEL_BLADE_CACHE=1 php artisan view:cache 调用构建。这将将模板本地编译为视图根目录中的 blade 文件，并在编译期间添加 @include 以将编译后的代码拉入。

填充

Babel 使用生成器实现 async/await，这些生成器需要在旧平台上填充。如果没有填充，您将看到错误

ReferenceError: Can't find variable: regeneratorRuntime

为了解决这个问题，您可以包含一个额外的脚本标签，该标签包含填充，例如

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.12.1/polyfill.min.js"></script>

Blade 指令

由于 babel-blade 在编译过程中的早期运行，因此像 @json($src) 这样的指令还没有被解析，并将原样传递给 Babel。

然后您将得到类似 Support for the experimental syntax 'decorators-legacy' isn't currently enabled 的失败，因为 Babel 正在尝试解析 @json。

由于 blade 的执行顺序，可能没有解决方案，因此请使用 "{{$src}}" 并进行适当的转义。

许可

版权 © Chris Lloyd

Flat3 babel-blade 是开源软件，许可协议为 [MIT 许可证]