Skip to content
Merged

Fix typo #10583

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/javascript/compile-typescript-code-npm.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ The [TypeScript npm package](https://www.npmjs.com/package/typescript) adds Type
},
```

To build using a third-party tool like Webpack, you can add a command-line build script to your *package.json* file:
To build using a third-party tool like webpack, you can add a command-line build script to your *package.json* file:

```json
"scripts": {
Expand All @@ -109,7 +109,7 @@ The [TypeScript npm package](https://www.npmjs.com/package/typescript) adds Type
```

::: moniker range="vs-2019"
For an example of using Webpack with React and a Webpack configuration file, see [Create a web app with Node.js and React](../javascript/tutorial-nodejs-with-react-and-jsx.md).
For an example of using webpack with React and a webpack configuration file, see [Create a web app with Node.js and React](../javascript/tutorial-nodejs-with-react-and-jsx.md).

For an example of using Vue.js with TypeScript, see [Create a Vue.js application](create-application-with-vuejs.md).
::: moniker-end
Expand Down Expand Up @@ -139,10 +139,10 @@ Press **Ctrl+F5** (or **Debug > Start Without Debugging**) to run the applicatio

## Automate build tasks

You can use Task Runner Explorer in Visual Studio to help automate tasks for third-party tools like npm and Webpack.
You can use Task Runner Explorer in Visual Studio to help automate tasks for third-party tools like npm and webpack.

- [NPM Task Runner](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner) - Adds support for npm scripts defined in *package.json*. Supports yarn.
- [Webpack Task Runner](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner) - Adds support for Webpack.
- [Webpack Task Runner](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner) - Adds support for webpack.

## Related content

Expand Down
8 changes: 4 additions & 4 deletions docs/javascript/create-application-with-vuejs.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,9 @@ To install the vue-cli npm module, open a command prompt and type `npm install -
1. Type `vue init webpack client-app` and follow steps when prompted to answer additional questions.

> [!NOTE]
> For *.vue* files, you need to use Webpack or a similar framework with a loader to do the conversion. TypeScript and Visual Studio does not know how to compile *.vue* files. The same is true for bundling; TypeScript doesn't know how to convert ES2015 modules (that is, `import` and `export` statements) into a single final *.js* file to load in the browser. Again, Webpack is the best choice here. To drive this process from within Visual Studio using MSBuild, you need to do start from a Visual Studio template. At present, there is no ASP.NET template for Vue.js development in-the-box.
> For *.vue* files, you need to use webpack or a similar framework with a loader to do the conversion. TypeScript and Visual Studio does not know how to compile *.vue* files. The same is true for bundling; TypeScript doesn't know how to convert ES2015 modules (that is, `import` and `export` statements) into a single final *.js* file to load in the browser. Again, webpack is the best choice here. To drive this process from within Visual Studio using MSBuild, you need to do start from a Visual Studio template. At present, there is no ASP.NET template for Vue.js development in-the-box.

#### Modify the Webpack configuration to output the built files to wwwroot
#### Modify the webpack configuration to output the built files to wwwroot

* Open the file *./client-app/config/index.js*, and change the `build.index` and `build.assetsRoot` to wwwroot path:

Expand All @@ -104,7 +104,7 @@ To install the vue-cli npm module, open a command prompt and type `npm install -

1. On **Pre-build event command line**, type `npm --prefix ./client-app run build`.

#### Configure Webpack's output module names
#### Configure webpack's output module names

* Open the file *./client-app/build/webpack.base.conf.js*, and add the following properties to the output property:

Expand Down Expand Up @@ -146,7 +146,7 @@ These steps require vue-cli 3.0, which is currently in beta.
};
```

The preceding code configures Webpack and sets the wwwroot folder.
The preceding code configures webpack and sets the wwwroot folder.

#### Build with vue-cli 3.0

Expand Down
2 changes: 1 addition & 1 deletion docs/javascript/tutorial-aspnet-with-typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ Visual Studio opens your new project.

The *outDir* option specifies the output folder for the plain JavaScript files that the TypeScript compiler transpiles.

This configuration provides a basic introduction to using TypeScript. In other scenarios, such as when using [gulp or Webpack](https://www.typescriptlang.org/docs/handbook/asp-net-core.html), you might want a different intermediate location for the transpiled JavaScript files instead of *wwwroot/js*. The location depends on your tools and configuration preferences.
This configuration provides a basic introduction to using TypeScript. In other scenarios, such as when using [gulp or webpack](https://www.typescriptlang.org/docs/handbook/asp-net-core.html), you might want a different intermediate location for the transpiled JavaScript files instead of *wwwroot/js*. The location depends on your tools and configuration preferences.

1. In Solution Explorer, right-click the project node and select **Add > New Folder**. Use the name *scripts* for the new folder.

Expand Down
16 changes: 8 additions & 8 deletions docs/javascript/tutorial-nodejs-with-react-and-jsx.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ Before you begin, here's a quick FAQ to introduce you to some key concepts:

JSX is a JavaScript syntax extension typically used with React to describe UI elements. You must transpile JSX code to plain JavaScript before it can run in a browser.

- **What is Webpack?**
- **What is webpack?**

Webpack bundles JavaScript files so they can run in a browser, and can also transform or package other resources and assets. Webpack can specify a compiler, such as Babel or TypeScript, to transpile JSX or TypeScript code to plain JavaScript.

Expand Down Expand Up @@ -255,9 +255,9 @@ For this simple app, you add the new project files in the project root. For most

This HTML page loads *app-bundle.js*, which contains the JSX and React code transpiled to plain JavaScript. Currently, *app-bundle.js* is an empty file. In the next section, you configure options to transpile the code.

## Configure Webpack and TypeScript compiler options
## Configure webpack and TypeScript compiler options

Next, you add Webpack configuration code to *webpack-config.js*. You add a simple Webpack configuration that specifies an input file, *app.tsx*, and an output file, *app-bundle.js*, for bundling and transpiling JSX to plain JavaScript. For transpiling, you also configure some TypeScript compiler options. This basic configuration code is an introduction to Webpack and the TypeScript compiler.
Next, you add webpack configuration code to *webpack-config.js*. You add a simple webpack configuration that specifies an input file, *app.tsx*, and an output file, *app-bundle.js*, for bundling and transpiling JSX to plain JavaScript. For transpiling, you also configure some TypeScript compiler options. This basic configuration code is an introduction to webpack and the TypeScript compiler.

1. In **Solution Explorer**, open **webpack-config.js** and add the following code.

Expand Down Expand Up @@ -286,7 +286,7 @@ Next, you add Webpack configuration code to *webpack-config.js*. You add a simpl
}
```

The Webpack configuration code instructs Webpack to use the TypeScript loader to transpile the JSX.
The webpack configuration code instructs webpack to use the TypeScript loader to transpile the JSX.

1. Open **tsconfig.json** and replace the contents with the following code, which specifies the TypeScript compiler options:

Expand Down Expand Up @@ -318,13 +318,13 @@ Next, you add Webpack configuration code to *webpack-config.js*. You add a simpl

1. In **Solution Explorer**, right-click the project name and select **Open Command Prompt Here**.

1. In the command prompt, enter the following Webpack command:
1. In the command prompt, enter the following webpack command:

`node_modules\.bin\webpack --config webpack-config.js`

The command prompt window shows the result.

![Screenshot that shows results of running the Webpack command.](media/tutorial-nodejs-react-run-webpack-cmd.png)
![Screenshot that shows results of running the webpack command.](media/tutorial-nodejs-react-run-webpack-cmd.png)

If you see any errors instead of the preceding output, you must resolve them before your app will work. If your npm package versions are different than the versions this tutorial specifies, that can cause errors. To fix the errors, try the following:

Expand All @@ -348,7 +348,7 @@ Next, you add Webpack configuration code to *webpack-config.js*. You add a simpl

![Screenshot showing a prompt whether to load modified files.](media/tutorial-nodejs-react-reload-files.png)

Anytime you make changes to *app.tsx*, you must rerun the Webpack command. To automate this step, you can add a build script to transpile the JSX.
Anytime you make changes to *app.tsx*, you must rerun the webpack command. To automate this step, you can add a build script to transpile the JSX.

### Add a build script to transpile the JSX

Expand Down Expand Up @@ -465,7 +465,7 @@ The browser starts with debugging enabled. The app isn't running yet, so the bro
},
```

This development-only setting enables debugging in Visual Studio. By default, Webpack references in the source map file include the *webpack:///* prefix, which prevents Visual Studio from finding the source file *app.tsx*. This setting overrides the generated references in the source map file, *app-bundle.js.map*, when building the app. Specifically, this setting changes the reference to the source file from *webpack:///./app.tsx* to *./app.tsx*, which enables debugging.
This development-only setting enables debugging in Visual Studio. By default, webpack references in the source map file include the *webpack:///* prefix, which prevents Visual Studio from finding the source file *app.tsx*. This setting overrides the generated references in the source map file, *app-bundle.js.map*, when building the app. Specifically, this setting changes the reference to the source file from *webpack:///./app.tsx* to *./app.tsx*, which enables debugging.

1. Select your target browser as the debug target in Visual Studio, and then press **Ctrl**+**F5**, or select **Debug** > **Start Without Debugging**, to run the app in the browser.

Expand Down