webpack搭建环境

1、初始化工程文件package.json

  1. npm init -y           # 生成package.json配置文件

2、初始化tsconfig.json

  1. sudo npm i typescript -g   # 全局安装ts，如果安装过了，忽略这个命令
  3. tsc --init                 # 生成tsconfig.json配置文件

3、配置webpack配置

1、src文件夹下新建build文件夹

image.png

2、配置webpack.base.config.js

  1. const HtmlWebpackPlugin = require('html-webpack-plugin')
  3. module.exports = {
  4.     entry: './src/index.ts',
  5.     output: {
  6.         filename: 'app.js'
  7.     },
  8.     resolve: {
  9.         extensions: ['.js', '.ts', '.tsx']
  10.     },
  11.     module: {
  12.         rules: [
  13.             {
  14.                 test: /\.tsx?$/i,
  15.                 use: [{
  16.                     loader: 'ts-loader'
  17.                 }],
  18.                 exclude: /node_modules/
  19.             }
  20.         ]
  21.     },
  22.     plugins: [
  23.         new HtmlWebpackPlugin({
  24.             template: './src/tpl/index.html'
  25.         })
  26.     ]
  27. }

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

image.png

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啦~