从节点_模块（.Net Core proj和TypeScript）绑定/复制JavaScript库

对于很多人来说，这个问题可能很琐碎，也很简单，但我很难将所有东西都配置为正常工作，我想了解它是如何工作的

我想在VS2015中创建一个客户端项目，但是我想使用TypeScript和一些外部javascript库，比如主干和木偶

我已经配置了大部分内容，但在运行页面时，我在控制台上看到一个错误，说“未定义木偶”，这使我认为库（我以前使用NPM安装在项目上）没有正确复制到wwwroot

我正在使用带有加载程序的Webpack来传输我的打字脚本文件

有人能指引我走上正确的道路吗？或者给我发一些文件好吗

这是我的软件包。json

{
  "version": "1.0.0",
  "name": "yourappname",
  "private": true,
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "ts-loader": "^4.0.1",
    "typescript": "^2.7.2",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.11"
  },
  "scripts": {
    "webpack-script": "webpack"
  },
  "-vs-binding": {
    "BeforeBuild": [
      "webpack-script"
    ]
  },
  "dependencies": {
    "@types/backbone": "^1.3.42",
    "@types/backbone.marionette": "^3.3.2",
    "@types/jquery": "^3.3.1",
    "@types/underscore": "^1.8.8",
    "backbone": "^1.3.3",
    "backbone.marionette": "^3.5.1",
    "jquery": "^3.3.1",
    "underscore": "^1.8.3"
  }
}

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,

    "alwaysStrict": true,

    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],

    "allowJs": true,
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true
  },

  "include": [ "./Scripts/*" ],
  "compileOnSave": false
}

My webpack.config.js

"use strict"
{
    // Required to form a complete output path
    let path = require('path');

    // Plagin for cleaning up the output folder (bundle) before creating a new one
    const CleanWebpackPlugin = require('clean-webpack-plugin');

    // Path to the output folder
    const bundleFolder = "wwwroot/bundle/";

    module.exports = {
        // Application entry point
        entry: {
            app: ["./Scripts/main.ts"],
            underscore: ['underscore'], 
            jquery: ['jquery'], 
            backbone: ['backbone'], 
            backbonemarionette: ['backbone.marionette']
        },

        // Output file
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, bundleFolder)
        },
        module: {
            rules: [
              {
                  test: /\.tsx?$/,
                  loader: "ts-loader",
                  exclude: /node_modules/,
              },
            ]
        },
        resolve: {
            extensions: [".tsx", ".ts", ".js"]
        },
        plugins: [
            new CleanWebpackPlugin([bundleFolder])
        ],
        // Include the generation of debugging information within the output file
        // (Required for debugging client scripts)
        devtool: "inline-source-map"
    };
}

class MarionetteApp extends Marionette.Application {  //That's the thing not defined in chrome console 'Marionette'
    constructor() {
        super();
        this.on("start", this.initializeAfter);
    }
    initializeAfter() {
        console.log("i am here");
        alert("initialiseAfter called");
    }
}

My tsconfig.json

{
  "version": "1.0.0",
  "name": "yourappname",
  "private": true,
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "ts-loader": "^4.0.1",
    "typescript": "^2.7.2",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.11"
  },
  "scripts": {
    "webpack-script": "webpack"
  },
  "-vs-binding": {
    "BeforeBuild": [
      "webpack-script"
    ]
  },
  "dependencies": {
    "@types/backbone": "^1.3.42",
    "@types/backbone.marionette": "^3.3.2",
    "@types/jquery": "^3.3.1",
    "@types/underscore": "^1.8.8",
    "backbone": "^1.3.3",
    "backbone.marionette": "^3.5.1",
    "jquery": "^3.3.1",
    "underscore": "^1.8.3"
  }
}

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,

    "alwaysStrict": true,

    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],

    "allowJs": true,
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true
  },

  "include": [ "./Scripts/*" ],
  "compileOnSave": false
}

My main.ts

"use strict"
{
    // Required to form a complete output path
    let path = require('path');

    // Plagin for cleaning up the output folder (bundle) before creating a new one
    const CleanWebpackPlugin = require('clean-webpack-plugin');

    // Path to the output folder
    const bundleFolder = "wwwroot/bundle/";

    module.exports = {
        // Application entry point
        entry: {
            app: ["./Scripts/main.ts"],
            underscore: ['underscore'], 
            jquery: ['jquery'], 
            backbone: ['backbone'], 
            backbonemarionette: ['backbone.marionette']
        },

        // Output file
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, bundleFolder)
        },
        module: {
            rules: [
              {
                  test: /\.tsx?$/,
                  loader: "ts-loader",
                  exclude: /node_modules/,
              },
            ]
        },
        resolve: {
            extensions: [".tsx", ".ts", ".js"]
        },
        plugins: [
            new CleanWebpackPlugin([bundleFolder])
        ],
        // Include the generation of debugging information within the output file
        // (Required for debugging client scripts)
        devtool: "inline-source-map"
    };
}

class MarionetteApp extends Marionette.Application {  //That's the thing not defined in chrome console 'Marionette'
    constructor() {
        super();
        this.on("start", this.initializeAfter);
    }
    initializeAfter() {
        console.log("i am here");
        alert("initialiseAfter called");
    }
}

然而，从chrome控制台中，似乎存在一个文件，如您在此处所见：

我注意到的另一件事是，我在VS的Dependencies文件夹中看到一条警告，还有木偶，它有一个语法错误，没有定义，为什么？在这里：

有人能告诉我这方面的情况吗？我做错了什么？ 愿意学习如何正确地做

用于定义全局变量

 const Webpack = require('webpack');
//...
 plugins: [
    new CleanWebpackPlugin([bundleFolder]),
    new Webpack.ProvidePlugin({
          _: 'underscore',
          $: 'jquery',
          jQuery: 'jquery',
          Backbone: 'backbone',
          Bb: 'backbone',
          Marionette: 'backbone.marionette',
          Mn: 'backbone.marionette',
      }),

  ]

也要去掉多个入口点，就像这样

entry: "./Scripts/main.ts",

---

Webpack已将您的代码（main.ts）和依赖项（jQuery、木偶等）捆绑在一个文件中。请务必告诉我进展如何。我看到你正在网页配置中使用ts加载程序。这应该考虑到传输。将“main.ts”作为入口点，任何测试/消费代码都应该放在其中。要内联使用它，模块必须“导入”。这样的事情需要transpiler在html内联代码中运行。我还没有尝试过。仅供参考，还有其他方法可以减少捆绑包的大小。如果你对UgilfyJS之类的东西感兴趣的话，可以尝试一下。