打字稿：如何在全局范围内进行一些导入？

Posted 2023-03-23

【中文标题】打字稿：如何在全局范围内进行一些导入？

【英文标题】：Typescript: How to have some imports in the global scope?

【发布时间】：2017-10-20 03:30:10

【问题描述】：

上下文：

我从事一个项目，高级程序员决定减少新创建的打字稿文件中的样板代码。此样板代码的两个示例是导入 React 库或获取和处理本地化字符串的函数。

问题：

是否可以在某些文件夹中的文件中始终提供导入，而不必每次都编写导入标签？

我尝试过的：

我已经搜索并阅读了该主题，并找到了有关定义要在全局空间中使用的变量的链接： global.d.ts、global-modifying-module.d.ts、A typescript issue that seems to get it working

但是，我仍然无法让它工作。这是我尝试过的：

在我希望 React 始终可用的文件夹的根目录下，我创建了一个 global.d.ts 文件，其中包含：

import * as R from "react";

declare global
  const React: typeof R;

使用此文件，资源“React”应该始终可用于后续文件夹中的其他文件。我的 IDE (Webstorm) 识别出导入的存在，并允许我操作变量 React 而不会抱怨。但是，当我尝试运行该应用程序时，出现此错误：

ReferenceError: React 未定义

我不明白代码有什么问题！这是我要渲染的文件的示例：

export default class World extends React.Component<, any> 
  public render() 
    return (<div>Hello world</div>);
  

从这个*** question，我的印象是问题可能与 webpack 有关。为了完整起见，这里是我们当前使用的 webpack 配置文件：

const webpack = require('webpack');
const path = require('path');

const BUILD_DIR = path.resolve(__dirname, './../bundles');
const WEBPACK_ENTRYFILE = path.resolve(__dirname, './../srcReact/ReactWrapper.tsx');


// `CheckerPlugin` is optional. Use it if you want async error reporting.
// We need this plugin to detect a `--watch` mode. It may be removed later
// after https://github.com/webpack/webpack/issues/3460 will be resolved.
const  CheckerPlugin  = require('awesome-typescript-loader');


const config = 
    entry: [WEBPACK_ENTRYFILE],
    resolve: 
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.less']
    ,
    output: 
        path: BUILD_DIR,
        filename: 'bundle.js'
    ,
    plugins: [
        new CheckerPlugin()
    ],
    devtool: 'source-map',    // Source maps support ('inline-source-map' also works)
    module: 
        loaders: [
            
                loader: 'url-loader',
                exclude: [
                    /\.html$/,
                    /\.(js|jsx)$/,
                    /\.(ts|tsx)$/,
                    /\.css$/,
                    /\.less$/,
                    /\.ttf/,
                    /\.woff/,
                    /\.woff2/,
                    /\.json$/,
                    /\.svg$/
                ],
                query: 
                    limit: 10000,
                    name: 'static/media/[name].[hash:8].[ext]'
                
            ,
            
                loader: 'url-loader',
                test: /\.(ttf|woff|woff2)$/
            ,
            
                loader: "style-loader!css-loader!less-loader",
                test: /\.less$/
            ,
            
                loader: "style-loader!css-loader",
                test: /\.css$/
            ,
            
                loader: "svg-loader",
                test: /\.svg$/
            ,
            
                loader: "json-loader",
                test: /\.json$/
            ,
            
                loader: "awesome-typescript-loader",
                test: /\.(ts|tsx)$/
            
        ]
    
;

module.exports = config;

我确定我错过了什么。谁能帮帮我？

【参考方案1】：

肯定已经按照this之类的教程打开

为此会创建一个供应商文件，您可以在其中导入这些类型的“全局”。 ./src/vendors.ts;

import "react";

将此文件a添加到入口参数的第一位：

entry:  'vendors': './src/vendors.ts', 'main': './src/main.ts' 

并添加 CommonChunkPlugins：

plugins: [ new CommonsChunkPlugin(
  name: 'vendors'
),

像 this in AngularClass 和 polyfills。