Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
419 views
in Technique[技术] by (71.8m points)

webpack打包时ts-loader报错unexpected token ...,以及如何包含不相关的多个文件?

最开始cross-env报这个错,改了版本以后,不报了,又修复了一些其他报错。
然后就到了现在这样子,ts-loader又报这个三个点了。


这个报错解决了,不报这个错了。原因是项目内没有装npm i typescript
现在又报了个新的错:

> [email protected] build E:vscodeLibTest
> cross-env NODE_ENV=production webpack --config ./LibTest/webpack.config.js

clean-webpack-plugin: pausing due to webpack errors
Hash: 7dee7871b8ae1f535251
Version: webpack 4.44.1
Time: 1101ms
Built at: 2020-09-16 14:35:00
 2 assets
Entrypoint my-ts = myTest.js myTest.js.map
[0] ./LibTest/src/index.ts 2.51 KiB {0} [not cacheable] [built] [failed] [1 error]

ERROR in ./LibTest/src/index.ts
Module build failed (from ./node_modules/tslint-loader/index.js):
TypeError: Iterator value undefined is not an entry object
    at new Map (native)
    at ts (E:vscodeLibTest
ode_modulesypescriptlibypescript.js:8716:25)
    at Object.<anonymous> (E:vscodeLibTest
ode_modulesypescriptlibypescript.js:10864:3)
    at Module._compile (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:161:20)
    at Object.<anonymous> (E:vscodeLibTest
ode_modulesslintlibutils.js:22:10)
    at Module._compile (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:161:20)
    at Object.<anonymous> (E:vscodeLibTest
ode_modulesslintlib
uleLoader.js:24:15)
    at Module._compile (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:161:20)
    at Object.<anonymous> (E:vscodeLibTest
ode_modulesslintlibconfiguration.js:27:20)
    at Module._compile (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:161:20)
    at Object.<anonymous> (E:vscodeLibTest
ode_modulesslintlibindex.js:21:21)
    at Module._compile (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:194:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `cross-env NODE_ENV=production webpack --config ./LibTest/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:UsersAdministratorAppDataRoaming
pm-cache\_logs2020-09-16T06_35_00_808Z-debug.log


src/global/Global.ts
src/util/Util.ts
src/index.ts

Global.ts

export module GlobalModule

{

 export var traceE = function(msg:String):void

 {

 console.log(msg);

 }

}

Util.ts

export class MainTest

{

 constructor()

 {

 }

 public static getColorText(text:String, color:number):string

 {

 return "<font?color='#" + color + ">" + text + "</font>";

 }

}

index.ts

//index.ts不知道怎么写才能包含上面两个文件

npm run build

报错

> [email protected] build E:vscodeLibTest
> cross-env NODE_ENV=production webpack --config ./LibTest/webpack.config.js

clean-webpack-plugin: pausing due to webpack errors
Hash: 1a3758584bd46a30c459
Version: webpack 4.44.1
Time: 895ms
Built at: 2020-09-16 10:46:13
 2 assets
Entrypoint my-ts = myTest.js myTest.js.map
[0] ./LibTest/src/index.ts 2.72 KiB {0} [not cacheable] [built] [failed] [1 error]

ERROR in ./LibTest/src/index.ts
Module build failed (from ./node_modules/ts-loader/index.js):
E:vscodeLibTest
ode_moduless-loader
ode_modulesmicromatchindex.js:44
    let isMatch = picomatch(String(patterns[i]), { ...options, onResult }, true);
                                                   ^^^

SyntaxError: Unexpected token ...
    at NativeCompileCache._moduleCompile (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:242:18)
    at Module._compile (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:186:36)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:161:20)
    at Object.<anonymous> (E:vscodeLibTest
ode_moduless-loaderdistutils.js:4:20)
    at Module._compile (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:161:20)
    at Object.<anonymous> (E:vscodeLibTest
ode_moduless-loaderdistafter-compile.js:6:17)
    at Module._compile (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:161:20)
    at Object.<anonymous> (E:vscodeLibTest
ode_moduless-loaderdistinstances.js:6:25)
    at Module._compile (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:161:20)
    at Object.<anonymous> (E:vscodeLibTest
ode_moduless-loaderdistindex.js:5:21)
    at Module._compile (E:vscodeLibTest
ode_modulesv8-compile-cachev8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `cross-env NODE_ENV=production webpack --config ./LibTest/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:UsersAdministratorAppDataRoaming
pm-cache\_logs2020-09-16T02_46_14_070Z-debug.log

.balelrc文件

{

 "presets":?[

 ["@babel/preset-env", "es2015", "stage-2"]

 ],

 "plugins":?[

 ["@babel/plugin-proposal-object-rest-spread"],

 ["@babel/plugin-transform-runtime",?{

 "corejs": false,

 "helpers": false,

 "regenerator": false,

 "useESModules": false

 }

 ]

 ],

 "comments": false

}

tsconfig.json

{

 "compileOnSave": false,

 "compilerOptions":?{

 "outDir": "./dist/",

 "sourceMap": true,

 "noImplicitAny": false,

 "noUnusedLocals": true,

 "noUnusedParameters": true,

 "declaration": true,

 "declarationDir": "./dist/types/",

 "declarationMap": true,

 "moduleResolution": "node",

 "module": "esnext",

 "target": "es5",

 "baseUrl": "./",

 "types":?[

 "node",

 "jest"

 ],

 "typeRoots":?[

 "./node_modules/@types"

 ],

 "lib":?[

 "dom",

 "es2015"

 ],

 "jsx": "react",

 "allowJs": false

 },

 "include":?[

 "src/**/*.ts"

 ],//?要打包的文件

 "exclude":?[

 "node_modules",

 "*.test.ts"

 ]

 }

webpack.config.js

const path = require('path');

const { CleanWebpackPlugin }?= require('clean-webpack-plugin');

//?the?path(s)?that?should?be?cleaned

let pathsToClean =?['dist'];

//?the?clean?options?to?use

let cleanOptions =?{

 //?Simulate?the?removal?of?files 

 //

 //?default:?false

 dry: true,

 //?Write?Logs?to?Console

 //?(Always?enabled?when?dry?is?true)

 //

 //?default:?false

 verbose: true,

 //?Automatically?remove?all?unused?webpack?assets?on?rebuild

 //

 //?default:?true

 cleanStaleWebpackAssets: false,

 //?Do?not?allow?removal?of?current?webpack?assets

 //

 //?default:?true

 protectWebpackAssets: false,

 //?**WARNING**

 //

 //?Notes?for?the?below?options:

 //

 //?They?are?unsafe...so?test?initially?with?dry:?true.

 //

 //?Relative?to?webpack's?output.path?directory.

 //?If?outside?of?webpack's?output.path?directory,

 //????use?full?path.?path.join(process.cwd(),?'build/**/*')

 //

 //?These?options?extend?del's?pattern?matching?API.

 //?See?https://github.com/sindresorhus/del#patterns

 //????for?pattern?matching?documentation

 //?Removes?files?once?prior?to?Webpack?compilation

 //???Not?included?in?rebuilds?(watch?mode)

 //

 //?Use?!negative?patterns?to?exclude?files

 //

 //?default:?['**/*']

 cleanOnceBeforeBuildPatterns: ['**/*', '!static-files*'],

 cleanOnceBeforeBuildPatterns: [], //?disables?cleanOnceBeforeBuildPatterns

 //?Removes?files?after?every?build?(including?watch?mode)?that?match?this?pattern.

 //?Used?for?files?that?are?not?created?directly?by?Webpack.

 //

 //?Use?!negative?patterns?to?exclude?files

 //

 //?default:?disabled

 cleanAfterEveryBuildPatterns: ['static*.*', '!static1.js'],

 //?Allow?clean?patterns?outside?of?process.cwd()

 //

 //?requires?dry?option?to?be?explicitly?set

 //

 //?default:?false

 dangerouslyAllowCleanPatternsOutsideProject: true,

 dry: true,

};

module.exports =?{

 resolve: {

 extensions: ['.js', '.ts', '.json'],

 },

 devtool: 'source-map',//?打包出的js文件是否生成map文件(方便浏览器调试)

 mode: 'production',

 entry: {

 'my-ts': './LibTest/src/index.ts',

 },

 output: {

 filename: 'myTest.js',//?生成的fiename需要与package.json中的main一致

 path: path.resolve(__dirname, 'dist'),

 libraryTarget: 'commonjs',

 },

 module: {

 rules: [

 {

 test: /.js$/, 

 exclude: /node_modules/, 

 loader: "babel-loader" 

 }?,

 {

 test: /.tsx?$/,

 use: [

 {

 loader: 'tslint-loader',

 options: {

 configFile: path.resolve(__dirname, './tslint.json'),

 },

 },

 ],

 exclude: /node_modules/,

 },

 {

 test: /.tsx?$/,

 use: [

 {

 loader: 'ts-loader',

 options: {

 //?指定特定的ts编译配置,为了区分脚本的ts配置

 configFile: path.resolve(__dirname, './tsconfig.json'),

 },

 },

 ],

 exclude: /node_modules/,

 },

 ],

 },

 plugins: [new CleanWebpackPlugin(cleanOptions)],

};

package.json

{

 "name": "mytest",

 "version": "1.0.0",

 "main": "index.js",

 "dependencies":?{

 "babel-

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

可能因为你配置了两个ts的loader.
你这样配置其中一个loader不会工作.
这两个loader应该是串行的,lint完了再交给ts-loader.

{
    test: /tsx?/,
    use: [
        'ts-loader',
        'tslint-loader'
    ]
}

ps.确实存在需要两个loader的情况.
比如svg的处理,某个文件夹下用url-loader当图片处理,另一个文件夹的用svg-sprite-loader处理.
这种情况就需要使用exclude/include条件错开两个loader的处理范围.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...