个人中心
gpt4 book ai didi

javascript - 如果不直接使用，导出的 TypeScript 类不会包含在 WebPack 包中

转载 作者：行者123 更新时间：2023-12-02 14:59:51 24 4
gpt4 key购买 nike

我正在将 Angular 1.x 的 javascript 项目转换为 WebPack 和 TypeScript(使用 ts-loader )。我基本上可以正常工作，但是当 ts-loader 似乎在不直接使用导出时从 bundle 中优化我的脚本时，我遇到了麻烦。

这是一个演示该问题的示例项目(npm install、webpack，然后加载 index.html 并观察控制台)。

https://github.com/bbottema/webpack-typescript

来自 ClassA 的日志记录正在显示，但 Angular 报告 ClassB 丢失(提供者)。如果你查看bundle.js，你会发现ClassB完全丢失了。不同的是ClassA导入后直接使用，而ClassB只是通过类型引用进行编译。

这是一个错误，还是有办法强制包含 ClassB？还是我做错了？ Angular 2 可能会解决这个问题，但目前这个步骤太大了。

上述项目中的相关脚本:

<小时/>

package.json

{
    "devDependencies": {
        "typescript": "^1.7.5",
        "ts-loader": "^0.8.1"
    },
    "dependencies": {
        "angular": "1.4.9"
    }
}

webpack.config.js

var path = require('path');

module.exports = {
    entry: {
        app: './src/entry.ts'
    },
    output: {
        filename: './dist/bundle.js'
    },
    resolve: {
        root: [
            path.resolve('./src/my_modules'),
            path.resolve('node_modules')
        ],
        extensions: ['', '.ts', '.js']
    },
    module: {
        loaders: [{
            test: /\.tsx?$/,
            loader: 'ts-loader'
        }]
    }
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  },
  "exclude": [
    "node_modules"
  ]
}

index.html

<!doctype html>
<html ng-app="myApp">
    <body>
        <script src="dist/bundle.js"></script>
    </body>
</html>

entry.js

declare var require: any;

'use strict';

import ClassA = require('ClassA');
import ClassB = require('ClassB');

var a:ClassA = new ClassA(); // direct use, this works

var angular = require('angular');

angular.module('myApp', []).
    // this compiles as it should, but in runtime the provider will not be packaged and angular will throw an error
    run(function(myProvider: ClassB) {
    }
);

A 类.ts

// this line will be logged just fine
console.log('ClassA.ts: if you see this, then ClassA.ts was packaged properly');

class ClassA {
}

export = ClassA;

B类.ts

declare var require: any;

// this line is never logged
console.log('ClassB.ts: if you see this, then ClassB.ts was packaged properly');

class ClassB {
}

var angular = require(angular);

angular.module('myApp').service(new ClassB());

export = ClassB;

最佳答案

Turns out you have to signal WebPack通过添加额外的 require 调用而不使用 import 语句来显式包含模块。

我还没有准备好通过添加重复导入来破坏我的 .ts 文件，因此我使用 preprocessor loader 为该问题制定了一个通用解决方案。 :

{
    "line": false,
    "file": true,
    "callbacks": {
    "fileName": "all",
    "scope": "line",
    "callback": "(function fixTs(line, fileName, lineNumber) { return line.replace(/^(import.*(require\\(.*?\\)))/g, '$2;$1'); })"
    }]
}

作为概念证明，此正则表达式版本非常有限，它仅支持以下格式:

import ClassA = require('ClassA');
// becomes
require('ClassA');import ClassA = require('ClassA');

但这对我有用。同样，我添加 require shim :

{
    "fileName": "all",
    "scope": "source",
    "callback": "(function fixTs(source, fileName) { return 'declare var require: any;' + source; })"
}

我做了一个sample project使用此解决方案。

关于javascript - 如果不直接使用，导出的 TypeScript 类不会包含在 WebPack 包中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35504680/

24 4 0
文章推荐： javascript - 如何将 JSON 转换为可用于绑定(bind)下拉列表中的值的数组？
文章推荐： javascript - 是否可以从远程文件更改 BootstrapDialog 标题和其他属性？
文章推荐： javascript - HTML/jQuery 显示和隐藏表格行
文章推荐： javascript - 在 Firefox 中使用 jQuery(用户脚本)添加表单链接
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com