You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@nifi.apache.org by GitBox <gi...@apache.org> on 2019/04/29 16:10:47 UTC
[GitHub] [nifi-fds] rfellows commented on a change in pull request #14:
[WIP] NIFI-6212 introduce webpack, ES6, TS, linting, dev build watch
rfellows 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_r279432091
##########
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:
probably need to add the `html-loader` as well.
----------------------------------------------------------------
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:
users@infra.apache.org
With regards,
Apache Git Services