在Typescritp

时间:2017-12-13 15:00:35

标签: javascript jquery typescript webpack

我将我工作的公司的旧Javascript库转换为全新的Typescript库。我使用WebPack,因为我听说我需要一个模块管理系统才能使我的库在浏览器中运行。
问题是,每当我尝试启动我的库时(在JQuery函数$(document).ready()中,我无法访问我的对象原型,我得到了一个typeError:
Uncaught TypeError: Cannot read property 'loadPage' of undefined
这是我的代码:
webpack.config.js

const path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var webpack = require("webpack");
var fs = require("fs");
module.exports = {
entry: './src/libraryLoader.ts',
module: {
    rules: [
        {
            test: /\.(tsx?)$/,
            use: 'ts-loader',
            exclude: /node_modules/
        },
        {
            test: /\.json$/,
            use: {
                loader: "file-loader",
                options: {
                    name: "[name].[ext]",
                    publicPath: "config/"
                }
            },
            exclude: /node_modules/
        }
    ]
},
plugins: [
    new CopyWebpackPlugin([
        { from: 'src/settings/config', to: "config" }
    ]),
    new UglifyJsPlugin({
        uglifyOptions: {
            ie8: true,
            //compress: true
        }
    }),
    new webpack.BannerPlugin({
        banner: fs.readFileSync('./copyright', 'utf8'),
        raw: true
    })
],
resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
    modules: [
        "node_modules"
    ]
},
// Enable sourcemaps for debugging webpack's output.
devtool: "eval",
output: {
    filename: 'library.min.js',
    path: path.resolve(__dirname, 'dist'),

},
watch: false,
watchOptions: {
    ignored: /node_modules/
},
externals: {
    // require("jquery") is external and available
    //  on the global var jQuery
    "jquery": "jQuery"
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "moduleResolution": "node",
    "module": "commonjs",
    "outDir": "build",
    "strict": true,
    "noImplicitAny": true,
    "allowJs": true,
    "sourceMap": true,
    "typeRoots": [
      "./node_modules/@types"
    ],
    "project": "src",
    "lib": [ "es2015", "dom"]
  },
  "include": [
    "src/**/*",
    "typings/**/*"
  ]
}

我加载我的库:

$(document).ready(function () {
    let loader = new LibraryLoader();
    loader.library().loadPage(); // <- Error here
    /*...*/
});

My Loader课程

export class LibraryLoader{
    private _library: Library;

    public LibraryLoader() {
        this.setLibrary(new Library(/* ... unrelated options ... */));
    }

    public library(): Library{
        return this._library;
    }

    private setLibrary(value: Library) : void {
        this._library = value;
    }
}

P.S。库中有一个loadPage函数,但函数library()仍然返回undefined,

0 个答案:

没有答案