我是webpack的新手。 我想捆绑我的项目，这是用打字稿写的，但目标文件有相同的打字稿代码，浏览器无法读取，所以我的配置中的混乱步骤是什么？ 该项目在html中使用脚本标签工作正常但我需要将它们作为包并在此之后制作缩小文件。
的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
}
我的应用路径是 ./ 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
}];
答案 0 :(得分：0)
我没有ts-loader的任何经验，因此我不知道它是否有任何好处，我使用awesome-typescript-loader来通过webpack转换我的打字稿代码。所以第一步是通过npm i -D awesome-typescript-loader安装它，然后像这样修改你的webpack配置文件
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/"),
use: "awesome-typescript-loader", // Change here
exclude: /node_modules/,
}],
resolve:{
extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"]
},
// watch: true
}
答案 1 :(得分：-2)
我在一项重大研究后解决了我的问题。有关任何额外信息，您可以看到我制作的webpack模板。
这解决了我的问题
<强>的package.json
// point in rect collision detection
function pointInRect (x, y, rect) {
return inRange(x, rect.x, rect.x + gridsize) &&
inRange(y, rect.y, rect.y + gridsize);
}
// check a value is in range or not
function inRange (value, min, max) {
return value >= Math.min(min, max) && value <= Math.max(min, max);
}
// checking player is hitting the wall or not
if(pointInRect(player.x,player.y,walls[i].x,walls[i].y))
{
console.log('collision')
}
<强> webpack.js
{
"name": "ProjectName",
"version": "1.0.0",
"description": "Description",
"main": "index.js",
"scripts": {
"clean": "rimraf ./dist/*",
"prod": "cross-env NODE_ENV=production webpack -p --progress",
"dev": "cross-env NODE_ENV=production webpack -d --progress --watch",
"serve": "webpack-dev-server",
"mini": "npm-run-all clean prod",
"build": "npm-run-all clean dev"
},
"repository": {
"type": "git",
"url": ""
},
"author": "Me",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"devDependencies": {
"cross-env": "^5.0.1",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.28.0",
"image-webpack-loader": "^3.3.1",
"node-sass": "^4.5.3",
"npm-run-all": "^4.0.2",
"rimraf": "^2.6.1",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"svg-inline-loader": "^0.8.0",
"ts-loader": "^2.1.0",
"typescript": "^2.3.4",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
}
}
这是对模板的引用。