Правило загрузчика Webpack 4 включает условие не работает - PullRequest
0 голосов
/ 25 января 2019

Структура проекта

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 / бэкенд / 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>

расстояние / 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. В документации веб-пакета для условия написано

{include: Condition}: Условие должно совпадать. Конвенция заключается в укажите здесь строку или массив строк, но она не применяется.

но это не дает мне ничего значимого в ясной форме. Пожалуйста, обратите внимание, что я новичок в разработке на основе Node, поэтому, пожалуйста, потерпите меня, если то, что я спросил, звучит глупо.

1 Ответ

0 голосов
/ 28 января 2019

Проблема в том, что, добавив

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

в конфигурации загрузчика вы указываете работать только с файлами в этом каталоге. Я понимаю, это имеет смысл, так как вы пишете код только там, поэтому это кажется правильным решением.

Хотя, как вы видите, веб-пакет жалуется на ./node_modules/imba/imba.imba, что он не знает, как читать этот файл. Это имеет смысл, поскольку необходимо использовать загрузчик, но мы явно сказали, что imba/loader должен заботиться только о файлах в src/frontend, а не node_modules.

Полагаю, даже если вы прямо не import это imba library в своем проекте, он добавляется загрузчиком как зависимость к вашему проекту.

Чтобы заключить, вы просто должны указать в своей конфигурации

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

Таким образом, каждый файл с суффиксом .imba будет проходить через этот загрузчик, независимо от того, где находится этот файл.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...