简单的演示项目 Webpack KO(带组件)javascript [英] Simple demo project Webpack KO(with a components) javascript
问题描述
我想用 JavaScript 淘汰组件构建一个 SPA经过大量阅读和摆弄后，我似乎仍然无法使用 webpack 获得一个有效的 javascript(无打字稿)淘汰赛(带组件)项目.我找到了一些简单的淘汰项目，但无法让它们与 webpack 一起工作.
I want to build a SPA with javascript knockout components After lots of reading and fiddling I still can't seem to get a working javascript(no typescript) knockout( with components) project with webpack. I found simple knockout projects but can't get them working with webpack.
有人有一个演示项目，至少有一个使用 webpack 的 ko 组件吗?
Does someone have a demo project wit at least one ko component using webpack?
与 Webpack 一起使用的 Yeoman generator-ko-spa(在 javascript 中)会很棒.
The Yeoman generator-ko-spa (in javascript) working with Webpack would be great.
谢谢
推荐答案
以下是从头开始设置Hello world"应用程序的方法:
Here's how to set up a "Hello world" app from scratch:
- 新建文件夹
- 运行
npm init -y - 安装 webpack 相关模块:
npm install --save-dev webpack webpack-cli html-loader
npm install --save-dev 淘汰赛
"scripts": { "build": "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({});构建&浏览器
- run
npm run build，webpack 会在dist文件夹中创建一个文件 - 在浏览器中打开
index.html.它应该用Hello world"来迎接你！ - run
npm run build, webpack will create a file in adistfolder - Open
index.htmlin your browser. It should greet you with a "Hello world"!
Build & browser
这篇关于简单的演示项目 Webpack KO(带组件)javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
