SystemJS 映射的 Webpack 解决方案

Question

AngularCLI 的发布放弃了 SystemJS，转而支持 WebPack。

然而，SyncFusion 在 Angular 的 EJ2 库中还不支持 WebPack。他们指示使用 SystemJS 映射

"@syncfusion/ej2-grids": "node_modules/@syncfusion/ej2-grids/dist/ej2-grids.umd.min.js",
"@syncfusion/ej2-ng-grids": "node_modules/@syncfusion/ej2-ng-grids/dist/ej2-ng-grids.umd.min.js",

在本教程中 http://ej2.syncfusion.com/angular/documentation/grid/getting-started.html#configuring-system-js

如何在等待 SyncFusion 支持它的同时解决这个依赖关系并使其与 WebPack 兼容？

Answer 1

在 Webpack 中用 resolve.alias:

做同样的事情

...
resolve: {
  alias: {
    "@syncfusion/ej2-grids$": "@syncfusion/ej2-grids/dist/ej2-grids.umd.min.js",
    ...
}

在 SystemJS 中使用映射的原因是可以传输单个预构建的 UMD 文件，而不是传输和构建单独的文件。这不是 Webpack 的问题。虽然 UMD 模块可以稍微加快这个过程，但使用包中未捆绑的 ES6 模块（如果可用）允许使用 tree shaking 并可能减少应用程序占用空间。

Answer 2

Essential JS2 Angular 组件具有 Webpack 支持，无需任何解决方法。请找到代码片段

var webpack = require('webpack');
module.exports = {
entry: {
    'app': './app/main.ts'
},

resolve: {
    extensions: ['.js']
},
output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'app.js',
}
};

webpack 示例 link：https://github.com/Madhust/ej2-grid-angular-webpack

SystemJS 映射的 Webpack 解决方案

Webpack solution for SystemJS mapping

angular

webpack

systemjs

syncfusion