Rx javascript: Difference between revisions
Jump to navigation
Jump to search
| Line 35: | Line 35: | ||
* Provide how Webpack should resolve modules | * Provide how Webpack should resolve modules | ||
<syntaxhighlight lang="json"> | <syntaxhighlight lang="json"> | ||
module.exports = { | |||
entry: "./main", | |||
output: {filename: "app.js"}, | |||
module: { | |||
rules: [ | |||
{ | |||
test: /.ts$/, | |||
use: "ts-loader", | |||
exclude: "/node_modules", | |||
} | |||
] | |||
}, | |||
resolve: { | |||
extensions: [ | |||
".ts", | |||
".js" | |||
], | |||
} | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
And the main.ts | And the main.ts | ||
| Line 52: | Line 71: | ||
</html> | </html> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
==Scripts Configuration== | ==Scripts Configuration== | ||
In the package.json we can not set our scripts for npm | In the package.json we can not set our scripts for npm | ||
Revision as of 03:26, 2 September 2020
Introduction
Packages
The course used the following tools
"dependencies": {
"rxjs": "^6.6.2"
},
"devDependencies": {
"ts-loader": "^8.0.3",
"typescript": "^4.0.2",
"typings": "^2.1.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
Typescript Configuration
I used the following tsconfig.json.
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true
}
}
Webpack Configuration
Specify
- the entry point
- the output file
- add script tag to index.html
- Provide module loaders, which consists of a test and which loader to use
- Provide how Webpack should resolve modules
module.exports = {
entry: "./main",
output: {filename: "app.js"},
module: {
rules: [
{
test: /.ts$/,
use: "ts-loader",
exclude: "/node_modules",
}
]
},
resolve: {
extensions: [
".ts",
".js"
],
}
}
And the main.ts
alert("ok")
And in the Index.html
<html>
<head>
<title>RxJs</title>
</head>
<body>
<div>hello</div>
<script src="app.js"></script>
</body>
</html>
Scripts Configuration
In the package.json we can not set our scripts for npm
"scripts": {
"start": "webpack-dev-server --watch --inline",
"postinstall": "typings install"
}