Question

我有一个Angular版本1.7.2的项目。我正在尝试将React添加到该项目中，并且使用JSX语法需要Babel。我们还在Spring框架中使用服务器端渲染，我们的布局文件是.jsp文件。

例如，我在index.jsp中包含一条指令，其代码如下：

<%@ page contentType="text/html" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script type="text/javascript" src="./libFiles.js"></script> // angular, etc...
        <script type="text/babel" src="./myDirective.js" defer></script>

        // etc...
  </head>

</html>

然后在myDirective.js中：

(function () {
  'use strict';

  angular
    .module('app.core')
    .directive('myDirective', myDirective);


  function myDirective() { // Doesn't seem to get executed with "text/babel" or "text/jsx"

    return {
      template: '<div id="myDirective">Hello</div>',
      link,
    };

    function link() {

      // Do things
    }
  }

})();

最后在.jsp文件中，我尝试使用指令：

<my-directive></my-directive>

如果我使用脚本类型“ text / javascript”，同时包含myDirective.js文件，则它可以工作。如果我将脚本类型替换为“ text / babel”或“ text / jsx”，则不会呈现任何内容。该脚本仍会执行，除了ngReact函数。

为什么myDirective函数没有执行？在没有开发服务器的情况下，如何在运行时伪造我的文件？

编辑：与“ text / javascript”相比，使用“ text / babel”似乎会延迟脚本的执行，并且与所有其他依赖项相比，执行最后执行的脚本。

通过Angularjs实时使用babel

0 个答案: