Webpack solution for SystemJS mapping

我是研究僧i 提交于 2019-12-13 07:25:57

问题


The release of AngularCLI abandon SystemJS in favor of WebPack.

However SyncFusion hasn't supported WebPack yet in there EJ2 library for Angular. They instruct to use SystemJS to map

"@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",

in this tutorial http://ej2.syncfusion.com/angular/documentation/grid/getting-started.html#configuring-system-js

How can I work around this dependency and make it compatible with WebPack while waiting for SyncFusion to support it?


回答1:


Same thing is done in Webpack with resolve.alias:

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

The reason why mappings are used in SystemJS is that a single prebuilt UMD file can be transferred instead of transfering and building separate files. This is not an issue for Webpack. While UMD module can speed up the process a bit, using unbundled ES6 modules from a package (if available) allows to use tree shaking and may reduce application footprint.




回答2:


Essential JS2 Angular components have Webpack support without any workaround. Please find the code snippet

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

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

webpack sample link: https://github.com/Madhust/ej2-grid-angular-webpack



来源:https://stackoverflow.com/questions/45579779/webpack-solution-for-systemjs-mapping

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!