scottyaslan commented on a change in pull request #14: [WIP] NIFI-6212
introduce webpack, ES6, TS, linting, dev build watch
URL: https://github.com/apache/nifi-fds/pull/14#discussion_r279456131
##########
File path: README.md
##########
@@ -21,21 +21,152 @@ System.config({
// existing configuration options
map: {
...,
- '@flow-design-system/core':
'node_modules/@nifi-fds/core/flow-design-system.module.js',
- '@flow-design-system/dialogs':
'node_modules/@nifi-fds/core/dialogs/fds-dialogs.module.js',
- '@flow-design-system/dialog-component':
'node_modules/@nifi-fds/core/dialogs/fds-dialog.component.js',
- '@flow-design-system/dialog-service':
'node_modules/@nifi-fds/core/dialogs/services/dialog.service.js',
- '@flow-design-system/confirm-dialog-component':
'node_modules/@nifi-fds/core/dialogs/confirm-dialog/confirm-dialog.component.js',
- '@flow-design-system/snackbars':
'node_modules/@nifi-fds/core/snackbars/fds-snackbars.module.js',
- '@flow-design-system/snackbar-component':
'node_modules/@nifi-fds/core/snackbars/fds-snackbar.component.js',
- '@flow-design-system/snackbar-service':
'node_modules/@nifi-fds/core/snackbars/services/snackbar.service.js',
- '@flow-design-system/coaster-component':
'node_modules/@nifi-fds/core/snackbars/coaster/coaster.component.js',
- '@flow-design-system/common/storage-service':
'node_modules/@nifi-fds/core/common/services/fds-storage.service.js'
+ '@flow-design-system/core': 'node_modules/@nifi-fds/core'
}
});
```
-Next, import the **Apache NiFi Flow Design System** NgModule into your angular
application.
+#### ES6/TS
+If your project is using the webpack to load modules, you will need to add
`@nifi-fds/core` as an alias:
+
+```javascript
+const path = require('path');
+
+module.exports = {
+ // Flow Design System
+ '@flow-design-system/core': path.resolve(__dirname,
'platform/core/flow-design-system.module.js'),
+ '@flow-design-system/dialogs': path.resolve(__dirname,
'platform/core/dialogs/fds-dialogs.module.js'),
+ '@flow-design-system/dialog-component': path.resolve(__dirname,
'platform/core/dialogs/fds-dialog.component.js'),
+ '@flow-design-system/dialog-service': path.resolve(__dirname,
'platform/core/dialogs/services/dialog.service.js'),
+ '@flow-design-system/confirm-dialog-component': path.resolve(__dirname,
'platform/core/dialogs/confirm-dialog/confirm-dialog.component.js'),
+ '@flow-design-system/snackbars': path.resolve(__dirname,
'platform/core/snackbars/fds-snackbars.module.js'),
+ '@flow-design-system/snackbar-component': path.resolve(__dirname,
'platform/core/snackbars/fds-snackbar.component.js'),
+ '@flow-design-system/snackbar-service': path.resolve(__dirname,
'platform/core/snackbars/services/snackbar.service.js'),
+ '@flow-design-system/coaster-component': path.resolve(__dirname,
'platform/core/snackbars/coaster/coaster.component.js'),
+ '@flow-design-system/common/storage-service': path.resolve(__dirname,
'platform/core/common/services/fds-storage.service.js'),
+ '@flow-design-system/common/animations': path.resolve(__dirname,
'platform/core/common/fds.animations.js'),
+
+ // Application
+ 'webapp/fds.module.js': path.resolve(__dirname, 'webapp/fds.module.js'),
+ 'webapp/fds.routes.js': path.resolve(__dirname, 'webapp/fds.routes.js'),
+ 'webapp/fds.js': path.resolve(__dirname, 'webapp/fds.js'),
+
+ 'webapp/services/fds.service.js': path.resolve(__dirname,
'webapp/services/fds.service.js'),
+
+ 'webapp/components/flow-design-system/fds-demo.js':
path.resolve(__dirname, 'webapp/components/flow-design-system/fds-demo.js'),
+ 'webapp/components/flow-design-system/dialogs/demo/fds-demo-dialog.js':
path.resolve(__dirname,
'webapp/components/flow-design-system/dialogs/demo/fds-demo-dialog.js'),
+
+ // Node Modules
+ '@angular': path.resolve(__dirname, 'node_modules/@angular'),
+ '@covalent': path.resolve(__dirname, 'node_modules/@covalent'),
+
+ // jquery
+ 'jquery': path.resolve(__dirname,
'node_modules/jquery/dist/jquery.min.js'),
+ 'jquery-ui-dist': path.resolve(__dirname,
'node_modules/jquery-ui-dist/jquery-ui.js'),
+
+ // needed to support gestures for angular material
+ 'hammerjs': path.resolve(__dirname, 'node_modules/hammerjs/hammer.min.js'),
+
+ // other libraries
+ 'rxjs': path.resolve(__dirname, 'node_modules/rxjs'),
+ 'zone.js': path.resolve(__dirname, 'node_modules/zone.js/dist/zone.js'),
+ 'core-js': path.resolve(__dirname, 'node_modules/core-js'),
+ 'tslib': path.resolve(__dirname, 'node_modules/tslib'),
+
+ // SCSS
+ 'platform/core': path.resolve(__dirname, 'platform/core')
+};
+```
+
+Then, in the webpack configuration you will need to add the following rules:
+
+```javascript
+ module: {
+ rules: [
+ /*
+ * Send all ts files from @nifi-fds through a custom loader that
replaces its usage of templateUrl or styleUrl properties like:
+ * templateUrl: './confirm-dialog.component.html'
+ *
+ * with NodeJS `require` calls for loading of html files that are
subsequently loaded via webpack's html-loader like:
+ * template: require('./confirm-dialog.component.html')
+ *
+ * And all files with a `.ts` or `.tsx` extension will be handled
by `ts-loader`
+ */
+ {
+ test: /\.tsx?$/,
+ include: [
+ path.resolve(__dirname, 'webapp'),
+ path.resolve(__dirname, 'platform')
+ ],
+ use: [path.resolve(__dirname, 'angular-url-loader'),
'ts-loader']
+ },
+ {
+ /*
+ * Send all js files from @nifi-fds through a custom loader that
replaces its usage of templateUrl or styleUrl properties like:
+ * templateUrl: './confirm-dialog.component.html'
+ *
+ * with NodeJS `require` calls for loading of html files that are
subsequently loaded via webpack's html-loader like:
+ * template: require('./confirm-dialog.component.html')
+ *
+ * And all files with a `.js` extension will be handled by
`babel-loader`
+ */
+ test: /\.js$/,
+ include: [
+ path.resolve(__dirname, 'webapp'),
+ path.resolve(__dirname, 'platform')
+ ],
+ use: [
+ {
+ loader: path.resolve(__dirname, 'angular-url-loader')
+ },
+ {
+ loader: 'babel-loader',
+ options: {
+ presets: ['@babel/preset-env']
+ }
+ }
+ ]
+ },
+ {
+ test: /\.scss$/,
+ use: [
+ {
+ // Create CSS files separately
+ loader: MiniCssExtractPlugin.loader
+ },
+ {
+ // Translate CSS into CommonJS
+ loader: 'css-loader',
+ options: {
+ url: false
+ }
+ },
+ {
+ // Compile Sass to CSS
+ loader: 'sass-loader'
+ }
+ ]
+ }
+ ...
Review comment:
added
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
With regards,
Apache Git Services
