demo05 webpack + typescript

栏目: JavaScript · 发布时间: 5年前

内容简介:typescript(简称 ts )是 javascript 的超集,具有类型系统,是可编译的。可以想象得到,在代码运行之前能够进行代码类型检查和编译是多么重要的事儿(就像 Java 等强类型语言一样)。比如前端框架 @Angular 就默认集成了 ts , 赋予了 @Angular 项目可以编译的功能。对 ts 不了解的? 先撸一遍 ts 文档?:

typescript(简称 ts )是 javascript 的超集,具有类型系统,是可编译的。可以想象得到,在代码运行之前能够进行代码类型检查和编译是多么重要的事儿(就像 Java 等强类型语言一样)。

比如前端框架 @Angular 就默认集成了 ts , 赋予了 @Angular 项目可以编译的功能。

对 ts 不了解的? 先撸一遍 ts 文档?: www.tslang.cn/docs/handbo…

ts 默认根据tsconfig.json 配置文件(很强大)来对 ts 进行编译。

ts 可以单独使用 typescript 编译器编译,也可以在 webpack 中通过 ts-loader 来进行编译(类似于 babel-loader )。

2.安装相关依赖

typescript 相关

npm install --save-dev typescript
复制代码

webpack 相关

npm install --save-dev ts-loader
复制代码

3.目录结构

// `--` 代表目录, `-` 代表文件
  --demo05
    --src
      -app.js
      -User.js
    -index.html
    -tsconfig.json
    -webpack.config.js
复制代码

src/app.js

import { User } from './User';

const user1: User = {
  name: 'simple',
  age: '25',
  hobby: 'play the guitar'
};

// 这里参数不够,tsc编译器会报错,webpack编译不通过
// const user2: User = {
//   name: 'simple2',
//   age: '25'
// };

console.log(user1);
复制代码

src/User.ts

export interface User {
  name: String,
  age: String,
  hobby: String,
  options?: Object // 可选参数
}

// 理解一下 webpack 的 Tree Sharking?
export interface Animal {
  name: String
}
复制代码

4.编写 tsconfig.json 配置文件

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "allowJs": true,
    "lib": [
      "es2018",
      "dom"
    ],
  },
  "include": [
    "./src/*"
  ],
  "exclude": [
    "./node_modules"
  ]
}
复制代码

关于 tsconfig.json 满多学问的,具体的配置根据项目或者参考配置文档来: www.tslang.cn/docs/handbo…

也可以找一些开源项目,看一下别人是怎么配置的。

5.编写 webpack 配置文件

webpack.config.js

const path = require("path");
module.exports = {
  mode: 'production' || 'development',
  entry: {
    index: "./src/app.ts"
  },
  output: {
    publicPath: __dirname + "/dist/", // 打包后资源文件的引用会基于此路径
    path: path.resolve(__dirname, "dist"), // 打包后的输出目录
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  }
}
复制代码

6.执行打包命令

(默认你已经安装了全局 webpack 以及 webpack-cli )

webpack
复制代码

打包成功后,会在demo05目录下生成 dist/app.bundle.js

7.验证打包结果

创建 index.html 文件,引用打包生成的主文件 (app.bundle.js), 分别用 ie , Chrome 浏览器打开,并查看控制台。

输出结果:

{name: "simple", age: "25", hobby: "play the guitar"}
复制代码

以上所述就是小编给大家介绍的《demo05 webpack + typescript》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

用户体验要素

用户体验要素

Jesse James Garrett / 范晓燕 / 机械工业出版社 / 2011-7-1 / 39.00元

《用户体验要素:以用户为中心的产品设计(原书第2版)》是AJAX之父Jesse James Garrett的经典之作。本书用简洁的语言系统化地诠释了设计、技术和商业融合是最重要的发展趋势。全书共8章,包括关于用户体验以及为什么它如此重要、认识这些要素、战略层、范围层、结构层、框架层、表现层以及要素的应用。 《用户体验要素:以用户为中心的产品设计(原书第2版)》用清晰的说明和生动的图形分析了以......一起来看看 《用户体验要素》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具