TypeScript学习04

问题描述：

在通过webpack对ts进行打包后，得到文件夹dist以及dist下面的js文件，那么相应的需要有html文件，为了避免一个一个手动创建，需要做以下操作：

step1：在终端输入cnpm i -D html-webpack-plugin（作用是帮助我们自动生成html文件）

step2： 在webpack.config.js中引入刚刚那个插件

const HTMLWebpackPlugin = require('html-webpack-plugin');

step3：让这个插件生效，在webpack.config.js的module.exports = {}添加内容

module.exports = {

        // 配置webpack的插件

        plugins: [

                new HTMLWebpackPlugin({

                        template: "./src/index.html"

                }),

        ]

 }

补充： 可以在src下新建一个index.html作为一个模板，这样在打包后的文件dist下，就有对应的html文件

step4：安装cnpm i -D webpack-dev-server， 这样的话就可以实现根据项目的改变而自动刷新，此外，还需要再package.json中写上“start”: "webpack serve --open chrome.exe"  //意思是启动webpack的服务器，并且用chrome的浏览器打开

然后命令行中输入npm start 这样在浏览器中就自动打开了

step5：cnpm i -D clean-webpack-plugin

然后在webpack.config.js中引入刚刚安装的插件

const {CleanWebpackPlugin} = require('clean-webpack-plugin');

然后让这个插件生效，在webpack.config.js的module.exports = {}添加内容

  plugins: [

        new CleanWebackPlugin(),

  ]

这个插件实现每一次编译前把原来旧的dist文件清空（删除)，然后再重新放进去

step6：

考虑一种情况，在m.ts中向外暴露，作为一个模块，然后在另一个文件中引用，但是这个使用执行npm run build，会报错，因为此时模块的后缀名为.ts  

所以需要告诉webpack哪些文件可以作为模块被使用

所以需要在webpack.config.js中进行配置

加入新的属性

resolve: {  // 用来设置引用模块

        //  凡是以ts和js结尾的文件都可以作为模块被引入和使用

        extensions: ['.ts', '.js']

}

---------------------分界线-----------------------------------

问题描述：

        IE可能不支持最新的语法，怎么办？

                比如在写完代码之后将其转换为旧版本的代码，比如转换成ES5，虽然在tsonfig.json

中的target中可以进行转换，但是这个转换仅是语法的转换，但是一些复杂的东西，比如promise，这个时候就需要用到bable（新语法转换为旧语法）

               在实际项目开发中，babel通常结合webpack一起使用 

                安装： cnpm i -D @babel/core @babel/preset-env babel-loader core-js

                改配置文件，在webpack.config.js中的module中添加一些东西，在rules中的use中使用数组，然后把刚刚安装的babel-loader添加进去

                先babel-loader，然后再ts-loader，因为use的执行顺序，是先右后左

                然后设置babel兼容性问题再添加设置预定义的环境

                

补充：箭头函数在IE中不支持

        使用babel可以将你写的箭头函数在webpack打包后，转变为普通函数

        但是考虑到以一种情况，如果在打包之后，得到一个自执行函数，但是这个函数是个箭头函数（webpack自动生成的，不是我们写的），没有转换成普通函数

        所以就要告诉webpack，将这个额外的箭头函数转换为普通函数，这样，打包后的代码，也能够在ie环境下正常显示

怎么告诉？

        在webpack.config.js中的output中进行配置

        environment: {

                arrowFunction: false   //告诉webpack不适用箭头函数

        }