项目结构
hello-world-imba
+ dist
- index.html
+ src
+ backend
- server.imba
+ frontend
- client.imba
- package.json
- webpack.config.js
包.json
{
"name": "hello-world-imba",
"version": "1.0.0",
"description": "Hello World for Imba",
"scripts": {
"start": "imba src/backend/server.imba",
"build": "webpack"
},
"keywords": [
"imba"
],
"author": "Jignesh Gohel",
"license": "ISC",
"dependencies": {
"express": "^4.16.4",
"imba": "^1.4.1",
"webpack": "^4.29.0"
},
"devDependencies": {
"webpack-cli": "^3.2.1"
}
}
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: {
app: path.resolve(__dirname, 'src/frontend/client.imba')
},
module: {
rules: [
{
use: 'imba/loader',
// Skip any files outside of project's following
// directories:
// `src/frontend`
include: [
path.resolve(__dirname, 'src/frontend')
],
// Only run `.imba` files through Imba Loader
test: /.imba$/
}
]
},
resolve: {
extensions: [".imba",".js", ".json"]
},
output: {
filename: "client.js",
path: path.resolve(__dirname, 'dist')
}
}
源代码/后端/server.imba
var express = require 'express'
var server = express()
server.use(express.static('./dist'))
var port = process:env.PORT or 8080
var server = server.listen(port) do
console.log 'server is running on port ' + port
源代码/前端/client.imba
tag App
def render
<self>
<p> "Hello World"
Imba.mount <App>
分布/索引.html
<!doctype html>
<html class="no-js" lang="">
<head>
<title>Hello World</title>
<meta charset="utf-8">
</head>
<body>
<script src="client.js"></script>
</body>
</html>
使用该代码运行时出现npm run build以下错误：
$ npm run build
> [email protected] build /jwork/imba/hello-world-imba
> webpack
Hash: 0a9b1aaa377161766be2
Version: webpack 4.29.0
Time: 121ms
Built at: 01/25/2019 7:22:15 PM
Asset Size Chunks Chunk Names
client.js 4.63 KiB app [emitted] app
Entrypoint app = client.js
[./src/frontend/client.imba] 220 bytes {app} [built]
+ 1 hidden module
ERROR in ./node_modules/imba/imba.imba 1:25
Module parse failed: Unexpected token (1:25)
You may need an appropriate loader to handle this file type.
> module.exports = require "./src/imba/index.imba"
@ ./src/frontend/client.imba 1:11-26
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/jignesh/.npm/_logs/2019-01-25T13_52_15_689Z-debug.log
详细日志
$ cat /home/jignesh/.npm/_logs/2019-01-25T13_52_15_689Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: <PATHS HERE>
9 verbose lifecycle [email protected]~build: CWD: /jwork/imba/hello-world-imba
10 silly lifecycle [email protected]~build: Args: [ '-c', 'webpack' ]
11 silly lifecycle [email protected]~build: Returned: code: 2 signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: `webpack`
13 verbose stack Exit status 2
13 verbose stack at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:182:13)
13 verbose stack at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:182:13)
13 verbose stack at maybeClose (internal/child_process.js:962:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
14 verbose pkgid [email protected]
15 verbose cwd /jwork/imba/hello-world-imba
16 verbose Linux 3.13.0-135-generic
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "build"
18 verbose node v10.14.0
19 verbose npm v6.7.0
20 error code ELIFECYCLE
21 error errno 2
22 error [email protected] build: `webpack`
22 error Exit status 2
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]
在做了一些试验和错误之后，我发现罪魁祸首是下面的部分 module.rules
include: [
path.resolve(__dirname, 'src/frontend')
],
删除它npm run build成功生成包并使用npm run start我可以访问应用程序运行服务器。
任何人都可以帮助我了解问题所在以及如何解决？假设它适用于entry.app选项，则指定的路径看起来是正确的。条件的 webpack 文档说
{包括：条件}：条件必须匹配。约定是在此处提供字符串或字符串数组，但并未强制执行。
但它并没有以清晰的方式向我传达任何有意义的信息。请注意，我是基于 Node 的开发的新手，所以如果我的问题听起来很傻，请多多包涵。
这里的问题是通过添加
include: [
path.resolve(__dirname, 'src/frontend')
],
在加载程序的配置中，您指示它仅在该目录下的文件上工作。我明白，这是有道理的，因为您只在那里编写代码，因此这似乎是正确的决定。
虽然正如你看到的 webpack 抱怨./node_modules/imba/imba.imba它不知道如何读取这个文件。这是有道理的，因为它需要使用加载器，但我们明确表示imba/loader应该只关心src/frontendnot下的文件node_modules。
我想，即使你没有直接import这个imba library项目中的它正被装载添加为一个依赖于你的项目。
总而言之，您只需输入配置
rules: [
{
use: 'imba/loader',
test: /.imba$/
}
]
这样，每个具有.imba后缀的文件都将通过此加载程序，无论此文件位于何处。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句