When I was practicing the Reactivity module with TS today, I wanted to run the test with Nodemon, and found a big problem

One. Wrong solution

1. Tsconfig. Json configuration

{
    "compilerOptions": {
        "module": "esnext"."target": "es2016"."sourceMap": false."outDir": "./dist",},"exclude": [
        "node_modules"."**/node_modules/*"]},Copy the code

2. Package. Json configuration

{
  "name": "reactivity demo"."version": "1.0.0"."license": "MIT"."scripts": {
    "dev": "nodemon --watch src/**/* -e ts --exec ts-node ./src/index"
  },
  "devDependencies": {
    "nodemon": "^ 2.0.15"."ts-node": "^ 10.4.0"."typescript": "^ 4.5.4." "}}Copy the code

3. Import the TS file

import { effect, stop, reactive } from "./reactivity/index";

const state = reactive({
    name: 'asd'
})

const runner = effect(() = > {
    console.log(state.name)
}, {
    lazy: true
})

runner()

Copy the code

Problem a

The following error was reported when I executed YARN dev

Solution: This solution is already shown in the figure, which is to add “moduleResolution”: “node” to tsconfig.json

Question 2

Continuing with YARN dev, the following error appears to be a problem with import

Package. json: add “type”: “module” to package.

Question 3

Continue to execute yarn dev, the following error is reported

Solution: Node –loader ts-node/esm Nodemon –watch SRC /**/* -e ts –exec node –loader TS-node /esm./ SRC /index.ts

Problem four

The file cannot be found because there is no suffix. Then I add the suffix. Ts

Solution: we recommend using the.js suffix, and then need to use the.js suffix for all imported files

It started successfully.

Continue to execute yarn dev, there is no problem

conclusion

Although the problem was solved, the way to solve it could be said to be very rough, especially the last step I could not accept

Second, the right solution

You just need to change tsconfig.json and it will work perfectly

{
    "compilerOptions": {
        "module": "CommonJS".// old: "module": "esnext"
        "target": "es2016"."sourceMap": false."outDir": "./dist"."types": [ "node"]./ / new
    },
    "exclude": [
        "node_modules"."**/node_modules/*"]},Copy the code