javascript - 简单的演示项目 Webpack KO(带有组件) javascript

我想用 javascript knockout 组件构建一个 SPA 经过大量阅读和摆弄之后，我似乎仍然无法使用 webpack 获得一个可用的 javascript(无 typescript ) knockout (带组件)项目。我找到了一些简单的 knockout 项目，但无法让它们与 webpack 一起使用。

有人有一个演示项目，其中至少有一个使用 webpack 的 ko 组件吗？

Yeoman Generator-ko-spa(在 JavaScript 中)与 Webpack 一起使用会很棒。

谢谢

最佳答案

以下是从头开始设置“Hello world”应用程序的方法:

安装软件包

创建一个新文件夹
运行npm init -y
安装webpack相关模块:
- npm install --save-dev webpack webpack-cli html-loader
要在编辑器中进行智能感知，请安装 Knockout
- npm install --save-dev Knockout
在脚本部分创建一个 npm 命令:
- "scripts": { "build": "webpack"}

配置 webpack

创建一个 webpack.config.js 文件:

const path = require("path");

module.exports = {
  entry: path.resolve(__dirname, "index.js"),
  module: {
    rules: [
      // This tells webpack to import required html files
      // as a string, through the html-loader
      { test: /\.html$/, use: [ "html-loader" ] }
    ],
  },
  // You *could* include knockout in your bundle, 
  // but I usually get it from a CDN
  externals: {
    knockout: "ko"
  }
}

创建组件 View 模型和 View

创建一个名为Components的文件夹
创建Greeter.html

<h1 data-bind="text: message">...</h1>

创建Greeter.js

const greeterTemplate = require("./Greeter.html");

module.exports = {
  viewModel: function(params) {
    this.message = params.message;
  },
  template: greeterTemplate
};

创建我们的入口点

创建一个index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
  <body>
    <greeter params="message: 'Hello world!'"></greeter>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    <script src="dist/main.js"></script>
  </body>
</html>

创建 index.js 文件

const ko = require("knockout");
const greeter = require("./Components/Greeter");

ko.components.register("greeter", greeter);
ko.applyBindings({});

构建和浏览器

运行npm run build，webpack将在dist文件夹中创建一个文件
在浏览器中打开index.html。它应该用“Hello world”向您打招呼!

关于javascript - 简单的演示项目 Webpack KO(带有组件) javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52775744/