You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/javascript/compile-typescript-code-npm.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -100,7 +100,7 @@ The [TypeScript npm package](https://www.npmjs.com/package/typescript) adds Type
100
100
},
101
101
```
102
102
103
-
To build using a third-party tool like Webpack, you can add a command-line build script to your *package.json* file:
103
+
To build using a third-party tool like webpack, you can add a command-line build script to your *package.json* file:
104
104
105
105
```json
106
106
"scripts": {
@@ -109,7 +109,7 @@ The [TypeScript npm package](https://www.npmjs.com/package/typescript) adds Type
109
109
```
110
110
111
111
::: moniker range="vs-2019"
112
-
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).
112
+
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).
113
113
114
114
For an example of using Vue.js with TypeScript, see [Create a Vue.js application](create-application-with-vuejs.md).
115
115
::: moniker-end
@@ -139,10 +139,10 @@ Press **Ctrl+F5** (or **Debug > Start Without Debugging**) to run the applicatio
139
139
140
140
## Automate build tasks
141
141
142
-
You can use Task Runner Explorer in Visual Studio to help automate tasks for third-party tools like npm and Webpack.
142
+
You can use Task Runner Explorer in Visual Studio to help automate tasks for third-party tools like npm and webpack.
143
143
144
144
-[NPM Task Runner](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner) - Adds support for npm scripts defined in *package.json*. Supports yarn.
145
-
-[Webpack Task Runner](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner) - Adds support for Webpack.
145
+
-[Webpack Task Runner](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner) - Adds support for webpack.
Copy file name to clipboardExpand all lines: docs/javascript/create-application-with-vuejs.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -84,9 +84,9 @@ To install the vue-cli npm module, open a command prompt and type `npm install -
84
84
1. Type `vueinitwebpackclient-app` andfollowstepswhenpromptedtoansweradditionalquestions.
85
85
86
86
> [!NOTE]
87
-
>For*.vue*files, youneedtouseWebpackorasimilarframeworkwithaloadertodotheconversion. TypeScriptandVisualStudiodoesnotknowhowtocompile*.vue*files. Thesameistrueforbundling; TypeScriptdoesn'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.
87
+
>For*.vue*files, youneedtousewebpackorasimilarframeworkwithaloadertodotheconversion. TypeScriptandVisualStudiodoesnotknowhowtocompile*.vue*files. Thesameistrueforbundling; TypeScriptdoesn'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.
88
88
89
-
#### Modify the Webpack configuration to output the built files to wwwroot
89
+
#### Modify the webpack configuration to output the built files to wwwroot
90
90
91
91
*Openthefile*./client-app/config/index.js*, andchangethe `build.index` and `build.assetsRoot` towwwrootpath:
92
92
@@ -104,7 +104,7 @@ To install the vue-cli npm module, open a command prompt and type `npm install -
104
104
105
105
1. On**Pre-buildeventcommandline**, type `npm--prefix ./client-apprunbuild`.
Copy file name to clipboardExpand all lines: docs/javascript/tutorial-aspnet-with-typescript.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -114,7 +114,7 @@ Visual Studio opens your new project.
114
114
115
115
The *outDir* option specifies the output folder for the plain JavaScript files that the TypeScript compiler transpiles.
116
116
117
-
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.
117
+
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.
118
118
119
119
1. In Solution Explorer, right-click the project node and select **Add > New Folder**. Use the name *scripts* for the new folder.
Copy file name to clipboardExpand all lines: docs/javascript/tutorial-nodejs-with-react-and-jsx.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -46,7 +46,7 @@ Before you begin, here's a quick FAQ to introduce you to some key concepts:
46
46
47
47
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.
48
48
49
-
-**What is Webpack?**
49
+
-**What is webpack?**
50
50
51
51
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.
52
52
@@ -255,9 +255,9 @@ For this simple app, you add the new project files in the project root. For most
255
255
256
256
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.
257
257
258
-
## Configure Webpack and TypeScript compiler options
258
+
## Configure webpack and TypeScript compiler options
259
259
260
-
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.
260
+
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.
261
261
262
262
1. In **Solution Explorer**, open **webpack-config.js** and add the following code.
263
263
@@ -286,7 +286,7 @@ Next, you add Webpack configuration code to *webpack-config.js*. You add a simpl
286
286
}
287
287
```
288
288
289
-
The Webpack configuration code instructs Webpack to use the TypeScript loader to transpile the JSX.
289
+
The webpack configuration code instructs webpack to use the TypeScript loader to transpile the JSX.
290
290
291
291
1. Open **tsconfig.json** and replace the contents with the following code, which specifies the TypeScript compiler options:
292
292
@@ -318,13 +318,13 @@ Next, you add Webpack configuration code to *webpack-config.js*. You add a simpl
318
318
319
319
1. In **Solution Explorer**, right-click the project name and select **Open Command Prompt Here**.
320
320
321
-
1. In the command prompt, enter the following Webpack command:
321
+
1. In the command prompt, enter the following webpack command:

327
+

328
328
329
329
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:
330
330
@@ -348,7 +348,7 @@ Next, you add Webpack configuration code to *webpack-config.js*. You add a simpl
348
348
349
349

350
350
351
-
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.
351
+
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.
352
352
353
353
### Add a build script to transpile the JSX
354
354
@@ -465,7 +465,7 @@ The browser starts with debugging enabled. The app isn't running yet, so the bro
465
465
},
466
466
```
467
467
468
-
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.
468
+
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.
469
469
470
470
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.
0 commit comments