2

我想用 javascript 淘汰组件构建一个 SPA 经过大量阅读和摆弄后，我似乎仍然无法使用 webpack 获得一个有效的 javascript（无打字稿）淘汰（带组件）项目。我找到了简单的淘汰项目，但无法让它们与 webpack 一起使用。

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

与 Webpack 一起使用的 Yeoman generator-ko-spa（在 javascript 中）会很棒。

谢谢

4

1 回答 1

4

以下是如何从头开始设置“Hello world”应用程序：

安装包

  • 新建一个文件夹
  • 跑npm init -y
  • 安装 webpack 相关模块：
    • npm install --save-dev webpack webpack-cli html-loader
  • 对于编辑器中的智能感知，安装敲除
    • 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"
  }
}

创建我们的组件视图模型和视图

  • 创建一个名为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”来迎接你！
于 2018-10-12T09:52:27.910 回答