Skip to content

Commit

Permalink
change dev experience to favor Vue CLI as opposed to Nx
Browse files Browse the repository at this point in the history
  • Loading branch information
@BuckyMaler @ZachJW34
BuckyMaler authored and ZachJW34 committed Jul 12, 2020
1 parent b66ffe1 commit e7b5586
Show file tree
Hide file tree
Showing 33 changed files with 4,630 additions and 8,417 deletions.
4 changes: 2 additions & 2 deletions apps/vue-e2e/tests/vue.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ describe('vue e2e', () => {
`dist/apps/${appName}/index.html`,
`dist/apps/${appName}/favicon.ico`,
`dist/apps/${appName}/js/app.js`,
`dist/apps/${appName}/img/logo.png`
`dist/apps/${appName}/img`
)
).not.toThrow();

Expand All @@ -53,7 +53,7 @@ describe('vue e2e', () => {
`dist/apps/subdir/${appName}/index.html`,
`dist/apps/subdir/${appName}/favicon.ico`,
`dist/apps/subdir/${appName}/js/app.js`,
`dist/apps/subdir/${appName}/img/logo.png`
`dist/apps/subdir/${appName}/img`
)
).not.toThrow();

Expand Down
54 changes: 25 additions & 29 deletions libs/vue/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,40 +82,36 @@ nx build my-app

`nx serve my-app [...options]`

| Options | Default | Description |
| ----------------- | --------- | ---------------------------------------------------------- |
| `--open` | `false` | Open browser on server start. |
| `--copy` | `false` | Copy url to clipboard on server start. |
| `--stdin` | `false` | Close when stdin ends. |
| `--optimization` | `false` | Enables optimization of the build output. |
| `--host` | `0.0.0.0` | Specify host (default: 0.0.0.0). |
| `--port` | `4200` | Specify port (default: 4200). |
| `--ssl` | `false` | Serve using HTTPS. |
| `--publicHost` | - | Specify the public network URL for the HMR client. |
| `--skipPlugins` | - | Comma-separated list of plugin names to skip for this run. |
| `--browserTarget` | - | Target to serve. |
| `--watch` | `true` | Watch for changes. |
| Options | Default | Description |
| ----------------- | ------------- | ---------------------------------------------------------- |
| `--open` | `false` | Open browser on server start. |
| `--copy` | `false` | Copy url to clipboard on server start. |
| `--stdin` | `false` | Close when stdin ends. |
| `--mode` | `development` | Specify env mode (default: development). |
| `--host` | `0.0.0.0` | Specify host (default: 0.0.0.0). |
| `--port` | `8080` | Specify port (default: 8080). |
| `--https` | `false` | Use https (default: false). |
| `--public` | - | Specify the public network URL for the HMR client. |
| `--skipPlugins` | - | Comma-separated list of plugin names to skip for this run. |
| `--browserTarget` | - | Target to serve. |
| `--watch` | `true` | Watch for changes. |

### Browser builder

`nx build my-app [...options]`

