Question

我需要在我的应用程序中使用外部脚本文件。我在vendor.ts文件中添加了该脚本，如下所示

import '../src/app/forms/form-signature/SigWebTablet.js';

我的webpack配置文件看起来像

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: ['.ts', '.js']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'awesome-typescript-loader'
                    },
                    {
                        loader: 'angular2-template-loader'
                    }
                ]
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader'
                    }
                ]
            },
            {
                test: /\.json$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].json'
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                use: [
                    {
                        loader: 'file-loader?name=assets/[name].[ext]',
                    }
                ]
            },
            {
                test: /\.css$/,
                use: ['style-loader','css-loader'],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'raw-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    },


    plugins: [
           new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
             /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),

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

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

        /* http://stackoverflow.com/a/38825995/184509 */
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
};

当我尝试从该脚本调用函数时，我得到了一个引用错误。但是，当我将该脚本放在index.html页面时，它可以正常工作。

import './SigWebTablet.js';

declare let [ SetTabletState]: any;

..........

    export class FormSignatureComponent implements OnInit {
    ngOnInit() {
            let canvas = <HTMLCanvasElement>document.getElementById("mycanvas");
            this.ctx = canvas.getContext("2d");
            SetTabletState(0, this.tmr);        
    }
}

我不知道如何解决这个问题。我想将外部js文件保存在vendor.ts文件中。我还在浏览器控制台中检查了vendor.js捆绑文件，发现该功能在那里。但不知何故，脚本文件未被引用。我的问题是，当我在vendor.ts中添加脚本而不是在index.html中添加脚本时，为什么没有引用它试图找出我犯错误的地方。

Answer 1

这是我能想到的：

您应该能够导入js文件，例如example.js，如下所示：

import * as importedExample from './example'

在ts编译器中，我们有一个像--allowJs这样的标志，它可以实现这种导入。你需要检查awesome-typescript-loader。

关于它是如何工作的，当你包含在html中时：因为你的js文件有效地绕过了typescript编译器。您直接在html中调用该文件并使用其功能。

详细了解here和here。

引用错误：函数未定义.Webpack

1 个答案: