वेबपैक 4 लोडर नियम में काम नहीं करने की स्थिति शामिल है

Question 1

परियोजना संरचना

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 विकल्प के लिए काम करता है। शर्त के लिए वेबपैक दस्तावेज़ीकरण कहता है

{शामिल करें: शर्त}: शर्त का मिलान होना चाहिए। सम्मेलन यहां एक स्ट्रिंग या स्ट्रिंग की सरणी प्रदान करना है, लेकिन इसे लागू नहीं किया गया है।

लेकिन यह मुझे स्पष्ट रूप से कुछ भी अर्थपूर्ण नहीं बताता है। कृपया देखें कि मैं नोड-आधारित विकास के लिए नौसिखिया हूं इसलिए कृपया मेरे साथ सहन करें यदि मैंने जो पूछा है वह मूर्खतापूर्ण लगता है।

webpack

0

Jignesh Gohel 25 जिंदा 2019, 22:08

Answer

यहाँ मुद्दा यह है कि जोड़कर

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 प्रत्यय है, इस लोडर से होकर गुजरेगी, चाहे यह फ़ाइल कहीं भी स्थित हो।

1

Alex Michailidis 28 जिंदा 2019, 14:05

Question 2