Question

上下文：

我在一个项目中工作，高级程序员决定减少新创建的打字稿文件中的样板代码。这个样板代码的两个例子是导入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>);
  }
}

从这个stackoverflow 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;

我确信我错过了什么。任何人都可以帮助我吗？

Answer 1

肯定已经按照this

这样的教程开放了

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

import "react";

将此文件a添加到条目参数的第一个位置：

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

并添加CommonChunkPlugins：

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

与含有填充物的this in AngularClass类似。

打字稿：如何在全球范围内进行一些进口？

上下文：

问题：

我尝试了什么：

1 个答案: