• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

尝试自己搭一个简单的typescript运行环境

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

开发typescript项目有一些现成的脚手架,比如:typescript-library-starter,它的配置齐全,更适合用在实际项目开发上。其实在学习阶段可以自己搭建一个简单的typescript运行环境,只用作学习typescript语法。

 

初始化项目

依次执行:

mkdir ts-learn-demo

cd ts-learn-demo

npm init -y

 

然后全局安装 typescript,便于在任意文件夹使用 tsc 命令:

// 安装失败的话请以管理员身份运行,此处是sudo命令是mac上管理员权限
sudo npm install typescript -g

 

安装成功后进入项目根目录,使用 tsc 命令进行初始化:

tsc --init

此时项目根目录里多了一个 tsconfig.json 文件,它的配置信息参考:https://www.tslang.cn/docs/handbook/tsconfig-json.html

 

在项目里安装 typescript,注意这一次不是全局安装,全局安装是为了tsc命令,这里是为了本地编译和开发

npm install typescript

 

配置TSLint(可选)

类似ESLint,统一代码风格,全局安装TSLint:

sudo npm install tslint -g

然后在项目中初始化:

tslint -i

此时项目目录中会多一个 tslint.json 文件,关于它的配置可自行百度,在学习阶段默认的配置即可。

 

配置webpack

使用webpack进来开发和打包,先安装一些必要的插件:

npm install webpack webpack-cli webpack-dev-server -D

npm install html-webpack-plugin clean-webpack-plugin -D

npm install ts-loader -D

 

在项目根目录创建 webpack.config.js 文件:

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

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'main.js'
  },
  resolve: {
    extensions: ['.js', 'ts', 'tsx']
  },
  module: {
    // 配置以.ts/.tsx结尾的文件都用ts-loader解析
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map',
  devServer: {
    contentBase: './dist',
    stats: 'errors-only',
    compress: false,
    host: 'localhost',
    port: 8888
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['./dist']
    }),
    new HtmlWebpackPlugin({
      template: './src/template/index.html'
    })
  ]
}

 

上述webpack配置信息中可知,项目源码放在 src 目录下,入口文件是 ./src/index.ts 。接下来还要创建模板html文件,在 ./src/template目录下创建index.html模板:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>TS Demo</title>
  </head>
  <body></body>
</html>

 

目录结构如下:

 

 

开发和打包

webpack配置文件已经写好,接下来只要写好script命令就可以轻松开发了。在package.json文件中指定命令:

// start 是启动本地开发
// build是打包
"scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --mode=production --config webpack.config.js"
  },

注意到命令里有一个 cross-env,这个是指定当前环境变量的,需要安装一下:

npm install cross-env

 

好了,现在在index.ts随便写一些ts代码测试一下:

// ./src/index.ts

let str: string = 'hello world'

document.write(str)

 

本地启动服务执行:

npm start

打包执行:

npm run build

 

结尾

此typescript运行环境只是简单的做到可执行ts文件,还有很多不足之处,在学习typescript的同时,可以再慢慢改善。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap