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

webpack指南(五)TypeScript

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

将webpack与TS进行集成。

1. 安装TypeScript 编译器和 loader

npm install --save-dev typescript ts-loader

2. 在package.json同级目录下新建tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
  "sourceMap": true, // 启用SourceMap功能
"module": "es6", "target": "es5", "jsx": "react", "allowJs": true } }

3. 修改webpack.common.js

module.exports = {
+    entry: {
+        app: './src/index.ts'
+    },
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[
+        {
+                test:/\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/
            }
        ]
    },
+    resolve:{
+        extensions:['.ts', '.tsx', '.js']
+    },
}

ts-loader 在这里使用它可以方便地启用额外的webpack功能,例如将额外的web资源导入项目。

4. 三方库的使用

index.ts

// 此处导入必须写成import as, 否则会报错
import * as _ from 'lodash';
function component() { var element = document.createElement('div'); element.innerHTML = _.join(['hello','webpack'],' '); return element; } document.body.appendChild(component());

当ts文件中使用 npm 安装第三方库时,一定要同时安装这个库的类型声明文件。你可以从 TypeSearch 中找到并安装这些第三方库的类型声明文件。

如:lodash

npm install --save-dev @types/lodash

5. 非代码文件的使用

创建 custom.d.ts 文件,用来编写自定义的类型声明。同样的理念适用于其他资源,包括 CSS, SCSS, JSON 等。

.svg 文件进行声明设置:

declare module "*.svg" {
  const content: any;
  export default content;
}

通过指定任何以 .svg 结尾的导入,将模块的 content 定义为 any,将 SVG 声明一个新的模块。我们可以通过将类型定义为字符串,来更加显式地将它声明为一个 url。


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
TypeScript-映射类型推断发布时间:2022-07-18
下一篇:
5分钟上手Typescript发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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