我正在尝试构建我自己的 angular2/webpack2 样板 这是我的设置
const webpack = require('webpack');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const helpers = require('./helpers');
const METADATA = {
title: 'Angular2 Webpack2 Starter by Whisher',
baseUrl: '/',
isDevServer: helpers.isWebpackDevServer()
};
module.exports = {
devtool: 'cheap-module-source-map',
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'main': './src/main.ts'
},
resolve: {
extensions: ['.ts', '.js', '.json']
},
module: {
rules: [
{
test: /\.ts$/,
loaders: [
'@angularclass/hmr-loader',
'awesome-typescript-loader',
'angular2-template-loader',
'angular-router-loader'
],
exclude: [/\.(spec|e2e)\.ts$/]
},
{
test: …我收到Invalid module name in augmentation来自 webpack 的错误，用于*.d.ts包含在我的项目中的几个库文件。
一个例子来自leaflet-draw，它在d.ts文件的顶部有以下模块声明：
import * as L from 'leaflet';
declare module 'leaflet' {
interface MapOptions {
drawControl?: boolean;
}
完整的错误是：
扩充中的模块名称无效。模块 'leaflet' 解析为位于 'C:\Users***\Documents\GitHub***\node_modules\leaflet\dist\leaflet-src.js' 的无类型模块，无法扩充。
我不完全确定该怎么做，我不想修改 d.ts 文件本身，因为这些文件是在外部维护的。
我正在使用最新版本的 webpack (3.11.0) 和 ts-loader (3.5.0)。
我的 tsconfig 编译器选项如下：
"compilerOptions": {
"target": "es5",
"sourceMap": true,
"outDir": "./dist",
"rootDir": "../",
"noImplicitAny": false,
"noImplicitThis": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"pretty": true,
"removeComments": false,
"allowUnreachableCode": false,
"declaration": false,
"allowJs": true,
"module": "commonJs",
"typeRoots" : ["./typings/index.d.ts", "../../node_modules/@types"] …我遇到了捆绑 TS 项目的问题。ts-loader 似乎无法识别 TypeScript 语法。
我收到的错误：
ERROR in ./src/common/components/chat/chatComponent.tsx
Module parse failed: The keyword 'interface' is reserved (10:0)
You may need an appropriate loader to handle this file type.
| import { ChatItemComponent, ChatMessageItem, isMessage, Props as Item } from "./chatItem";
|
| interface Props {
| className?: string;
| fullHistoryFetched?: boolean;
和
ERROR in ./src/common/closer.tsx
Module parse failed: Unexpected token (10:13)
You may need an appropriate loader to handle this file type.
| import * as chatItem from …涉及的软件:
Webpack配置:
rules: [
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: ['ng-annotate-loader', 'ts-loader']
},
...
]
这可以在单个构建(webpack --mode development)上编译我的项目.
但是,在手表模式下构建时会出现错误:
$ webpack --progress --watch --mode development
Webpack is watching the files…
Hash: e8f3fc158b2b6feaad07
Version: webpack 4.8.3
Time: 75713ms
Built at: 05/15/2018 3:25:27 PM
Asset Size Chunks Chunk Names
...
(构建很好.现在我更改了一个文件,并重建:)
[./ts/foo/foo.ts] 3.82 KiB {foo} [built] [1 error]
[./ts/foo/controllers/bar.ts] 3.8 KiB {baz} {foo} [built]
[./ts/foo/baz.ts] 4.21 KiB {baz} [built] [1 error] …我有一个项目恰好是 vs 代码扩展，但我认为这不太相关。
我有以下结构：
./package.json
./tsconfig.json --> references [ ./client, ./server, ./interfaces]
./client
package.json
tsconfig.json
webpack.config.js
./server
package.json
tsconfig.json
webpack.config.js
./interfaces
package.json
tsconfig.json
客户端和服务器都从接口项目导入，它只包含一些由两者共享的类型、接口、枚举、命名空间等。对于它的价值，我不介意的WebPack复制到两个client.js和server.js捆绑这一点，但我不希望复制/粘贴两者的代码。
当我运行我的 webpack 时，无论我从interfaces. 我应该注意到，正常通过tsc -b工程完美地构建。
TS2769：没有与此调用匹配的重载。重载 1 of 3, '(type: RequestType0<{}, unknown, unknown>, handler: RequestHandler0<{}, unknown>): void'，出现以下错误。“RequestType”类型的参数不可分配给“RequestType0<{}, unknown, unknown>”类型的参数。属性“_”的类型不兼容。输入 '[MyType, MyOtherType, void, void, _EM] | undefined' 不能分配给类型 '[{}, unknown, unknown, _EM] | 不明确的'。类型“[MyType, MyOtherType, void, void, _EM]”不能分配给类型“[{}, unknown, unknown, _EM]”。属性“3”的类型不兼容。“void”类型不能分配给“_EM”类型。重载 2 of 3, '(type: RequestType, handler: RequestHandler): void'，出现以下错误。“RequestType”类型的参数不可分配给“RequestType”类型的参数。类型具有私有属性“_method”的单独声明。重载 3 of …
我的 ts-loader 有一个奇怪的行为：从 node_modules 导入 *.json 文件时，声明文件在以下子文件夹中生成dist/但我希望它们直接在该 dist/文件夹中。
我有以下项目结构：
\nProject/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src/ \n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components/\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 PhoneNumberInput/\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 utils.ts\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 webpack.config.js\n运行时webpack（使用ts-loader）我期望以下输出文件夹结构：
Project/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dist/ \n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components/\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 PhoneNumberInput/\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 utils.d.ts\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n情况就是这样，直到我开始node_modules/在我的应用程序中导入 .json （来自 ）文件utils.ts：
Project/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src/ \n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components/\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 PhoneNumberInput/\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x82 …我正在Mac OS X 10.11.3上使用webpack构建一个包含静态HTML和其他资产的Web应用程序。该应用程序与另一台服务器上的API通讯。
我在使用webpack构建应用程序时遇到问题。构建过程似乎挂在ts-loader执行过程中或周围。我正在运行这样的构建：
npm run go --loglevel verbose
从我的package.json中执行以下命令：
./node_modules/.bin/webpack-dev-server --display-reasons --display-chunks --watch
终端窗口中的输出以结尾
ts-loader: Using typescript@1.7.5 and /Users/mn/Documents/source/J/appstore/store-front/app/ts/tsconfig.json
我尝试删除node_modules文件夹并重新安装它们；我尝试卸载webpack并重新安装；我已经尝试将webpack.config.js还原为我知道可以使用的版本；但它只是挂在这里！
我的webpack.config.js看起来像这样：
var webpack = require('webpack'),
ReloadPlugin = require('webpack-reload-plugin'),
path = require('path'),
ChunkManifestPlugin = require('chunk-manifest-webpack-plugin'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
WebpackNotifierPlugin = require('webpack-notifier'),
ExtractTextPlugin = require("extract-text-webpack-plugin");
/**
* optimist has been depracted. Find an alternative? minimist?
*/
var argv = require('optimist')
.alias('r', 'release').default('r', false)
.argv;
/**
* Useful variables
*/
var cwd = process.cwd();
var DEBUG = !argv.release;
var isDevServer = …我有2个tsconfigs,一个用于我的开发构建,一个用于我的prod构建.
我选择带有-p标志的tsconfig :
tsc -p dev.tsconfig.json
Ts-loader正在寻找一个tsconfig.json文件.如何使用ts-loader指定另一个文件名？
module.exports = {
entry : __dirname + "/src/app/main.ts",
output : {
path : __dirname + "/dist",
filename : "bundle.js"
},
resolve : {
extensions : ["", ".webpack.js", ".web.js", ".js", ".ts"]
},
module: {
loaders: [
{ test: /\.ts?$/, loader: "ts" }
]
}
};
我的webpack配置中有以下规则：
{
test: /(\.tsx?)$/,
use: [{
loader: 'thread-loader'
},
{
loader: 'ts-loader',
options: {
transpileOnly: true,
appendTsSuffixTo: [/\.vue$/]
}
}]
}
结果是：
ERROR in ./plugins/axios.ts
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 9)
Cannot read property 'errors' of undefined
当我删除线程加载器时，它工作正常。
我有一个简单的自定义 Webpack 加载器，它从.txt文件生成 TypeScript 代码：
txt-loader.js
module.exports = function TxtLoader(txt) {
console.log(`TxtLoader invoked on ${this.resourcePath} with content ${JSON.stringify(txt)}`)
if (txt.indexOf('Hello') < 0) {
throw new Error(`No "Hello" found`)
}
return `export const TEXT: string = ${JSON.stringify(txt)}`
}
在现实生活中，我会对输入进行一些解析；在此示例中，我们假设文件必须包含Hello有效的文本。
该加载程序允许我导入文本文件，如下所示：
索引.ts
import { TEXT } from './hello.txt'
console.log(TEXT)
一切都很好，除了一件事：（webpack watch及其表弟webpack serve）。第一个编译很好：
$ /tmp/webpack-loader-repro/node_modules/.bin/webpack watch
TxtLoader invoked on /tmp/webpack-loader-repro/hello.txt with content "Hello world!\n"
asset main.js 250 bytes [compared for emit] [minimized] (name: main)
./index.ts …