[英]Bundling Typescript in ASP.NET Core
我最近更新了一個 ASP.NET Core/React 項目以使用 TypeScript。 但是我注意到為了讓 TypeScript 編譯,我需要將導入放在文件的頂部。 當捆綁器合並這些文件時,導入不會被刪除,這導致import declarations may only appear at top level of a module
錯誤的import declarations may only appear at top level of a module
。 另一端出來的 jsx 除了導入之外還可以。 有沒有辦法讓默認打包器處理這些導入?
捆綁配置文件
[
{
"outputFileName": "wwwroot/js/vehicles.jsx",
"inputFiles":
[
"built/Components/General/VehiclePanel.jsx",
"built/Components/Vehicles/VehiclePage.jsx"
],
"minify":
{
"enabled": false,
"renameLocals": false
},
},
{
"outputFileName": "wwwroot/js/editVehicle.jsx",
"inputFiles":
[
"built/Components/General/Job.jsx",
"built/Components/General/History.jsx",
"built/Components/General/EditVehiclePanel.jsx",
"built/Components/Vehicles/EditVehiclePage.jsx"
],
"minify":
{
"enabled": false,
"renameLocals": false
},
},
{
"outputFileName": "wwwroot/js/editService.jsx",
"inputFiles":
[
"built/Components/General/Job.jsx",
"built/Components/General/History.jsx",
"built/Components/General/ServicePanel.jsx",
"built/Components/Services/ServicePage.jsx"
],
"minify":
{
"enabled": false,
"renameLocals": false
},
},
]
帶有導入語句的組件示例
// Name History.tsx
// Author: Redacted
// CreatedDate: 24/02/2020
// ModifiedDate: 29/02/2020
// Description: History panel
import { Component } from 'react';
import { IHistory } from "../../Interfaces/Interfaces";
interface HistoryProps {
history: IHistory;
}
export class History extends Component<HistoryProps> {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div className="box">
<div className="box-header with-border">
<h3 className="box-title">{this.props.history.title}</h3><div className="box-tools pull-right">{this.props.history.createdDateTime}</div>
</div>
<div className="box-body">
{this.props.history.description.split("\n").map(function (history, i) { return <p key={"h" + i}>{history}</p> })}
</div>
</div>
</div>
);
}
}
編輯:我剛剛注意到編譯的組件前面仍然有export
語句。 這讓我覺得這可能與我的打字稿的編譯方式有關。 我已經添加了我的 tsconfig.json 以防萬一。
配置文件
{
"compileOnSave": true,
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es2015",
"jsx": "preserve",
"lib": [ "es2015", "es2016", "dom" ],
"moduleResolution": "Node",
"noUnusedLocals": true,
"noUnusedParameters": true
},
"include": [
"./Scripts/Components/**/*"
],
"exclude": [
"./Scripts/Interfaces/*"
]
}
第二次編輯:在 tsconfig.json 中將"module": "none"
到compilerOptions
后,導入和導出語句被刪除。 不幸的是,這消除了我之前所做的更改的影響。 我在compilerOptions
設置了"moduleResolution": "Node"
來解決這個被添加到所有文件頂部的問題。
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
我解決了將其添加到每個文件頂部的問題。
Object.defineProperty(exports, "__esModule", { value: true });
我不得不將導出移動到文件的頂部。
我從這里改變了它
import * as React from 'react';
import { IVehicle } from "../../Interfaces/Interfaces";
export class VehiclePanel extends React.Component<IVehicle> {
constructor(props) {
super(props);
}
對此
export = VehiclePanel;
import * as React from 'react';
import { IVehicle } from "../../Interfaces/Interfaces";
class VehiclePanel extends React.Component<IVehicle> {
constructor(props) {
super(props);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.