这个问题对很多人来说可能是微不足道和容易的,但我很难配置一切正常工作,想了解这是如何工作的。
我想在VS2015中创建一个客户端项目,但我想使用TypeScript和一些外部JavaScript库,如 Backbone 和牵线 puppet 。
我已经配置了大部分的东西,但是当运行页面时,我在控制台上看到一个错误,说'Marionette is not defined',这让我认为库(我以前使用NPM安装在项目上)没有被正确地复制到wwwroot。
我正在使用Webpack与加载程序来翻译我的TypeScript文件。
有人能引导我走上正确的道路吗?或者给我发一些文档?
"这是我的包裹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"
}
}
我的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"
};
}
我的tsconfig.json
{
"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
}
我的主目录.ts
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文件夹中看到一个警告,还有Marionette,它有语法错误,它没有定义,为什么?
请有人能给予我这方面的见解吗?我做错了什么?愿意学习如何正确地做!
1条答案
按热度按时间b91juud31#
使用Webpack.ProvidePlugin定义全局变量
还要去掉多个入口点,就像这样