簡單的演示項目Webpack KO（帶有組件）javascript

Question

我想用javascript敲除組件構建SPA經過大量的閱讀和擺弄之后，我似乎仍然無法通過webpack獲得有效的javascript（無打字稿）敲除（與組件）項目。 我找到了簡單的淘汰項目，但無法使它們與webpack一起使用。

有人使用Webpack擁有至少一個ko組件的演示項目嗎？

使用Webpack的Yeoman generator-ko-spa（使用JavaScript）會很棒。

日Thnx

Answer 1

從頭開始設置“ Hello world”應用的方法如下：

安裝套件

新建一個文件夾
運行npm init -y
安裝與webpack相關的模塊：
- npm install --save-dev webpack webpack-cli html-loader
對於您編輯器中的intellisense，請安裝剔除
- 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”打招呼！

簡單的演示項目Webpack KO（帶有組件）javascript

問題描述

1 個解決方案

解決方案1
3 已采納 2018-10-12 09:52:27

安裝套件

配置Webpack

創建我們的組件視圖模型和視圖

創建我們的入口點

構建和瀏覽器

簡單的演示項目Webpack KO（帶有組件）javascript

問題描述

1 個解決方案

解決方案1 3 已采納 2018-10-12 09:52:27

安裝套件

配置Webpack

創建我們的組件視圖模型和視圖

創建我們的入口點

構建和瀏覽器

解決方案1
3 已采納 2018-10-12 09:52:27