Javascript 从TypeScript进行客户端动态导入_Javascript_Typescript_Webpack_Dynamic_Import

Javascript 从TypeScript进行客户端动态导入

javascript typescript webpack dynamic import

Javascript 从TypeScript进行客户端动态导入,javascript,typescript,webpack,dynamic,import,Javascript,Typescript,Webpack,Dynamic,Import,我试图创建一个客户端页面，从JavaScript文件中读取配置设置。我将它内置在JavaScript中并动态添加脚本，但我正在转换为TypeScript，并尝试使用动态导入语句。它使用开发服务器（webpack和webpack dev服务器）进行传输并运行良好，但我希望在没有服务器的本地文件系统上运行它。我似乎无法找到一个组合的设置，使其工作，假设它甚至可以。有人能帮忙吗我希望创建的最终结构是： index.html index.js config --userConfig.js --vehi

我试图创建一个客户端页面，从JavaScript文件中读取配置设置。我将它内置在JavaScript中并动态添加脚本，但我正在转换为TypeScript，并尝试使用动态导入语句。它使用开发服务器（webpack和webpack dev服务器）进行传输并运行良好，但我希望在没有服务器的本地文件系统上运行它。我似乎无法找到一个组合的设置，使其工作，假设它甚至可以。有人能帮忙吗

我希望创建的最终结构是：

index.html
index.js
config
--userConfig.js
--vehicles
  --Sonata.js
  --Civic.js

在这里，我可以将新车描述添加到vehicles文件夹中，然后通过更改userConfig.js中的设置来更改要使用的描述

// config/userConfig.js
/** 
 * @typedef {object} userObj
 * @param {string} vehicle
 */

/** @type {userObj} */
export var userCfg = {
 vehicle: "Civic"

在source config文件夹中，我还有：

// config/vehicles/carConfig.ts
export class carObject {
    make: string;
    model: string;
    maxRPM: number;
}

html和index.ts文件如下所示

<!DOCTYPE html>
<html>
    <head>
        <script src="bundle.js"></script>
    </head>
    <body>
        <div id="app">Web App Placeholder</div>
    </body>
</html>

最后，tsconfig.json和webpack.config.js是：

{
    "compilerOptions": {
        "target": "ES2018",
        "outDir": "./dist",
        "rootDir": "./src",
        "module": "commonjs",
        "allowJs": true
    },
    "exclude": [ 
        "./webpack.config.js",
        "./dist"
    ]
}

将userConfig.js中的车辆属性更改为其他车辆（假设存在相应的.js文件）将更改加载的属性

有没有一个好方法可以让这个在没有服务器的情况下在客户端工作？感谢

动态导入是JavaScript的一项功能。理解，但TypeScript可转换为JavaScript。我想用TypeScript编写它，一旦传输，它最终将成为JavaScript。“客户端从JavaScript动态导入”不仅是一个适用的主题，而且是同一个主题。这就是我要暗示的。不管怎样，如果你不想捆绑这个文件，你必须提供它。我正在寻找一种方法来捆绑除config文件夹中的文件以外的所有文件。我想我会坚持使用addscript方法来获得所需的行为。谢谢你的反馈。你可以做到的。我现在还不知道配置，但我保证可以制作网页包来排除这些文件。动态导入是一个JavaScript功能。理解，但TypeScript可以转换为JavaScript。我想用TypeScript编写它，一旦传输，它最终将成为JavaScript。“客户端从JavaScript动态导入”不仅是一个适用的主题，而且是同一个主题。这就是我要暗示的。不管怎样，如果你不想捆绑这个文件，你必须提供它。我正在寻找一种方法来捆绑除config文件夹中的文件以外的所有文件。我想我会坚持使用addscript方法来获得所需的行为。谢谢你的反馈。你可以做到的。我不知道配置的手，但我保证网页可以排除这些文件

// index.ts
import { userCfg } from  "./config/userConfig"
import * as carConfig from "./config/vehicles/carConfig"

var car: carConfig.carObject = new carConfig.carObject;

function showCar() {
    document.getElementById("app").innerHTML = 
        `${car.make} ${car.model} - ${car.maxRPM}`;
}

window.onload = function () {
    loadCarConfig(userCfg.vehicle).then(showCar);
}

async function loadCarConfig(path: string) {
    let v = await import(`./config/vehicles/${path}.js`);
    car = v.car;
}

{
    "compilerOptions": {
        "target": "ES2018",
        "outDir": "./dist",
        "rootDir": "./src",
        "module": "commonjs",
        "allowJs": true
    },
    "exclude": [ 
        "./webpack.config.js",
        "./dist"
    ]
}

// @ts-ignore

module.exports = {
    mode: "development",
    entry: "./src/index.ts",
    output: { filename: "bundle.js" },
    resolve: { extensions: [".ts", ".js" ]},
    module: {
        rules: [
            { test: /\.ts/, use: "ts-loader", exclude: /node-modules/ }
        ]
    },
    devServer: {
        contentBase: "./assets",
        port: 4500
    }
};