logo标签列表

如何使用typescript和webpack创建单页Web应用程序？

javascriptnode.jstypescriptnpmwebpack
3

我一直在使用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文件更改时重新加载我的应用程序。

非常感谢您提供的帮助或有关我的应用程序结构的一般建议。

1个回答
5

当前的设置中，Webpack没有处理你的 .html 和 .css 文件，所以它也不会监视这些文件的变化。你可以让 Webpack 使用 css-loader 和 style-loader 来处理 .css 文件，而不是在 .html 文件中添加 link 标签来引用 .css 文件。

首先，你需要安装 css-loader 和 style-loader。例如：

npm i -D css-loader style-loader

css-loader负责处理CSS文件，style-loader负责将它们注入到DOM中。使用这种方法时，输出的bundle.js(在您的示例中)将包含被转译的JavaScript和CSS，其中CSS本身被包裹在JavaScript和DOM操作中。

接下来，您需要在webpack.config.js中添加一条规则：

{
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
}

这个规则放置在 rules 数组中，与您现有的 ts-loader 规则并列，它指示Webpack首先使用css-loader然后使用style-loader处理 .css文件。

最后，您可以将一个导入添加到您的index.ts文件中：

import './style.css';

这就是Webpack启动处理和监视你的.css文件所需的全部内容。如果需要处理额外的文件，可以像上面那样添加更多的import语句。
至于.html文件，这里有一个很好的答案（链接）可以帮助你。SurviveJS网站（链接）上也有一个关于样式的教程/在线书籍，涵盖了几乎所有你可能需要的内容。该书还介绍了如何构建应用程序以进行生产，可以将CSS内容提取到单独的文件中。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接