简单的演示项目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.
Thnx
推荐答案
以下是从头开始设置"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
- Create a new folder
- Run
npm init -y - Install webpack related modules:
npm install --save-dev webpack webpack-cli html-loader
-
npm install --save-dev knockout
-
"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 - Create a folder named
Components - Create
Greeter.html
Creating our component viewmodel & view
<h1 data-bind="text: message">...</h1>- 创建
Greeter.js - Create
Greeter.js
const greeterTemplate = require("./Greeter.html"); module.exports = { viewModel: function(params) { this.message = params.message; }, template: greeterTemplate };创建我们的入口点
- 创建一个
index.html - Create an
index.html
Creating our entry points
<!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文件 - Create an
index.jsfile
const ko = require("knockout"); const greeter = require("./Components/Greeter"); ko.components.register("greeter", greeter); ko.applyBindings({});Build&浏览器
- 运行
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屋！
-
