I'm trying to create an application using TypeScript2+Webpack3 that uses an external library (module), and I'm going to talk about a certain library A
This phenomenon has occurred, and I'm worried because I don't know how to solve it.
I'm sorry to trouble you, but if anyone knows how to solve this problem, could you please let me know?
私 My guess is that we should probably tell Webpack the location of @types, but
I don't know how to do this.
Typescript 2.6.1
Webpack 3.8.1
npm 5.5.1
Open source files on Visual Studio Code with no specific error
Verify library (jQuery) input completion also works
import* as $from "jquery";
function test() {
return$('#TEST').text();
}
{
"name": "webpacktest1",
"version": "1.0.0",
"description":",
"main": "index.js",
"scripts": {
"test": "echo\" Error: no test specified\"&exit1"
},
"author":",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"@types/jquery": "^2",
"awesome-typescript-loader": "^3.3.0",
"typescript": "^2.6.1"
}
}
module.exports={
entry: "./src/index.ts",
output: {
filename: "bundle.js",
path —__dirname+"/dist"
},
resolve: {
// Add '.ts' to resolvable extension
extensions: [ ".ts", ".js", ".json" ]
},
module: {
loaders:
// Handle all files in '.ts' with 'awesome-typescript-loader'
{ test://\.ts$/, loader: "awesome-typescript-loader"}
]
}
};
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny"—true,
"module": "commonjs",
"target": "es5"
},
"include": [
"./src/**/*"
]
}
$webpack -- verbose
[at-loader] Using typescript @2.6.1 from typescript and "tsconfig.json" from C:\work\webpacktest1/tsconfig.json.
[at-loader] Checking started in a separate process...
[at-loader] Ok, 0.073 sec.
Hash: ba68d05679d08d7b9f26
Version—webpack 3.8.1
Time: 1626ms
Asset Size Chunk Names
bundle.js 2.79kB0 [emitted] main
Entrypoint main=bundle.js
chunk {0} bundle.js(main) 160 bytes [entry] [rendered]
>main[0]./src/index.ts
[0] ./src/index.ts160 bytes {0} [depth0] [build]
ERROR in./src/index.ts
Module not found: Error: Can't resolve 'jquery' in 'C:\work\webpacktest1\src'
resolve 'jquery' in 'C:\work\webpacktest1\src'
Parsed request is a module
using description file: C:\work\webpacktest1\package.json (relative path:./src)
Field'browser' does not contain a valid alias configuration
after using description file: C:\work\webpacktest1\package.json (relative path:./src)
resolve as module
C:\work\webpacktest1\src\node_modules doesn't exist or is not a directory
C:\work\node_modules doesn't exist or is not a directory
C:\node_modules does not exist is not a directory
looking for modules in C:\work\webpacktest1\node_modules
using description file: C:\work\webpacktest1\package.json (relative path:./node_modules)
Field'browser' does not contain a valid alias configuration
after using description file: C:\work\webpacktest1\package.json (relative path:./node_modules)
using description file: C:\work\webpacktest1\package.json (relative path:./node_modules/jquery)
no extension
Field'browser' does not contain a valid alias configuration
C:\work\webpacktest1\node_modules\jquery doesn't exist
.ts
Field'browser' does not contain a valid alias configuration
C:\work\webpacktest1\node_modules\jquery.ts doesn't exist
.js
Field'browser' does not contain a valid alias configuration
C:\work\webpacktest1\node_modules\jquery.js doesn't exist
.json
Field'browser' does not contain a valid alias configuration
C:\work\webpacktest1\node_modules\jquery.json doesn't exist
as directory
C:\work\webpacktest1\node_modules\jquery doesn't exist
C:\work\webpacktest1\src\node_modules
C:\work\node_modules
C:\node_modules
C:\work\webpacktest1\node_modules\jquery
[C:\work\webpacktest1\node_modules\jquery.ts]
[C:\work\webpacktest1\node_modules\jquery.js]
[C:\work\webpacktest1\node_modules\jquery.json]
C:\work\webpacktest1\node_modules\jquery
@ ./src/index.ts3—8-25
Sorry, I may have solved myself.
I noticed that adding externals to webpack.config.js seems to work properly.(In this case, jQuery will be used as the external library, so jQuery will be added to external.)
Sorry for the trouble.
module.exports={
// (omitted)
externals: {
"jquery": "jQuery"
},
};
If you feel that this is not the right solution, I would appreciate it if you could give me additional comments and answers.
© 2024 OneMinuteCode. All rights reserved.