小柒

www.xiaoqi.cn

0%

搭建TypeScript+webpack5开发环境

发表于 更新于 分类于

初始化package.json

初始化package.json有两种方式，一种是通过npm管理，一种是通过yarn管理。

npm命令：

1
npm init

yarn命令：

1
yarn init

直接用默认配置：

1
yarn init -y

package.json中dependencies,devDependencies,peerDependencies,scripts这几个字段的意思。

dependencies:生产环境，项目运行的依赖（如ract,ract-dom

devDependencies开发环境，项目所需的依赖(webpack插件，打包插件叶索插件，eslint等)

peerDependencies 包不会自动安装，会提示你项目运行，需要主动安装该依赖

scripts命令脚本

引入TypeScript

1
npm i -D typescript

或者

1
yarn add typescript -D

用tsc命令初始化生产tsconfig.json文件

1
tsc --init

tssconfig.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
{
    "compilerOptions": {
        "rootDir": "./src",//源码目录
        "target": "es5", // 指定输出 ECMAScript 目标版本
        "module": "ESNext", //面向未来的ESM模块化
        "strict": true, // 开启所有的严格检查配置
        "esModuleInterop": true, // 允许 export = xxx 导出 ，并使用 import xxx form "module-name" 导入
        "outDir": "dist",
        /* 指定要包含在编译中的库文件——引用类库——即申明文件，如果输出的模块方式是 es5，就会默认引入 "dom","es5","scripthost" 。如果在 TS 中想要使用一些 ES6 以上版本的语法，就需要引入相关的类库 */
        "lib": [
            "webworker",
            "dom",
            "es5",
            "es2015",
            "es2016",
            "es2015.promise",
            "dom.iterable",
            "scripthost",
            "esnext",
        ], // 要包含在编译中的依赖库文件列表
        "allowJs": true, // 允许编译 JavaScript 文件
        // 检查 JS 文件
        "checkJs": true,
        "skipLibCheck": true, // 跳过所有声明文件的类型检查
        "allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块进行默认导入
        "resolveJsonModule": true, // 允许使用 .json 扩展名导入的模块
        /* react 模式下：直接将 JSX 编译成 JS，会生成 React.createElement 的形式，在使用前不需要再进行转换操作了，输出文件的扩展名为 .js */
        /* preserve 模式下：不会将 JSX 编译成 JS，生成代码中会保留 JSX，以供后续的转换操作使用（比如：Babel）。 另外，输出文件会带有 .jsx 扩展名 */
        /* react-native 模式下：相当于 preserve，它也保留了所有的 JSX，但是输出文件的扩展名是 .js */
        "jsx": "react", // 在.tsx文件中支持JSX
        "sourceMap": true, // 生成相应的.map文件
        "declaration": true, // 生成相应的.d.ts文件
        "allowUmdGlobalAccess": true,
        "experimentalDecorators": true, // 启用对ES装饰器的实验性支持
        "moduleResolution": "node", // 将模块解析模式设置为node.js解析模式
        "baseUrl": "./",
        "incremental": true, // 通过从以前的编译中读取/写入信息到磁盘上的文件来启用增量编译
        "forceConsistentCasingInFileNames": true,
        /* 当目标是ES5或ES3的时候提供对for-of、扩展运算符和解构赋值中对于迭代器的完整支持 */
        "downlevelIteration": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        // 不允许使用隐式的 any 类型
        "noImplicitAny": false,
        // 不允许 this 有隐式的 any 类型，即 this 必须有明确的指向
        "noImplicitThis": false,
        // 不允许把 null、undefined 赋值给其他类型变量
        "strictNullChecks": false,
        "paths": {
            //别名
            "@/*": [
                "src/*"
            ],
            "@images/*": [
                "src/assets/images/*"
            ],
        }
    },
    "include": [
        "src"
    ],
    "exclude": [
        "node_modules",
        "dist"
    ] // *** 不进行类型检查的文件 ***
}


引入webpack

