使用来自typescript的javascript，使用webpack捆绑。运行时错误

Question

我有一个死简单的JavaScript函数：

function alphanum(a, b) { 
    function chunkify(t) { 
    var tz = [], x = 0, y = -1, n = 0, i, j; 

    while (i = (j = t.charAt(x++)).charCodeAt(0)) { 
     var m = (i == 46 || (i >=48 && i <= 57)); 
     if (m !== n) { 
     tz[++y] = ""; 
     n = m; 
     } 
     tz[y] += j; 
    } 
    return tz; 
    } 

    var aa = chunkify(a); 
    var bb = chunkify(b); 

    for (x = 0; aa[x] && bb[x]; x++) { 
    if (aa[x] !== bb[x]) { 
     var c = Number(aa[x]), d = Number(bb[x]); 
     if (c == aa[x] && d == bb[x]) { 
     return c - d; 
     } else return (aa[x] > bb[x]) ? 1 : -1; 
    } 
    } 
    return aa.length - bb.length; 
} 

这是alphanum.js。

我想在打字稿文件中使用它。所以我做了以下几点：

declare function alphanum(param1: any, param2: any): number; 
require("./../utils/alphanum.js"); 

我正在使用webpack将所有东西捆绑在一起。这看起来很好，没有错误，没有问题。

当我尝试使用功能我在客户端上的错误：

EXCEPTION: ReferenceError: alphanum is not defined 

我觉得我失去了一些东西真的很明显。我在做任何与webpack有关的错误，并要求？

编辑：

这里是我的WebPack配置：

webpack.common.js：

var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var helpers = require('./helpers'); 

module.exports = { 
    entry: { 
    'polyfills': './src/polyfills.ts', 
    'vendor': './src/vendor.ts', 
    'app': './src/main.ts' 
    }, 

    resolve: { 
    extensions: ['', '.js', '.ts'], 
    root: [ 
     helpers.root('./src'), 
     helpers.root('node_modules') 
    ], 
    alias: { 
     // bind version of jquery-ui 
     "jquery.ui.core": "jqueryui/jquery-ui.min.js",  
     "jquery.ui.widget": "jqueryui/jquery-ui.min.js" 
    } 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.ts$/, 
     loaders: ['ts', 'angular2-template-loader'] 
     }, 
     { 
     test: /\.html$/, 
     loader: 'html' 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
     loader: 'file?name=assets/[name].[hash].[ext]' 
     }, 
     { 
     test: /\.css$/, 
     exclude: helpers.root('src', 'app'), 
     loader: ExtractTextPlugin.extract('style', 'css?sourceMap') 
     }, 
     { 
     test: /\.css$/, 
     include: helpers.root('src', 'app'), 
     loader: 'raw' 
     } 
    ] 
    }, 

    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: ['app', 'vendor', 'polyfills'] 
    }), 

    new HtmlWebpackPlugin({ 
     template: 'src/index.html' 
    }), 

    new webpack.ProvidePlugin({ 
     jQuery: 'jquery', 
     $: 'jquery', 
     jquery: 'jquery', 
     "window.jQuery":"jquery"}) 
    ] 
}; 

webpack.dev.js：

var webpackMerge = require('webpack-merge'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var commonConfig = require('./webpack.common.js'); 
var helpers = require('./helpers'); 

module.exports = webpackMerge(commonConfig, { 
    devtool: 'source-map', 
    debug: true, 

    output: { 
    path: helpers.root('dist'), 
    publicPath: 'http://localhost:8080/', 
    filename: '[name].js', 
    chunkFilename: '[id].chunk.js' 
    }, 

    plugins: [ 
    new ExtractTextPlugin('[name].css') 
    ], 

    devServer: { 
    historyApiFallback: true, 
    stats: 'minimal' 
    } 
}); 

tsconfig.json：

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors":true, 
    "outDir": "dist" 
    }, 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ] 
} 

这是一个Angular2应用程序，有没有什么帮助，配置的WebPack从来到大多：https://angular.io/docs/ts/latest/guide/webpack.html

Answer 1

ReferenceError: alphanum is not defined

默认使用的WebPack每个文件是考虑模块。您正在使用它作为global。

修复

如果你还希望它的全球，你会：

function alphanum(a, b) { 
    function chunkify(t) { 
    var tz = [], x = 0, y = -1, n = 0, i, j; 

    while (i = (j = t.charAt(x++)).charCodeAt(0)) { 
     var m = (i == 46 || (i >=48 && i <= 57)); 
     if (m !== n) { 
     tz[++y] = ""; 
     n = m; 
     } 
     tz[y] += j; 
    } 
    return tz; 
    } 

    var aa = chunkify(a); 
    var bb = chunkify(b); 

    for (x = 0; aa[x] && bb[x]; x++) { 
    if (aa[x] !== bb[x]) { 
     var c = Number(aa[x]), d = Number(bb[x]); 
     if (c == aa[x] && d == bb[x]) { 
     return c - d; 
     } else return (aa[x] > bb[x]) ? 1 : -1; 
    } 
    } 
    return aa.length - bb.length; 
} 

// THIS IS WHERE THE MAGIC HAPPENS 
global.alphanum = alphanum; 

Answer 2

你缺少你的函数从alphanum.js这就是为什么它是不确定的出口。

export function alphanum(a, b) { 

从你的alphanum.js，它应该工作。