webpack 打包 typescript

################typescript webpack###############

js的超集 tslang.cn

npm i typescript ts-loader --save-dev

tsconfig.json使用的时候需要在根目录下创建 配置ts

常用的选项 compilerOptions

#############webpack ts 初始化 tsconfig.json###############

根目录

node_modules

src

  app.ts

package.json

tsconfig.json

webpack.config.js

npm init

npm i webpack typescript ts-loader --save-dev

根目录下创建 tsconfig.json 内容如下

{

'compilerOptions':{

'module':'commonjs',

'target':'es5',    编译后的文件是在什么环境下运行的     

'allowJs':true,

'typeRoots':[        这里是设置引用声明文件的路径

'./node_modules/@type'   使用npm install @types/lodash 安装的声明文件所在的位置

'./typings/modules'  使用typings install lodash --save 安装的声明文件所在的位置

] 

},

'include':[

'./src/*'

],

'exclude':['./node_modules']

}

根目录下创建 webpack.config.js

module.exports = {

entry:{'app':'app.ts'},

output:{filename:'[name].bundle.js'},

module:{

rulse:[

{

test:/\.tsx?$ /,

use:{

loader:'ts-loader'

}

}

]

}

}

src下创建 app.ts    npm i lodash -s

import * as _ from 'lodash'

console.log(_.chunk([1,2,3,4,5],2))

const NUM= 45

interface Cat{    ts语法 Cat类型

name:String,sex:String

} 

function touchCat(cat: Cat) {

console.log('喵喵喵！！！',cat.name)

}

touchCat({

name:'tom'

sex:'male'

})

#############webpack ts 声明文件###############

npm install @types/lodash

npm install @types/vue

ts 中类型判断

引入的类库 也是有相应的申明文件

有了错误 及时反馈 如下：

import * as _ from 'lodash'

console.log(_.chunk([1,2,3,4,5,6],2)) 正确的参数设置

npm install @types/lodash

console.log(_.chunk(2)) 错误的参数设置

如果没有npm i 安装声明文件化是不会报错的。

还有一种方式是：

npm install typings -g 全局安装上之后可以在项目里在局部安装类型声明

    typings install lodash --save 安装在本地项目里 在根目录下会多出来 typings.json和typings目录(类似node_modules)

    npm uninstall @types/lodash --save 删除本地项目里安装的 声明文件

 但是使用这钟方式需要手动配置 tsconfig.json 来使用它

'compilerOptions':{

'module':'commonjs',

'target':'es5',    编译后的文件是在什么环境下运行的     

'allowJs':true,

'typeRoots':[        这里是设置引用声明文件的路径

'./node_modules/@type'   使用npm install @types/lodash 安装的声明文件所在的位置

'./typings/modules'  使用typings install lodash --save 安装的声明文件所在的位置

] 

},