1
npm i webpack webpack-cli webpack-dev-server --save-dev

构建tsx

关于TS转JS，有三种方案

  1. tsc 缺点，转换为es5后，一些语法特性不能转换
  2. ts-loader
  3. babel-loader+@babel/preset-typescript 插件丰富，后序兼容扩展性强
1
npm i @babel/core @babel/preset-env babel-loader core-js

[babel中文网](https://link.juejin.cn/?target=https%3A%2F%2Fwww.babeljs.cn%2Fdocs%2Fusage

安装必要的webapck插件和Loader

1
npm i -D html-webpack-plugin less-loader css-loader style-loader postcss postcss-loader

配置webpack.config.js

解释：path.resolve()方法用于将相对路径转为绝对路径

它接收多个参数，依次表示所要进入的路径，直到将最后一个参数转为绝对路径，如果根据参数无法得到绝对路径，就以当前所在路径作为基准，除了根目录，该方法的返回值不带尾部斜杠

例如：

1
2
3
4
5
// 格式
path.resolve([from ...], to)

// 实例
path.resolve('foo/bar', '/tmp/file/', '..', 'a/../subfile')

执行效果：

1
2
3
4
5
$ cd foo/bar
$ cd /tmp/file/
$ cd ..
$ cd a/../subfile
$ pwd

node.js中的文件路径大概有____dirname,___filename,precess.cwd,./或者../

1
2
3
4
__dirname：    获得当前执行文件所在目录的完整目录名
__filename：   获得当前执行文件的带有完整绝对路径的文件名
process.cwd()：获得当前执行node命令时候的文件夹目录名 
./：           文件所在目录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path=require('path')

module.exports={
    entry:'./src/index.ts',
    //用来设置引用模块,避免找不到ts和js模块
    resolve: {
        extensions:['.ts','.js']

    },
    output:{
        path:path.resolve(__dirname,'dist'),
        //打包后文件
        filename:"bundle.js",
        clean:true,
        environment:{
            arrowFunction: false,//关闭webpack的箭头函数，可选
        }

    },
    
    //开发模式使用，方便查错误
    devtool:'inline-source-map',
    devServer: {
        static:'./dist',
    },

    module:{
        rules:[
            {
                test:/\.ts$/,
                use:
                [
                    {
                        loader:"babel-loader",
                        //设置babel
                        options:{
                            //设置预定义环境
                            presets:[
                                [
                                    //指定环境的插件
                                    "@babel/preset-env",
                                    //配置信息
                                    {
                                        //要兼容的目标浏览器
                                        targets:{
                                            chrome:"58",
                                            ie:"11",
                                        },
                                        //指定corejs版本
                                        corejs:'3',
                                        //使用corejs的方式"usage"表示按需加载,能够解决ie11旧浏览器中promise无法使用的问题
                                        useBuiltIns:"usage",

                                    }
                                ]

                            ]
                        }

                    },
                    {
                    loader:'ts-loader',
                    },
                ],
                
                exclude:/node-modules/
            },
            {
                test:/\.css$/,
            //使用哪些loader
            use:[
                //use数组中loader执行顺序从右到左，从下到上一次执行
                //创建style标签，将js中的样式资源插入进行，添加到head中生效
                'style-loader',
                //将css文件变成commonjs模块加载到js中，里面内容是样式字符串
                'css-loader'
            ]},
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    //引入postcss
                    {
                        loader:"postcss-loader",
                        options:{
                            postcssOptions:{
                                plugins:[
                                    [
                                        "postcss-preset-env",
                                        {
                                            browsers:'last 2 versions'
                                        }
                                    ]
                                ]
                            }
                        }

                    },
                    'less-loader',//将less文件编译成css文件
                ]
            },

        ]
    },
    plugins:[
        new HtmlWebpackPlugin(
            {template:'./src/index.html'}
        )
    ],
    mode:'development'

}

修改 package.json中scripts

1
2
3
4
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack-dev-server --open"
  },

直接npm run build就能启动webpack-dev-server