在基本的 vanilla js 页面中使用 systemjs答案

【问题标题】：use systemjs in a basic vanilla js page在基本的 vanilla js 页面中使用 systemjs
【发布时间】：2019-05-24 11:03:41
【问题描述】：

我正在尝试在我正在开发的一个简单应用程序中使用来自 Syncfusion 的图表组件。

它是纯 JS，没有 Angular，没有 React，没有 TypeScript。我什至没用过 NPM

我的问题是我无法导入必要的文件来使图表组件工作！

按照此处建立的文档 https://ej2.syncfusion.com/javascript/documentation/chart/es5-getting-started/

我已经在我的文件夹 /_assets/systemjs.config.js 中添加了一个 systemjs.config.js 并且我是这样配置的：

System.config({
    paths: {
        'syncfusion:': './_assets/vendors/Syncfusion/@syncfusion',
    },
    map: {
        app: 'app',

        //Syncfusion packages mapping
        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
        ,
    },
    packages: {
        'app': { main: 'app', defaultExtension: 'js' }
    }
});

它谈论“应用程序”，但我没有 app 变量...我没有使用 Angular，也没有使用 React。

在文件夹 /_assets/vendors/Syncfusion/ 我已经插入了 Syncfusion 的所有脚本文件：

然后在我的 HTML 页面中添加：

<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="/_assets/js/systemjs.config.js"></script>

但是当我从本地开发网络服务器运行页面时，我得到：

Test:94 Uncaught ReferenceError: ej is not defined

【问题讨论】：

标签： javascript systemjs syncfusion

【解决方案1】：

我们已经分析了您的查询。我们已经根据您的要求准备了样品。要渲染 EJ2 图表，您只需参考以下脚本。无需像您所做的配置一样配置 system.cofig。我们已经从我们这边更改了文档。它将在六月更新。

请找到下面的代码sn-p来实现这个要求，

<head>
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div id="line-container" align="center"></div>  
 <script>
var chart = new ej.charts.Chart({
  //Initializing 
});
chart.appendTo('#line-container');
  </script>
</body>

示例链接：https://stackblitz.com/edit/3ugmn8?file=index.html

如果您有任何疑问，请回复我们。

问候，

宝贝。

【讨论】：

谢谢，但我不想加载整个包以仅使用其中的一小部分。

【解决方案2】：

我们已经分析了您的查询。如果您只想加载图表脚本而不是加载整个脚本。您可以单独参考图表及其依赖脚本。

请找到下面的代码sn-p来实现这个要求，

<head>
    <script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js"></script>
    <script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js"></script>
    <script src="http://cdn.syncfusion.com/ej2/ej2-svg-base/dist/global/ej2-svg-base.min.js"></script>
    <script src="http://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js"></script>
</head>

<body>
  <div id="container"></div>
  <script>
var chart = new ej.charts.Chart({
  // Other customization
});
chart.appendTo('#container');
</script>
</body>

您可以从下面的链接中找到示例供您参考，图表样本

如果您有任何疑问，请回复我们。

问候，宝贝。

【讨论】：

太完美了，我在哪里可以找到每个 ej2 控件的依赖项列表？