| Options | Default | Description |
| -------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--optimization` | `false` | Enables optimization of the build output. |
| `--outputPath` | - | Specify output directory. |
| `--deleteOutputPath` | `true` | Delete the output path before building. |
| `--report` | `false` | Generate report.html to help analyze bundle content. |
| `--reportJson` | `false` | Generate report.json to help analyze bundle content. |
| `--skipPlugins` | - | Comma-separated list of plugin names to skip for this run. |
| `--watch` | `false` | Watch for changes. |
| `--index` | - | The path of a file to use for the application's HTML index. The filename of the specified path will be used for the generated file and will be created in the root of the application's configured output path. |
| `--main` | - | The full path for the main entry point to the app, relative to the current workspace. |
| `--tsConfig` | - | The full path for the TypeScript configuration file, relative to the current workspace. |
| `--assets` | `[]` | List of static application assets. |
| `--fileReplacements` | `[]` | Replace files with other files in the build. |
| `--outputHashing` | `none` | Define the output filename cache-busting hashing mode. |
| `--extractCss` | `false` | Extract css from global styles into css files instead of js ones. |
| Options | Default | Description |
| --------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--mode` | `development` | Specify env mode (default: development). |
| `--dest` | - | Specify output directory. |
| `--clean` | `true` | Remove the dist directory before building the project. |
| `--report` | `false` | Generate report.html to help analyze bundle content. |
| `--reportJson` | `false` | Generate report.json to help analyze bundle content. |
| `--skipPlugins` | - | Comma-separated list of plugin names to skip for this run. |
| `--watch` | `false` | Watch for changes. |
| `--index` | - | The path of a file to use for the application's HTML index. The filename of the specified path will be used for the generated file and will be created in the root of the application's configured output path. |
| `--main` | - | The full path for the main entry point to the app, relative to the current workspace. |
| `--tsConfig` | - | The full path for the TypeScript configuration file, relative to the current workspace. |

### Lint builder

