Question

我正在Visual Studio上进行MVC React项目。

到目前为止，一切都很好，但是现在我有一个自己编写的打字稿文件，我希望可以在项目中使用它。对我来说这是一个学习过程，所以现在我只想能够通过标准的<script src=...>标签在通用HTML页面（ not React）中使用该Typescript。

我知道它需要编译为JS，但我不知道如何设置该过程。

我已经找到并尝试了很多涉及webpack.config.ts，package.json，tsconfig.json等的解决方案，但是没有任何效果。

是否有确定的明显方法？还是我的项目中有某些我错了的东西？

如果有帮助，这是项目中文件布局的外观（webGL.ts是我要处理的文件）。

我尝试将其添加到tsconfig.json：

"files": [
    "/ClientApp/webGL.ts"
 ]

我的webpack.config.js文件如下所示：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
    return [{
        stats: { modules: false },
        entry: { 'main': './ClientApp/boot.tsx' },
        resolve: {
            extensions: ['.js', '.jsx', '.ts', '.tsx']
        },
        output: {
            path: path.join(__dirname, bundleOutputDir),
            filename: '[name].js',
            publicPath: 'dist/'
        },
        module: {
            rules: [
                { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
                {
                    //for reading font files
                    test: /\.(woff|woff2|ttf|eot|ico)$/,
                    loader: 'file-loader?name=assets/[name].[hash].[ext]'
                }
            ]
        },
        plugins: [
            new CheckerPlugin(),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new ExtractTextPlugin('site.css')
        ])
    }];
};

我怀疑该文件中需要了解或更改某些内容，但总体而言我有些迷失。

非常感谢您的帮助。

更新：

我还尝试过手动创建一个同名的JS文件，通过该文件我可以手动将TS复制到该文件中并根据需要进行调整（我实际上不是在这里学习TS，而是在尝试学习webGL和三个.js，如果可以的话，我更喜欢通过TS来做到。

制作完JS文件后，它会自动作为存根放置在TS文件下，如下所示：

我觉得这有些相关性，但我不知道如何或为什么。他们自动加入的事实告诉我一些事情。我仍然不知道如何在项目中使用它。

Answer 1

通常，您在src目录中编写打字稿，使用编译器设置创建一个tsconfig.json文件，然后使用tsc编译到另一个目录中的javascript。

我最近在github中创建了一个basic typescript starter project，您可以检查其引用。

在tsconfig.json中，您可以看到代码进入了src目录，而生成的javascript也进入了dist。

此存储库使用tsc通过npm run build进行编译，但是您也可以使用webpack，尤其是当您正在编译包含多个文件的项目以供Web使用时，或者如果您想使用其他转译器，例如babel等。

示例tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2018",
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "**/node_modules/*"
  ]
}

在您的项目中

在您的特定用例中，您正在使用webpack将源文件转换为javascript。您的webpack.config.js告诉webpack如何做。它会在您的main.js目录中生成dist（请参阅配置中的entries和documentation for entry points）。

如果要在现有项目中添加新文件，则需要添加新条目：

module.exports = {
  entry: {
    main: './ClientApp/boot.tsx',
    webGL: './ClientApp/webGL.tsx'
  }
};

这告诉webpack构建2个单独的文件，每个文件都捆绑了所有依赖项，一个用于main应用程序，一个用于webGL文件。

Answer 2

在此看似无关的教程中找到了解决方案：https://github.com/Microsoft/TypeScript-React-Conversion-Guide

我需要更新entry的{{1}}部分，就像这样：

webpack.config.js

名称entry: { 'main': './ClientApp/boot.tsx', 'webGL': './ClientApp/webGL.ts' }, resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] }, output: { path: path.join(__dirname, bundleOutputDir), filename: '[name].js', publicPath: 'dist/' },是将赋予编译后的TS文件的名称，然后根据webGL部分中列出的规则进行馈送和处理。

可以通过以下方式在HTML标记中根据需要进行引用：

output

在我的项目中，打字稿文件在哪里以及如何成为JS文件？

2 个答案:

在您的项目中