SystemJS，浏览器同步设置

SystemJS, Browser Sync Setup

本文关键字：设置 同步 浏览器 SystemJS      更新时间：2023-09-26

我正在尝试遵循角度 2 设置指南，但遇到了问题。我正在使用浏览器同步，我似乎无法弄清楚如何让这段代码工作。

 <script>
   .......
  System.import('./app/boot')
        .then(null, console.error.bind(console));
  </script>

应用程序找不到/app/boot.js因为我正在使用 gulp 构建过程为应用程序提供服务。我无法使用我的"gulp serve"构建过程访问任何目录，并且正在使用浏览器同步。如何将SystemJS与浏览器同步结合使用，以便它可以找到我的boot.js文件？

对不起，如果这是一个简单的问题。我是这种构建过程的新手，通常只包含文件会很简单。谢谢。

好吧，

您没有从我们检测到代码中错误的地方发布代码。 但是，是的，Gulp 与 BrowserSync 是一个很好的组合，可以使我们的项目顺利运行。 我认为您没有正确导入引导程序文件，这可能是错误。

我仍然为我的项目使用相同的项目设置。 我在 Angular2 中使用了带有浏览器同步的 gulp 任务，您可以参考我的存储库以获取帮助。 此存储库可以帮助您找出错误所在

https://github.com/MrPardeep/Angular2-DatePicker

在更改构建过程以将所有内容编译到 dist 文件夹而不是 root 中后，我遇到了类似的问题。我尝试在 System.config 中调整 baseUrl，添加映射、路径、手动将.js扩展添加到导入等。

我学到的教训：

  1. 加载脚本和配置库的顺序至关重要。
  2. 在包含 Rx 和 angular 库之前，需要设置 System.config。
  3. 然后，您可以导入并引导应用程序。

按照@pardeep-Jain的建议查看他的日期选择器存储库，这对我有用。

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="js/libs/es6-shim.min.js"></script>
<script src="js/libs/system-polyfills.js"></script>
<script src="js/libs/angular2-polyfills.js"></script>
<script src="js/libs/system.src.js"></script>
 <script>
    System.config({
        defaultJSExtensions: true,
         map: {
            rxjs: '/node_modules/rxjs'
        },
        packages: {
            rxjs: {
            defaultExtension: 'js'
            }
        }
    });
  </script>
<script src="js/libs/Rx.js"></script>
<script src="js/libs/angular2.dev.js"></script>
<script src="js/libs/router.dev.js"></script>
<script src="js/libs/http.dev.js"></script>
<script>
    System.import('js/boot');
</script>
<link rel="stylesheet" href="css/app.css">
</head>
<base href="/">
<!-- 3. Display the application -->
<body>
<app>Loading...</app>
相关文章：