用于SystemJS映射的Webpack解决方案

时间:2017-08-09 00:15:32

标签: angular webpack systemjs syncfusion

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兼容?

2 个答案:

答案 0 :(得分:1)

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

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

在SystemJS中使用映射的原因是可以传输单个预构建的UMD文件,而不是传输和构建单独的文件。这对Webpack来说不是问题。虽然UMD模块可以加快处理速度,但是使用封装中的非捆绑ES6模块(如果可用)允许使用树抖动并且可以减少应用程序占用空间。

答案 1 :(得分:-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示例链接:https://github.com/Madhust/ej2-grid-angular-webpack