-1
我是webpack新手。 我想綁定我的項目，這是寫在打字稿，但目的地文件具有相同的打字稿，這是瀏覽器不可讀的代碼，所以我的配置下面的混亂步驟是什麼？ 該項目在html中使用腳本標記正常工作，但我需要將它們作爲捆綁包，然後製作縮小文件。如何將打字稿與webpack捆綁在一起？
的package.json
{
"name": "filemanager",
"version": "1.0.0",
"description": "controls files using http for web hosting that has no FTP protocol.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"ts-loader": "^2.1.0",
"typescript": "^2.3.4",
"webpack": "^1.15.0"
}
}
tsconfig.json
{
"compilerOptions": {
"sourceMap": true
},
"files": [
"./ts/app.ts"
]
}
wepback.config.js
var path = require('path');
var webpack = require('webpack');
module.exports={
devtool: "source-map",
entry: './ts/app.ts',
output:{
path: './build',
filename: 'app.bundle.js'
},
rules:[{
test: /\.tsx?$/,
include: path.resolve(__dirname, "ts/"),
loader: "ts-loader",
exclude: /node_modules/,
}],
resolve:{
extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"]
},
// watch: true
}
我的應用程序路徑I小號./ts/app.ts
import { controler } from './control'; // error stop here "Uncaught SyntaxError: Unexpected token import"
import { Injector } from './Injector';
window.onload =()=>{
var DI = new Injector;
DI.process(controler);
}
Injector.ts
export class Injector{
private dependencies = {};
process(target){
let mainFun = null,
// tmpFun =()=>{},
// FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m,
// FN_ARG_SPLIT = /,/,
// FN_ARG = /^\s*(_?)(\S+?)\1\s*$/,
// STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg,
// text = target[2].toString(),
// args = text.match(FN_ARGS)[1].replace(/\s/g, '').split(',');
args = [];
for(let key in target){
if(typeof target[key] != 'function'){
args.push(target[key]);
}else{
mainFun = target[key];
break;
}
}
// console.log(args, mainFun);
// tmpFun.prototype = mainFun.prototype;
// var instance = new tmpFun();
// console.log(tmpFun.prototype);
mainFun.prototype.constructor.apply(mainFun.prototype, this.getDependencies(args));
// return instance;
}
getDependencies(arr){
return arr.map((value)=>{
return this.dependencies[value];
});
}
register(name, dependency){
this.dependencies[name] = new dependency;
}
};
control.ts
declare var $: any;
declare var Promise: any;
export let controler = ['IMModel','IMView',class IMControl{
private im_model : any;
private im_view : any;
private wh : number; // save document height;
private ww : number; // save document width;
private siteMap = $('.aside');
private nextContainer : any; // store the next container for the new directories
public loadedPaths = []; // used to store all directories in aside menu to save repated requests
public loadedFiles = []; // used to store all files to save repated requests
private currentPath = null // used to store current path for upload new files in a specific directory
private currentItem = null // used to store current item to be ready with any selection choices
private searchResult = [];
private pathNavigator = $('.navbar .path');
private filesList = $('.explorer .filesList');
private isUploading : boolean = false;
private isAJAXFinished : boolean = true; // This is used to hold any action till response come back.
private newRequestReady : boolean = true; // This is used to check if the are more files to be loaded from the server otherwise it will be false.
private items = [];
private itemsIterations = 0;
private page = 1;
private defaultPath : any = [{
type: 'folder',
name: 'Root',
path: './img',
ext: 'folder',
chuldren: null
}];
private filesTypeMap = { 'avi' :'<i class="fa fa-file-video-o" aria-hidden="true"></i>',
'php' :'<i class="fa fa-file-code-o" aria-hidden="true"></i>',
'mkv' : '<i class="fa fa-video-camera" aria-hidden="true"></i>',
'mp4' : '<i class="fa fa-video-camera" aria-hidden="true"></i>',
'folder' : '<i class="fa fa-folder" aria-hidden="true"></i>',
'default' : '<i class="fa fa-file" aria-hidden="true"></i>' };
constructor(IMModel, IMView){
this.im_model = IMModel;
this.im_view = IMView;
this.onInit();
}
// rest of the code
}];
對於其他讀者以備將來參考，它是有用的（並且比鏈接更可靠）來總結解決問題的要點。 –
感謝@KoertvanKleef提示。我更新重播。 –