简单的演示项目 Webpack KO（带组件）javascript
Simple demo project Webpack KO(with a components) javascript
我想用 javascript 敲除组件构建 SPA
经过大量的阅读和摆弄之后，我似乎仍然无法使用 webpack 获得一个有效的 javascript(no typescript) knockout(with components) 项目。
我找到了简单的淘汰赛项目，但无法让它们与 webpack 一起工作。
有人有至少一个 ko 组件使用 webpack 的演示项目吗？
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"
}
}
创建我们的组件视图模型和视图
- 创建一个名为
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 敲除组件构建 SPA 经过大量的阅读和摆弄之后，我似乎仍然无法使用 webpack 获得一个有效的 javascript(no typescript) knockout(with components) 项目。 我找到了简单的淘汰赛项目，但无法让它们与 webpack 一起工作。
有人有至少一个 ko 组件使用 webpack 的演示项目吗？
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"
}
}
创建我们的组件视图模型和视图
- 创建一个名为
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"! 来问候你