新建项目
初始化
npm init
安装全局依赖
npm install typescript tslint -g
- 执行命令初始化,项目根目录生成tsconfig.json文件
tsc --init
npm install webpack webpack-cli webpack-dev-server -D
- 根目录新建build文件夹,以及文件下webpack.config.js文件 ,用于webpack相关配置。
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWepackPlugin = require('clean-webpack-plugin')
module.exports = {
entry: './src/index.ts', // 入口文件
output: {
filename: 'main.js' // 编译完出口文件
},
resolve: {
extensions: ['.js', '.ts', '.tsx'] // 文件后缀,自动解析文件拓展 示例:import xxx from './index.js 可以省略.js后缀 import xxx from './index'
},
module: {
// 通过正则表达式配置不同文件处理,比如loader
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/ // 编译时,排除忽略指定文件
}
]
},
devtool: process.env.NODE_ENV === 'production' ? false : ' inline-source-map', // 用于开发时,方便调试代码
devServer: {
// 本地服务器配置
contentBase: './dist', // 本地开发环境运行时,是基于哪个文件夹作为根目录来运行的
stats: 'errors-only', // webpack启动服务后,需要在控制台打印那些信息 例如:错误信息
compress: false, // 是否启动压缩
host: 'localhost',
port: 8089
},
plugins: [
// 插件
new CleanWepackPlugin({
// 清空指定文件
cleanOnceBeforeBuildPatterns: ['./dist']
}),
new HtmlWebpackPlugin({
template: './src/tamplate/index.html'
})
]
}
npm install ts-loader -D
- 下载cross-env,获取当前环境(development OR production)
npm install cross-env -D
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js"
},
安装插件
- clean-webpack-plugin 清理指定的文件
npm install clean-webpack-plugin -D
- html-webpack-plugin 指定编译的文件HTML模板
npm install html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')
const cleanWepackPlugin = require('clean-webpack-plugin')
plugins: [
// 插件
new CleanWepackPlugin({
// 清空指定文件
cleanOnceBeforeBuildPatterns: ['./dist']
}),
new HtmlWebpackPlugin({
template: './src/tamplate/index.html'
})
]
安装tslint
tslint --init
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"jsRules": {},
"rules": {
"quotemark":[false],
"no-console":[false]
},
"rulesDirectory": []
}
vscode setting
"tslint.autoFixOnSave": true,