Webpack无法在我的node.js项目中工作。 fsevents

Question

I'm currently trying to implement this tutorial:

https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

I'm supposed to install react and react-dom and also webpack + typescript + awesome-typescript-loader + source-map-loader , and that's what I did. I also installed webpack-cli accordingly to instructions that I got from the command line.

I installed all of them locally (the react and react-dom as PROD and the rest as DEV dependencies).Currently I don't have any packages installed globally.

After this, that's my package.json file:

{
  "name": "reactandwebpack-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "awesome-typescript-loader": "^5.2.0",
    "source-map-loader": "^0.2.3",
    "typescript": "^2.7.2",
    "webpack": "^4.16.4",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "@types/react": "^16.4.7",
    "@types/react-dom": "^16.0.6",
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  }
}

At this point, when I run npm ls I get a bunch of errors, because of some optional dependency of webpack that apparently is missing (all the errors in the tree are inside webpack and below fsevents as following):

webpack@4.16.4
(...)watchpack@1.6.0
     (...)chokidar@2.0.4
          (...)fsevents@1.2.4 -> UNMET OPTIONAL DEPENDENCY
               And everything below fsevents is also marked with UNMET DEPENDENCY

And when I run webpack command, I get a "webpack not recognized error".

Anyone can help? I've been trying to wrap my head around this for a while.

PS:

Npm -v 5.6.0
Node -v 8.11.3 //(that's what I get from the terminal, 
               //VSCode "About" tells me something different, I don't know why).

Using Visual Code

Version 1.24.0
Date 2018-06-06T17:35:40.560Z
Shell 1.7.12
Renderer 58.0.3029.110
Node 7.9.0
Architecture x64

Answer 1

SOLVED

Not sure the reason but it had something to do with the ./bin folder with the webpack-cli "ambient variable" not being available (I don't know it that would be the most accurate description).

When I try to run webpack , I get "not recognized error".

But when I run nodemodules\\.bin\\webpack-cli it works normally.

Everything is installed locally.

I can also run it with options, like nodemodules\\.bin\\webpack-cli --help

Answer 2

The reason is because it was not linked to your env. When you install something globally, you have access to it everywhere, hence it works just by doing webpack . Since you installed everything locally, the binaries are located inside node_modules/.bin .

You have two options when you install something locallly.

1. Use npm scripts (npm run build, watch... whatever).
2. ./node_modules/.bin/moduleName --flags

It is easier to create a npm script and add all the commands there.

Answer 3

If you run "webpack", The CLI will find global webpack with is installed by (npm install webpack -g). To use webpack from local project. you should it to npm script.

package.json

{
    "script": {
        "start": "webpack"
    }
}

By doing this, you can run npm start to run webpack.