TypeScript + Webpack 4 开发环境搭建(转)

其他 2019-11-14 22:34:06 阅读次数: 0

前段时间接触到 Microsoft 的 Microsoft.AspNetCore.SpaTemplates 模板，生成的项目使用的默认语言是 TypeScript，虽然以前在此之前并没有用过TypeScript，但第一看上去有种很熟悉的感觉。当然，也有人说 TypeScript 是 JavaScript 版本的C#，不管怎么说，有了学习的兴趣。另外，据说新版的webpack 4相比以前的版本的更快的打包速度，于是就有了把它们结合在一起使用的想法。

准备工作

请事先安装好 Node.js
新建项目文件夹，按住 Shift 键不放手，在文件夹空白处单击鼠标右键，选择 在此处打开Powershell窗口

使用npm 安装相应的模块

webpack 4 需要安装 webpack、webpack-cli 和 typescript 等必要的模块。为了使用 webpack 处理 typescript，还需要 ts-loader。
在上面打开的 Powershell 窗口中输入以下命令

1、初始化项目：

npm init

回答一系列的问题（也可以直接回车使用默认值）后，在当前项目文件夹中会出现一个package.json的配置文件。文件内容大概如下所示：

{
  "name": "webpacktypescript",
  "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "ts-loader": "^4.2.0", "typescript": "^2.8.1", "webpack": "^4.6.0", "webpack-cli": "^2.0.14" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

2、安装需要的各个模块：

npm install webpack webpack-cli typescript ts-loader --save-dev

回答一系列的问题（也可以直接回车使用默认值）后，在当前项目文件夹中会出现一个package.json的配置文件。文件内容大概如下所示：

{
  "name": "webpacktypescript",
  "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "ts-loader": "^4.2.0", "typescript": "^2.8.1", "webpack": "^4.6.0", "webpack-cli": "^2.0.14" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

3、添加 TypeScript 的配置文件 tsconfig.json

启动 WebStorm 并打开项目，在项目名称上单击鼠标右键 -> New -> tsconfig.json, 添加TypeScipt的配置文件，内容如下所示：

{
  "compilerOptions": {
    "module": "commonjs", "target": "es5", "sourceMap": true }, "exclude": [ "node_modules" ] }

4、添加index.html及默认的 src/index.js文件
在项目文件夹中添加html文件，并命名为：'index.html',并编辑文件内容如下所示：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>TypeScript + Webpack 4</title> </head> <body> <script src="dist/main.js"></script> </body> </html>

在项目文件夹中添加名字为src的文件夹，并在该文件夹中添加名字为index.js的JavaScript文件,文件内容如下所示：

console.log("Hello TypeScript!");

完成以上操作后项目的结构如下所示：

  webpackwithtypescript
  |- src
    |- index.js
  |- index.html
  |- package.json
  |- package-lock.json |- tsconfig.json

5、使用webpack-cli打包项目

在控制台窗口(Powershell窗口 或WebStorm的Terminal 都可以) 输入以下命令进行打包：

npx webpack

控制台显示内容如下所示：

D:\SPAProjects\webpacktypescript>npx webpack
npx: installed 1 in 11.482s The "path" argument must be of type string D:\SPAProjects\webpacktypescript\node_modules\webpack\bin\webpack.js Hash: 7dffdd50a425c0f906c2 Version: webpack 4.6.0 Time: 579ms Built at: 2018-04-18 14:23:26 Asset Size Chunks Chunk Names main.js 577 bytes 0 [emitted] main Entrypoint main = main.js [0] ./src/index.js 33 bytes {0} [built]

打包成功，项目文件夹中会多出 dist/main.js - 这也正是 webpack 4 未指定输出文件时默认的位置。此时在浏览器中打开index.html，并在浏览器中按下F12，进入控制台将会看到 consolr.log() 语句的输出结果。

此时的项目文件夹结构：

  webpackwithtypescript
    |- dist
       |- main.js
    |- src
       |- index.js
    |- index.html
    |- package.json
    |- package-lock.json |- tsconfig.json

webpack 4 没有配置文件时，使用src/index.js作为默认入口，同时使用dist/main.js作为默认出口。
由于TyepScript文件的默认扩展名为.ts，所以并不适合于没有配置文件的默认状况。

6、webpack 配置文件
在项目文件夹中添加名为webpack.config.js的JavaScript文件，并编辑其内容如以下所示：

const path = require('path'); module.exports = { mode: 'development', entry: './src/index.ts', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [{ test: /\.ts$/, use: "ts-loader" }] }, resolve: { extensions: [ '.ts' ] } };

同时修改package.json如以下内容所示：

{
  "name": "webpacktypescript",
  "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "ts-loader": "^4.2.0", "typescript": "^2.8.1", "webpack": "^4.6.0", "webpack-cli": "^2.0.14" }, "devDependencies": {}, "scripts": { "build": "webpack", //添加这一行 "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

完成以上的设置，然后将src/index.js改名为src/index.ts。

  webpackwithtypescript
    |- dist
       |- main.js
    |- src
       |- index.ts
    |- index.html
    |- package.json
    |- package-lock.json |- tsconfig.json

使用npm run build命令编译、打包src/index.ts文件：

D:\SPAProjects\webpacktypescript>npm run build

> webpacktypescript@1.0.0 build D:\SPAProjects\webpacktypescript > webpack  Hash: 9bf0b33a5a6b242a917e Version: webpack 4.6.0 Time: 1683ms Built at: 2018-04-18 15:03:36 Asset Size Chunks Chunk Names main.js 2.84 KiB main [emitted] main Entrypoint main = main.js [./src/index.ts] 35 bytes {main} [built]

在控制台窗口可以输入npm run build指令进行打包时，项目中src文件夹中的ts文件index.ts被编译，并输出为 dist/main.js。

爱书网： www.2ibook.com 一个优秀的视频教学网站，大学各专业的名师课程。免费，免费，免费。
QQ群：762080163

前段时间接触到 Microsoft 的 Microsoft.AspNetCore.SpaTemplates 模板，生成的项目使用的默认语言是 TypeScript，虽然以前在此之前并没有用过TypeScript，但第一看上去有种很熟悉的感觉。当然，也有人说 TypeScript 是 JavaScript 版本的C#，不管怎么说，有了学习的兴趣。另外，据说新版的webpack 4相比以前的版本的更快的打包速度，于是就有了把它们结合在一起使用的想法。

准备工作

请事先安装好 Node.js
新建项目文件夹，按住 Shift 键不放手，在文件夹空白处单击鼠标右键，选择 在此处打开Powershell窗口

使用npm 安装相应的模块

webpack 4 需要安装 webpack、webpack-cli 和 typescript 等必要的模块。为了使用 webpack 处理 typescript，还需要 ts-loader。
在上面打开的 Powershell 窗口中输入以下命令

1、初始化项目：

npm init

回答一系列的问题（也可以直接回车使用默认值）后，在当前项目文件夹中会出现一个package.json的配置文件。文件内容大概如下所示：

{
  "name": "webpacktypescript",
  "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "ts-loader": "^4.2.0", "typescript": "^2.8.1", "webpack": "^4.6.0", "webpack-cli": "^2.0.14" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

2、安装需要的各个模块：

npm install webpack webpack-cli typescript ts-loader --save-dev

回答一系列的问题（也可以直接回车使用默认值）后，在当前项目文件夹中会出现一个package.json的配置文件。文件内容大概如下所示：

{
  "name": "webpacktypescript",
  "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "ts-loader": "^4.2.0", "typescript": "^2.8.1", "webpack": "^4.6.0", "webpack-cli": "^2.0.14" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

3、添加 TypeScript 的配置文件 tsconfig.json

启动 WebStorm 并打开项目，在项目名称上单击鼠标右键 -> New -> tsconfig.json, 添加TypeScipt的配置文件，内容如下所示：

{
  "compilerOptions": {
    "module": "commonjs", "target": "es5", "sourceMap": true }, "exclude": [ "node_modules" ] }

4、添加index.html及默认的 src/index.js文件
在项目文件夹中添加html文件，并命名为：'index.html',并编辑文件内容如下所示：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>TypeScript + Webpack 4</title> </head> <body> <script src="dist/main.js"></script> </body> </html>

在项目文件夹中添加名字为src的文件夹，并在该文件夹中添加名字为index.js的JavaScript文件,文件内容如下所示：

console.log("Hello TypeScript!");

完成以上操作后项目的结构如下所示：

  webpackwithtypescript
  |- src
    |- index.js
  |- index.html
  |- package.json
  |- package-lock.json |- tsconfig.json

5、使用webpack-cli打包项目

在控制台窗口(Powershell窗口 或WebStorm的Terminal 都可以) 输入以下命令进行打包：

npx webpack

控制台显示内容如下所示：

D:\SPAProjects\webpacktypescript>npx webpack
npx: installed 1 in 11.482s The "path" argument must be of type string D:\SPAProjects\webpacktypescript\node_modules\webpack\bin\webpack.js Hash: 7dffdd50a425c0f906c2 Version: webpack 4.6.0 Time: 579ms Built at: 2018-04-18 14:23:26 Asset Size Chunks Chunk Names main.js 577 bytes 0 [emitted] main Entrypoint main = main.js [0] ./src/index.js 33 bytes {0} [built]

打包成功，项目文件夹中会多出 dist/main.js - 这也正是 webpack 4 未指定输出文件时默认的位置。此时在浏览器中打开index.html，并在浏览器中按下F12，进入控制台将会看到 consolr.log() 语句的输出结果。

此时的项目文件夹结构：

  webpackwithtypescript
    |- dist
       |- main.js
    |- src
       |- index.js
    |- index.html
    |- package.json
    |- package-lock.json |- tsconfig.json

webpack 4 没有配置文件时，使用src/index.js作为默认入口，同时使用dist/main.js作为默认出口。
由于TyepScript文件的默认扩展名为.ts，所以并不适合于没有配置文件的默认状况。

6、webpack 配置文件
在项目文件夹中添加名为webpack.config.js的JavaScript文件，并编辑其内容如以下所示：

const path = require('path'); module.exports = { mode: 'development', entry: './src/index.ts', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [{ test: /\.ts$/, use: "ts-loader" }] }, resolve: { extensions: [ '.ts' ] } };

同时修改package.json如以下内容所示：

{
  "name": "webpacktypescript",
  "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "ts-loader": "^4.2.0", "typescript": "^2.8.1", "webpack": "^4.6.0", "webpack-cli": "^2.0.14" }, "devDependencies": {}, "scripts": { "build": "webpack", //添加这一行 "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

完成以上的设置，然后将src/index.js改名为src/index.ts。

  webpackwithtypescript
    |- dist
       |- main.js
    |- src
       |- index.ts
    |- index.html
    |- package.json
    |- package-lock.json |- tsconfig.json

使用npm run build命令编译、打包src/index.ts文件：

D:\SPAProjects\webpacktypescript>npm run build

> webpacktypescript@1.0.0 build D:\SPAProjects\webpacktypescript > webpack  Hash: 9bf0b33a5a6b242a917e Version: webpack 4.6.0 Time: 1683ms Built at: 2018-04-18 15:03:36 Asset Size Chunks Chunk Names main.js 2.84 KiB main [emitted] main Entrypoint main = main.js [./src/index.ts] 35 bytes {main} [built]

在控制台窗口可以输入npm run build指令进行打包时，项目中src文件夹中的ts文件index.ts被编译，并输出为 dist/main.js。

前段时间接触到 Microsoft 的 Microsoft.AspNetCore.SpaTemplates 模板，生成的项目使用的默认语言是 TypeScript，虽然以前在此之前并没有用过TypeScript，但第一看上去有种很熟悉的感觉。当然，也有人说 TypeScript 是 JavaScript 版本的C#，不管怎么说，有了学习的兴趣。另外，据说新版的webpack 4相比以前的版本的更快的打包速度，于是就有了把它们结合在一起使用的想法。

准备工作

请事先安装好 Node.js
新建项目文件夹，按住 Shift 键不放手，在文件夹空白处单击鼠标右键，选择 在此处打开Powershell窗口

使用npm 安装相应的模块

webpack 4 需要安装 webpack、webpack-cli 和 typescript 等必要的模块。为了使用 webpack 处理 typescript，还需要 ts-loader。
在上面打开的 Powershell 窗口中输入以下命令

1、初始化项目：

npm init

回答一系列的问题（也可以直接回车使用默认值）后，在当前项目文件夹中会出现一个package.json的配置文件。文件内容大概如下所示：

{
  "name": "webpacktypescript",
  "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "ts-loader": "^4.2.0", "typescript": "^2.8.1", "webpack": "^4.6.0", "webpack-cli": "^2.0.14" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

2、安装需要的各个模块：

npm install webpack webpack-cli typescript ts-loader --save-dev

回答一系列的问题（也可以直接回车使用默认值）后，在当前项目文件夹中会出现一个package.json的配置文件。文件内容大概如下所示：

{
  "name": "webpacktypescript",
  "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "ts-loader": "^4.2.0", "typescript": "^2.8.1", "webpack": "^4.6.0", "webpack-cli": "^2.0.14" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

3、添加 TypeScript 的配置文件 tsconfig.json

启动 WebStorm 并打开项目，在项目名称上单击鼠标右键 -> New -> tsconfig.json, 添加TypeScipt的配置文件，内容如下所示：

{
  "compilerOptions": {
    "module": "commonjs", "target": "es5", "sourceMap": true }, "exclude": [ "node_modules" ] }

4、添加index.html及默认的 src/index.js文件
在项目文件夹中添加html文件，并命名为：'index.html',并编辑文件内容如下所示：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>TypeScript + Webpack 4</title> </head> <body> <script src="dist/main.js"></script> </body> </html>

在项目文件夹中添加名字为src的文件夹，并在该文件夹中添加名字为index.js的JavaScript文件,文件内容如下所示：

console.log("Hello TypeScript!");

完成以上操作后项目的结构如下所示：

  webpackwithtypescript
  |- src
    |- index.js
  |- index.html
  |- package.json
  |- package-lock.json |- tsconfig.json

5、使用webpack-cli打包项目

在控制台窗口(Powershell窗口 或WebStorm的Terminal 都可以) 输入以下命令进行打包：

npx webpack

控制台显示内容如下所示：

D:\SPAProjects\webpacktypescript>npx webpack
npx: installed 1 in 11.482s The "path" argument must be of type string D:\SPAProjects\webpacktypescript\node_modules\webpack\bin\webpack.js Hash: 7dffdd50a425c0f906c2 Version: webpack 4.6.0 Time: 579ms Built at: 2018-04-18 14:23:26 Asset Size Chunks Chunk Names main.js 577 bytes 0 [emitted] main Entrypoint main = main.js [0] ./src/index.js 33 bytes {0} [built]

打包成功，项目文件夹中会多出 dist/main.js - 这也正是 webpack 4 未指定输出文件时默认的位置。此时在浏览器中打开index.html，并在浏览器中按下F12，进入控制台将会看到 consolr.log() 语句的输出结果。

此时的项目文件夹结构：

  webpackwithtypescript
    |- dist
       |- main.js
    |- src
       |- index.js
    |- index.html
    |- package.json
    |- package-lock.json |- tsconfig.json

webpack 4 没有配置文件时，使用src/index.js作为默认入口，同时使用dist/main.js作为默认出口。
由于TyepScript文件的默认扩展名为.ts，所以并不适合于没有配置文件的默认状况。

6、webpack 配置文件
在项目文件夹中添加名为webpack.config.js的JavaScript文件，并编辑其内容如以下所示：

const path = require('path'); module.exports = { mode: 'development', entry: './src/index.ts', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [{ test: /\.ts$/, use: "ts-loader" }] }, resolve: { extensions: [ '.ts' ] } };

同时修改package.json如以下内容所示：

{
  "name": "webpacktypescript",
  "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "ts-loader": "^4.2.0", "typescript": "^2.8.1", "webpack": "^4.6.0", "webpack-cli": "^2.0.14" }, "devDependencies": {}, "scripts": { "build": "webpack", //添加这一行 "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

完成以上的设置，然后将src/index.js改名为src/index.ts。

  webpackwithtypescript
    |- dist
       |- main.js
    |- src
       |- index.ts
    |- index.html
    |- package.json
    |- package-lock.json |- tsconfig.json

使用npm run build命令编译、打包src/index.ts文件：

D:\SPAProjects\webpacktypescript>npm run build

> webpacktypescript@1.0.0 build D:\SPAProjects\webpacktypescript > webpack  Hash: 9bf0b33a5a6b242a917e Version: webpack 4.6.0 Time: 1683ms Built at: 2018-04-18 15:03:36 Asset Size Chunks Chunk Names main.js 2.84 KiB main [emitted] main Entrypoint main = main.js [./src/index.ts] 35 bytes {main} [built]

在控制台窗口可以输入npm run build指令进行打包时，项目中src文件夹中的ts文件index.ts被编译，并输出为 dist/main.js。

猜你喜欢

转载自www.cnblogs.com/sexintercourse/p/11863044.html
今日推荐
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
虽然老乡鸡开源的不是代码，但背后的原因却让人很暖心
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
周排行
使用Redis中间件解决商品秒杀活动中出现的超卖问题（使用Java多线程模拟高并发环境）
野指针及c++指针使用注意点
redis 3.0　新特性
(翻译)火狐操作系统javascript API
微信小程序开发入门
mysql数据查询之五子句(where、group by、having、order by和limit)
Codeforces Round #517 Div. 1翻车记
在caffe 中实现Generative Adversarial Nets（二）
企业级漏洞扫描工具
java byte数组与String互转
每日归档
更多
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022