webpack 读取文件夹下的文件_TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建...
1.TypeScript完全解读-开发环境搭建
初始化项目
手动创建文件夹
D:\MyDemos\tsDemo\client-demo
用VSCode打开
npm init:初始化项目
然后我们的项目根目录就多了个package.json的文件
创建相关目录文件夹
untils:业务相关的,可服用的方法
assets:主要放静态资源
img:图片
font:字体文件
tools:业务无关的纯工具的函数
api:把一些可以复用的接口请求的方法,放在api文件夹下
config:一般放配置文件,把一些可能会修改的配置,抽离出来放在这里
src同比别的文件夹typings:存放ts的声明文件
build:项目打包上线的一些配置,或者我们本地开发时,本地服务的一些配置,一般就放我们的webpack配置
文件夹建好以后,安装我们ts的依赖
把typescript和tslint安装在全局
tslint和eslint都是对代码风格监测的工具。tslint是专注于ts的
我们把它们安装在全局,所以后要交一个 -g
npm install typescript tsint -g
安装完成后,使用:tsc --init来初始化我们ts的配置
我们客户看到 里面有很多的注释文件
这是ts在1.8的版本以后,支持可以在config内写注释
添加webpack
这里是用webpack4,4最大的亮点就是尽可能少的让我们去配置
首先需要在项目中安装webpack
npm install webpack
安装为开发依赖 -D
少安装了依赖,根据视频中的再操作一遍
npm install webpack webpack-cli webpack-dev-server -D
安装完成后,我们需要写一个webpack的配置文件,在build文件夹下创建webpack.config.js文件
package.json内的scripts节点 ,都可以用npm run去调用。例如这里现在配置的是test
我们添加一个运行的执行 start,其他的指令必须前面应npm run 去调用,例如这个test的指令,调用就是:npm run test
但是这个start指令呢,我们直接使用:npm start就可以了。start的配置,我们待会再看。
webpack的配置
webpack是运行在node环境下的。只在你编译的时候运行。
我们使用node的module导出一个模块
entry是入口文件,指定了src目录下的index.ts文件
把这个文件做为入口文件,那么我们在本地开发和打包的时候,他都会从这个文件开始,逐渐的往里面添加依赖什么的
然后我们在src下创建index.ts文件,里面的内容呢,我们先不用管
output:项目变异完的输出文件
filename:我们变异完后的文件叫做什么,ts编译完后都是js文件
resolve:
extensions是一个数组
例如上面我们配置了extensions里面有个.js的文件,在src的目录下有一个index.js的文件,我们在index.ts内要引入这个同级别的index.js的文件的话,一般就是这么写的
importXXfrom'./index.js'
但是我们配置了extensions里面的.js这么个配置,那么这里我们在import的时候,就可以把后缀.js省略掉
importXXfrom'./index'
它会自动的去找同级别下的index开头的这么个文件
那么我们这里是开发ts,所以自然也要个添加对ts的支持
这里配置了.ts和.tsx这两种,
tsx里面就是写一些jsx的语法
module配置项
rules:配置依稀对于制定文件的处理的loader之类的东西
这个正则表达式匹配的后缀为ts或者tsx的文件
use:就是表示使用ts-loader来处理ts和tsx格式的文件
那么既然我们配置上了ts-loader。我们就需要使用npm进行安装
npm install ts-loader -D
-D表示 开发依赖
还要制定exculde来排除node_modules文件夹下的文件,这样在编译的时候就不会去编译node_modules文件夹下的文件了。
source-map
开发的时候为了方便调试代码,是需要source-map
调试的时候方便定位你代码的一个东西。这里我们使用inline-source-map
开发的时候我们是需要source-map。但是实际打包上线是不需要的,不需要source-map会增加的编译速度和打包速度,减少一些资源的空间浪费
所以我们这里需要判断下当前是在本地开发环境还是上线打包
这个NODE_ENV需要在哪里传进来呢?在我们的命令里面。我们这先留空,待会需要用到一个工具,待会再来介绍
通过:process.env.NODE_ENV === 'production'来判断是否是生产环境
NODE_ENV参数的传入
在启动的指令这里,我们需要用到webpack-dev-server,就是一个我们用于本地开发的一个服务器
如何启动并且应用这些配置呢?
webpack-dev-server:这是启动命令
--config:通过config参数来指定我们webpack的配置文件
那么我们就制定build文件夹下的webpack.config.js文件。
这样我们就指定了,webpack-dev-server去build文件夹去读取我们webpack的配置文件。
传入参数。借助工具:cross-env 后面指定了 NODE_ENV的值是开发环境development
这样在webpack的配置文件中就可以通过process.env.NODE_ENV获取到我们传入的值了。
用了cross-env自然我们也需要安装它
npm install cross-env -D
-D:表示作为开发依赖进行安装:
这样我们的本地开发指令就写好了,本地开发利用webpack-dev-server它有一些参数也可以配置
webpack-dev-server的参数配置
contentBase:基于哪个文件夹作为根目录运行的,这里我们配置为根目录的dist文件夹
stats:
webpack启动后在控制台打印出哪些信息,我们只关注错误信息,这里只写个简单的errores-only
compress:false不启动压缩
host:'localhost'
port:端口制定8089
这样本地开发服务器的配置就配置完成了
配置插件:
plugins这里用到两个插件
npm install clean-webpack-plugin:可以清理制定的文件夹或者文件
第二个插件:
html-webpacl-plugin:指定一个编译的html文件,后面的编译呢会基于此html作为模板来编译
连个插件一起安装:
npm install clean-webpack-plugin html-webpack-plugin -D
使用者两个插件需要先引入:
const HtmlWebpackPlugin = require('html-webpack-plugin')const CleanWebpackPlugin = require('html-webpack-plugin')
首先我们要使用的就是CleanWebpackPlugin给传入一个对象,设置一些配置
程序build之前先清理dist打包生成的文件夹
编译的时候制定哪个html作为模板进行编译
src下创建template文件夹,并再创建index.html文件夹
这样,这就是我们的模板文件了。
webpack会打包项目会生成一个dist文件。会把这个模板文件index.html和我们定义的main.js文件放到一起,并会自动在index.html模板里面引入main.js和这个文件
项目中安装ts的依赖
刚才我们是全局中安装的ts,我们在我们的项目中也要添加依赖
npm install typescript
纠正错误:
配置文件写错了多个地方
运行start指令
http://localhost:8089/
有热更新,修改后会自动刷新页面
在src/index.ts内简单的定义一个number类型的变量
配置打包环境:
添加新的指令build
通过cross-env传入参数 NODE_ENV=production表示生产环境,我们调用命令webpack ,然后通过--config 指定配置文件路路径
因为build传入的production生产环境,所以打包的时候就不会产生source-map
npm run build 进行打包
main.js文件是经过压缩的
在index.ts编写代码修改页面的title
开发环境配置好了
本地运行和打包也配合好了
webpack 读取文件夹下的文件_TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建...相关推荐
- python怎么读文件夹下的文件夹-python2.7读取文件夹下所有文件名称及内容的方法...
最近稍稍有点空闲时间,于是重新温习了一下之前学习过的python基础.废话不多说,记录一下自己的所得. 首先,安装什么的不在本人的温习范围,另,本人使用的是windows下的python2.7版本,且 ...
- android 读取assets文件夹下的文件资源
今天,简单讲讲如何读取assets文件夹下的文件. Android资源文件大致可以分为两种: 第一种是res目录下存放的可编译的资源文件: 这种资源文件系统会在R.Java里面自动生成该资源文件的ID ...
- C# 读取指定文件夹下所有文件
#region 读取文件 //返回指定目录中的文件的名称(绝对路径)string[] files = System.IO.Directory.GetFiles(@"D:\Test" ...
- python读取文件夹下所有文件的名称_python2.7 学习之读取文件夹下所有文件名称及内容...
python2.7 学习之读取文件夹下所有文件名称及内容 最近稍稍有点空闲时间, 于是重新温习了一下之前学习过的 python 基础废话不多说, 记录一下自己的所得 首先, 安装什么的不在本人的温习范 ...
- 用递归方法实现读取文件夹下所有文件信息
要实现读取文件夹下所有文件信息,其实只要用个递归方法就可以简单实现了 下面为自定义的一个类其中的showEveryFile方法就是为读取给定文件夹下每一个文件 using System; using ...
- java读取文件夹下所有文件并替换文件每一行中指定的字符串
java读取文件夹下所有文件并替换文件每一行中指定的字符串 该文章为转载文章,请尊重原文作者的劳动成果,好的文章应该被展示 原文传送门 多说两句,关键时候救人性命的人,可以称之为大人,随时做好利见大人 ...
- Linux C 读取文件夹下所有文件(包括子文件夹)
Linux C 读取文件夹下所有文件(包括子文件夹) 递归读取某文件夹及其子文件夹下所有文件名 深入探讨:linux中遍历文件夹下的所有文件 Linux C :遍历输出指定目录下的所有文件 Linux ...
- Matlab 读取文件夹下所有文件(*.mat *.txt等)
Matlab 读取文件夹下所有文件(*.mat *.txt等) dir函数: dir('.')列出当前目录下所有子文件夹和文件 dir('G:\Matlab')列出指定目录下所有子文件夹和文件 dir ...
- Matlab中对文件夹下.mat文件进行读取及操作
Matlab读取文件夹中的.mat文件并加载进行信号重采样 文件夹中的数据读取 获取文件夹下文件的各项信息,主要是根据用户所需要的文件夹路径path及文件后缀,使用dir方法可得到文件夹下目标文件的各 ...
最新文章
- java 更新文件内容吗_java Io流更新文件内容
- Html画布w3c,HTML canvas 标签
- python3.7 pip安装_python3.7安装, 解决pip is configured with locations that require TLS/SSL问题...
- list dict 性能测试
- 【原】基础篇:第一篇,本节主要向大家介绍Ext的最基础的话题
- moco-globalsettings
- java实现米和厘米比较好_java如何根据实际经、纬度和已知经、纬度做对比,计算出具体偏差米数。(以米为单位)...
- 教你两种数据库覆盖式数据导入方法
- 差速齿轮原理_差速器和差速锁的区别
- C++基础::类设计的几大原则
- embed标签动态改变Src的值,局部刷新播放其他视频的javascript方法
- 【已解决】map container is already initialized——页面切换瓦片图不出来的问题
- Java的API帮助文档
- CAD图形不闭合问题的解决方法
- Eastfax使用技巧
- 核磁谱图分析步骤_核磁共振解析图谱的步骤
- python读写 doc文件和docx文件
- ERP、CRM、OA的区别是什么?
- 生信格式 | bigwig,bw (基因组浏览器绘制)
- 迈阿密热火队全明星球员克里斯。波什的编程生活
热门文章
- clickhouse hbase性能对比_QQ音乐PB级ClickHouse实时数据平台架构演进之路
- TCP/IP / 如何进行流量控制( flow control )?
- uniapp怎么引入css_Uniapp怎么引入外部js
- java 内存空间_怎样用java实现存储空间动态分配
- MTK MtkSettings Sim Dialog Patch
- oracle备库重启后失去连接,关于dataguard备库宕机后重启后的问题
- java泛型bean copy list
- win10 远程出现身份验证错误 要求的函数不受支持
- 【模板】 全排列 有重复元素的全排列
- qsort()编译器自带快速排序的用法