Expand Down
2 changes: 0 additions & 2 deletions libs/vue/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,12 @@
},
"dependencies": {
"@angular-devkit/architect": "~0.901.0",
"@angular-devkit/build-angular": "~0.901.0",
"@angular-devkit/core": "~9.1.0",
"@angular-devkit/schematics": "~9.1.0",
"@nrwl/cypress": "^9.0.0",
"@nrwl/jest": "^9.0.0",
"@nrwl/linter": "^9.0.0",
"@vue/cli-shared-utils": "~4.3.0",
"copy-webpack-plugin": "^5.1.1",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"rxjs": "6.5.4",
Expand Down
43 changes: 8 additions & 35 deletions libs/vue/src/builders/browser/builder.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,10 @@ import { getSystemPath, join, normalize } from '@angular-devkit/core';
import { from, Observable } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
import { BrowserBuilderSchema } from './schema';
import { getProjectRoot, modifyChalkOutput } from '../../utils';
import {
getNormalizedAssetPatterns,
getProjectRoot,
getProjectSourceRoot,
modifyChalkOutput
} from '../../utils';
import {
addFileReplacements,
modifyCachePaths,
modifyCopyAssets,
modifyEntryPoint,
modifyFilenameHashing,
modifyIndexHtmlPath,
modifyTsConfigPaths,
modifyTypescriptAliases
Expand All @@ -38,35 +30,14 @@ export function runBuilder(
inlineOptions;
}> {
const projectRoot = await getProjectRoot(context);
const projectSourceRoot = await getProjectSourceRoot(context);

const normalizedAssetPatterns = getNormalizedAssetPatterns(
options,
context,
projectRoot,
projectSourceRoot
);

const inlineOptions = {
chainWebpack: config => {
modifyIndexHtmlPath(config, options, context);
modifyEntryPoint(config, options, context);
modifyTsConfigPaths(config, options, context);
modifyCachePaths(config, context);
modifyCopyAssets(config, options, context, normalizedAssetPatterns);
addFileReplacements(config, options, context);
modifyFilenameHashing(config, options);
modifyTypescriptAliases(config, options, context);
},
// This option is used instead of `dest` because Vue CLI will
// overwrite our modified `CopyWebpackPlugin` config when `dest`
// is defined.
// https://github.com/vuejs/vue-cli/blob/c64afc3c2a8854aae30fbfb85e92c0bb8b07bad7/packages/%40vue/cli-service/lib/commands/build/resolveAppConfig.js#L6
outputDir: getSystemPath(
join(normalize(context.workspaceRoot), options.outputPath)
),
css: {
extract: options.extractCss
}
};

Expand All @@ -82,8 +53,8 @@ export function runBuilder(
// TODO: Find a better way to rewrite vue-cli console output
const chalkTransform = (arg: string) => {
const normalizedArg = normalize(arg);
return normalizedArg.includes(options.outputPath)
? options.outputPath + normalizedArg.split(options.outputPath)[1]
return normalizedArg.includes(options.dest)
? options.dest + normalizedArg.split(options.dest)[1]
: arg;
};
['green', 'cyan', 'blue'].forEach(color =>
Expand All @@ -97,11 +68,13 @@ export function runBuilder(
inlineOptions
});
const buildOptions = {
mode: options.optimization ? 'production' : 'development',
dest: undefined,
mode: options.mode,
dest: getSystemPath(
join(normalize(context.workspaceRoot), options.dest)
),
modern: false,
'unsafe-inline': true,
clean: options.deleteOutputPath,
clean: options.clean,
report: options.report,
'report-json': options.reportJson,
'skip-plugins': options.skipPlugins,
Expand Down
22 changes: 3 additions & 19 deletions libs/vue/src/builders/browser/schema.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,14 @@
import { JsonObject } from '@angular-devkit/core';

export interface BrowserBuilderSchema extends JsonObject {
optimization: boolean;
outputPath: string;
deleteOutputPath: boolean;
mode: string;
dest: string;
clean: boolean;
report: boolean;
reportJson: boolean;
skipPlugins?: string;
watch: boolean;
index: string;
main: string;
tsConfig: string;
assets: Array<string | AssetPattern>;
fileReplacements: FileReplacementPattern[];
outputHashing: 'none' | 'all' | 'media' | 'bundles';
extractCss: boolean;
}

interface AssetPattern {
glob: string;
input: string;
ignore?: string[];
output: string;
}

interface FileReplacementPattern {
replace: string;
with: string;
}
90 changes: 9 additions & 81 deletions libs/vue/src/builders/browser/schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@
"description": "Build app",
"type": "object",
"properties": {
"optimization": {
"type": "boolean",
"description": "Enables optimization of the build output.",
"default": false
"mode": {
"type": "string",
"description": "Specify env mode (default: development).",
"default": "development"
},
"outputPath": {
"dest": {
"type": "string",
"description": "Specify output directory."
},
"deleteOutputPath": {
"clean": {
"type": "boolean",
"description": "Delete the output path before building.",
"description": "Remove the dist directory before building the project.",
"default": true
},
"report": {
Expand Down Expand Up @@ -48,80 +48,8 @@
"tsConfig": {
"type": "string",
"description": "The full path for the TypeScript configuration file, relative to the current workspace."
},
"assets": {
"type": "array",
"description": "List of static application assets.",
"default": [],
"items": {
"$ref": "#/definitions/assetPattern"
}
},
"fileReplacements": {
"description": "Replace files with other files in the build.",
"type": "array",
"items": {
"type": "object",
"properties": {
"replace": {
"type": "string"
},
"with": {
"type": "string"
}
},
"additionalProperties": false,
"required": ["replace", "with"]
},
"default": []
},
"outputHashing": {
"type": "string",
"description": "Define the output filename cache-busting hashing mode.",
"default": "none",
"enum": ["none", "all", "media", "bundles"]
},
"extractCss": {
"type": "boolean",
"description": "Extract css from global styles into css files instead of js ones.",
"default": false
}
},
"required": ["outputPath", "index", "main", "tsConfig"],
"additionalProperties": false,
"definitions": {
"assetPattern": {
"oneOf": [
{
"type": "object",
"properties": {
"glob": {
"type": "string",
"description": "The pattern to match."
},
"input": {
"type": "string",
"description": "The input directory path in which to apply 'glob'. Defaults to the project root."
},
"ignore": {
"description": "An array of globs to ignore.",
"type": "array",
"items": {
"type": "string"
}
},
"output": {
"type": "string",
"description": "Absolute path within the output."
}
},
"additionalProperties": false,
"required": ["glob", "input", "output"]
},
{
"type": "string"
}
]
}
}
"required": ["dest", "index", "main", "tsConfig"],
"additionalProperties": false
}
Loading

0 comments on commit e7b5586

Please sign in to comment.