webpack搭建环境
1、初始化工程文件package.json
npm init -y # 生成package.json配置文件
2、初始化tsconfig.json
sudo npm i typescript -g # 全局安装ts,如果安装过了,忽略这个命令
tsc --init # 生成tsconfig.json配置文件
3、配置webpack配置
1、src文件夹下新建build文件夹
2、配置webpack.base.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.ts',
output: {
filename: 'app.js'
},
resolve: {
extensions: ['.js', '.ts', '.tsx']
},
module: {
rules: [
{
test: /\.tsx?$/i,
use: [{
loader: 'ts-loader'
}],
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/tpl/index.html'
})
]
}
3、配置webpack.dev.config.js
module.exports = {
devtool: 'cheap-module-eval-source-map'
}
4、配置webpack.pro.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}
5、配置webpack.config.js
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')
module.exports = (env, argv) => {
let config = argv.mode === 'development' ? devConfig : proConfig;
return merge(baseConfig, config);
};
4、配置运行脚本(package.json)
"scripts": {
"strat": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
"build": "webpack --mode=production --config ./build/webpack.config.js",
},
// 需要把所需依赖加进来
5、src下新建index.ts
let hello = 'hello ts'
document.querySelectorAll('.app')[0].innerHTML = hello;
6、src/tpl/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app"></div>
</body>
</html>
7、运行start
rollup搭建环境
1、全局编译TS文件
全局安装typescript
对TS
进行编译
npm install typescript -g
tsc --init # 生成tsconfig.json
tsc # 可以将ts文件编译成js文件
tsc --watch # 监控ts文件变化生成js文件
2、配置rollup环境
1、安装依赖
npm install rollup typescript rollup-plugin-typescript2 @rollup/plugin-node-resolve rollup-plugin-serve -D
2、初始化TS
配置文件
npx tsc --init
3、rollup配置操作
// rollup.config.js
import ts from 'rollup-plugin-typescript2'
import {nodeResolve} from '@rollup/plugin-node-resolve';
import serve from 'rollup-plugin-serve';
import path from 'path'
export default {
input:'src/index.ts',
output:{
format:'iife',
file:path.resolve('dist/bundle.js'),
sourcemap:true
},
plugins:[
nodeResolve({
extensions:['.js','.ts']
}),
ts({
tsconfig:path.resolve(__dirname,'tsconfig.json')
}),
serve({
open:true,
openPage:'/public/index.html',
port:3000,
contentBase:''
})
]
}
4、package.json
配置
"scripts": {
"dev": "rollup -c -w"
}
我们可以通过npm run start
启动服务来使用typescript啦~