用于SystemJS映射的Webpack解决方案

Question

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

但是，在Angular的EJ2库中，SyncFusion尚未支持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

使用resolve.alias在Webpack中完成同样的事情：

...
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