标签：npm node TypeScript ts js webpack 初体验 let
TypeScript学习
1 安装环境
a 首先安装node.js
node.js 用来将ts文件解析成js文件 供浏览器使用；
解析ts文件 tsc filename.ts
b. 使用npm （node.js的包管理器）下载typescript，安装完node.js 就已经安装好了nmp
下载命令为： npm install -g typescript
2语法：
// let ｛变量名｝ ：｛类型｝
let a:number;
a=10;
let b='hello';
// 定义参数和返回值的类型
//function {方法名称}({形参}:{类型},...):{方法返回值数据类型}
function sum(a:number,b:number):number
{
return a+b;
}
let any: any; //关闭ts 使用js 动态类型 不建议使用
let unk: unknown; //不能赋值给其他类型
//字面量 “|”联合类型
let bs: boolean | string;
bs = false;
bs = 'hello'
console.log(` let bs: boolean | string return : ${bs}`);
//断言
/*告诉解析器变量的实际类型
* 变量 as Type
* <Type>变量
*/
user = bs as string;
user = <string>bs;
3 编译 tsconfig.json
在根目录配置tsconfig.json 直接执行tsc 可以编译配置文件中配置的文件
{
"include": ["./src/**/*"],
"compilerOptions": {
"outDir": "./dist",
"target": "es6",
...
}
}
4 webpack 配置
1、npm 初始化目录 生成一个webpack.json文件
npm init -y
webpack.json 用来配置项目基本信息，命令，项目依赖等
2、npm 安装依赖库 webpack webpack-cli typescript tsloader
npm i -D webpack
npm i -D webpack-cli
npm i -D typescript
npm i -D ts-loader
3、编辑webpack.config.js 文件
const path=require("path");
//webpck 所有的配置信息都应该写在module.exports中
module.exports= {
mode:'devlopment',
entry:"./src/index.ts",
//指定打包文件路径
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
//webpack 打包使用的模块
module:{
rules:[{
test:/\.ts$/,//指定规则生效的文件
//要使用的loader
use:'ts-loader',
exclude:/node_modules/,
}]
}
}
4、编辑tsconfig.json
{
//编译根目录下所有文件
"include": ["./src/**/*"],
"exclude":["./node_modules/"]
//编译选项
"compilerOptions": {
"outDir": "./dist",//编译后文件的输出目录为根目录下的dist
"target": "es6",// 编译为es6版本的js
"noImplicitAny": true
}
}
5、webpack.json添加命令 “scripts”节点下
"build":"webpack"
6 运行打包程序
nmp run build
进阶：
安装html-webpack-plugin
生成引用文件的html
安装webpack-dev-server
使用npm作为开发服务器 启动项目
安装babel 可以配置处理浏览器兼容性
相关知识：
.ts扩展名的文件为 TypeScript代码文件
https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html
npm run dev ‘npm'是什么
npm是干什么的?为什么要使用npm？（适合不太了解 npm 的新人阅读）
安装完node.js之后就已经安装好了npm
NPM 的思路大概是这样的：
-
买个服务器作为代码仓库（registry），在里面放所有需要被共享的代码
-
发邮件通知 jQuery、Bootstrap、Underscore 作者使用 npm publish 把代码提交到 registry 上，分别取名 jquery、bootstrap 和 underscore（注意大小写）
-
社区里的其他人如果想使用这些代码，就把 jquery、bootstrap 和 underscore 写到 package.json 里，然后运行 npm install ，npm 就会帮他们下载代码
-
下载完的代码出现在 node_modules 目录里，可以随意使用了。
这些可以被使用的代码被叫做「包」（package），这就是 NPM 名字的由来：Node Package(包) Manager(管理器)。
node.js
node.js 是一种javascript的运行环境，能够使得javascript脱离浏览器运行。Node.js官网
webpack 官网：
https://www.jqhtml.com/7626.html
webpack是什么?
webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler)。
实现按需加载，代码压缩
标签：npm,node,TypeScript,ts,js,webpack,初体验,let 来源： https://www.cnblogs.com/cheery-go/p/15841950.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。