Question

项目结构

hello-world-imba
  + dist
     - index.html

  + src
     + backend
         - server.imba
     + frontend
         - client.imba

  - package.json       
  - webpack.config.js

package.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')
    }
}

src / backend / 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

src / frontend / client.imba

tag App

    def render
        <self>
            <p> "Hello World"

Imba.mount <App>

dist / index.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

> hello-world-imba@1.0.0 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! hello-world-imba@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the hello-world-imba@1.0.0 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 npm@6.7.0
3 info using node@v10.14.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle hello-world-imba@1.0.0~prebuild: hello-world-imba@1.0.0
6 info lifecycle hello-world-imba@1.0.0~build: hello-world-imba@1.0.0
7 verbose lifecycle hello-world-imba@1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle hello-world-imba@1.0.0~build: PATH: <PATHS HERE>
9 verbose lifecycle hello-world-imba@1.0.0~build: CWD: /jwork/imba/hello-world-imba
10 silly lifecycle hello-world-imba@1.0.0~build: Args: [ '-c', 'webpack' ]
11 silly lifecycle hello-world-imba@1.0.0~build: Returned: code: 2  signal: null
12 info lifecycle hello-world-imba@1.0.0~build: Failed to exec build script
13 verbose stack Error: hello-world-imba@1.0.0 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 hello-world-imba@1.0.0
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 hello-world-imba@1.0.0 build: `webpack`
22 error Exit status 2
23 error Failed at the hello-world-imba@1.0.0 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选项，则指定的路径看起来正确。 Condition的webpack文档说

{包括：条件}：条件必须匹配。惯例是在此处提供一个字符串或字符串数组，但未强制执行。

但是它并没有以清晰的方式向我传达任何有意义的信息。请注意，我是基于Node的开发的新手，所以请耐心等待我提出的要求听起来很愚蠢。

Answer 1

这里的问题是通过添加

include: [
  path.resolve(__dirname, 'src/frontend')
],

在加载程序的配置中，

指示它仅对该目录下的文件起作用。我了解，这是有道理的，因为您仅在此处编写代码，因此这似乎是正确的决定。

尽管您看到webpack抱怨./node_modules/imba/imba.imba，但它不知道如何读取此文件。这是有道理的，因为它需要使用加载程序，但是我们明确地说过imba/loader应该只关心src/frontend下的文件，而不关心node_modules。

我想，即使您没有在项目中直接import将此imba library装入程序，加载程序也会将它作为对项目的依赖项添加。

最后，您只需输入配置

rules: [
            {
                use: 'imba/loader',
                test: /.imba$/
            }
]

这样，无论该文件位于何处，每个后缀为.imba的文件都将通过此加载器。

Webpack 4加载程序规则包含条件不起作用

1 个答案: