我一直在使用Angular创建单页应用程序,现在我想创建一个单页应用程序,但不使用整个框架。
我希望只有一个.html文件和一个javascript文件,并且这个javascript文件将被编译成typescript文件,比如说index.ts
。在index.ts
中,我会从其他typescript文件中导入内容。
是否有类似于我想要实现的项目在线上,而且是否可能完全设置npm项目?
编辑:
一段时间后,我完成了以下内容:
我的项目结构:
├── bundle.js
├── functions.ts
├── index.html
├── index.ts
├── package.json
├── style.css
├── tsconfig.json
└── webpack.config.js
package.json
{
"name": "rxjs6-demo",
"version": "1.0.0",
"main": "index.ts",
"scripts": {
"start": "webpack-dev-server --open"
},
"devDependencies": {
"ts-loader": "^5.3.1",
"typescript": "^3.2.2",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {
"rxjs": "^6.4.0"
}
}
tsconfig.json
{
"compilerOptions": {
"outDir": ".",
"noImplicitAny": false,
"sourceMap": true,
"module": "es6",
"target": "es6",
"allowJs": true
},
"include": ["*.ts"],
"exclude": []
}
webpack.config.json
module.exports = {
entry: './index.ts',
output: {
filename: 'bundle.js'
},
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: '.'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
}
};
index.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
运行npm start
将启动webpack-dev-server,每当任何typescript文件更改时,它都会重新编译我的应用程序。在index.ts中,我可以从其他.ts文件中导入内容。但是我无法使webpack-dev-server在html或css文件更改时重新加载我的应用程序。
非常感谢您提供的帮助或有关我的应用程序结构的一般建议。