用于 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模块(如果可用(允许使用树摇动，并且可以减少应用程序占用空间。

Answer 2

基本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 示例链接： https://github.com/Madhust/ej2-grid-angular-webpack