Jak uruchomić aplikację w ES6?

Witam. Ostatnio przerabiam uczenie maszynowe według Buraka Kanbera i jestem na pierwszy rozdziale.

Chciałem przygotować środowisko i uruchomić program "Witaj świecie"

ale po wpisaniu do CMD yarn build-cli, mam błąd

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

W folderze głównym mam package.json

{
  "name": "R01-Cw1",
  "version": "1.0.0",
  "description": "sss",
  "main": "dist/index.js",
  "license": "MIT",
  "scripts": {
    "build-web": "browserify src/index.js -o dist/index.js -t [ babelify --presets [env ]]",
    "build-cli": "browserify src/index.js --node -o dist/index.js -t [ babelify --presets [env ]]",
    "start": "yarn build-cli && node dist/index.js"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babelify": "^10.0.0",
    "browserify": "^17.0.0"
  },

    "parser": "babel-eslint",
    "parserOptions": {
      "sourceType": "module",
      "allowImportExportEverywhere": true
    },

    "plugins": ["react"],
    "rules": {
      "react/prop-types": 0
    }
 
}

a w folderze src/ dwa pliki: greeting i index.js

const greeting = name => 'Witaj,' + name + '!';
export default greeting;

import greeting from './greeting';
console.log(greeting(process.argv[2] || 'świecie'));

Tak jak @Riddle wspomniał na dole - chodzi o moduły ES6, których wydaje się, że Browserify nie łapie (bo to błąd z Browserify?)

Niby masz jakieś opcje parsera (i błąd sugeruje, że Browserify ma zdolność czytania takich plików, a przynajmniej parser, z którego korzysta), ale tak jakby nie łapało ci tego:

"parserOptions": {
  "sourceType": "module",
  "allowImportExportEverywhere": true
},

Ew. w sumie Browserify może nawet niekoniecznie musi wiedzieć o modułach z ES6, bo od tego jest Babel. Możliwe, że źle konfigurujesz/integrujesz wtyczkę Babelify.

Ale... jest jakiś szczególny powód, dla którego używasz staruśkiego Browserify (widzę nawet, że nieuaktualnie - ostatni apdejt był 3 lata temu https://www.npmjs.com/package/browserify ) zamiast jakichś nowocześniejszych narzędzi? (Np. ja polecam Esbuild, chociaż najpopularniejszy jest Webpack).

W każdym razie instalujesz Esbuilda, masz to od ręki https://esbuild.github.io/getting-started/

Modularyzacja ze składnią import/export to jest funkcjonalność dodana w ES6, nazywana często "modules" lub "module".

Aktualnie nie ma to jeszcze pełnego wsparcie, ale jakieś istnieje, więc masz dwie opcje:

• Wspierać tylko te środowiska w których moduły są już rozpoznawane, czyli aktualnie nie wszystkie: i wtedy wystarczy że zmienisz "type" na "module" albo odpalisz aplikację w przeglądarce z type="module"
• Albo możesz wspierać wszystkie środowiska, np poprzez transpilację nowej składni do tej bardziej kompatybilnej, używając:
  • webpack
  • vite
  • sam babel

Riddle o które "type" CI chodzi?

I jak poradziłeś sobie?

Jak Riddler napisał, jak dodasz do package.json, po między klamry "type":"module" to teraz robisz w konsoli node src/index.js dupo to powinno wypisać ci na ekran Witaj dupo!.

Jak zrobiłeś tak jak LukeJL czyli zaorałeś i użyłeś esbuild, to chyba najlepszy pomysł po prostu użyć normalnych narzędzi budowania, zrobić nowy projekt itp.

Możesz też próbować naprawić to co już masz wtedy zrób yarm install esmify czy npm i potem wyedytuj "build-cli": "browserify -p esmify src/index.js --node -o dist/index.js -t [ babelify --presets [env ]]", po prostu dopisz tam -p esmify i to też powinno zadziałać, ewentualnie jakieś samo "browserify -p esmify src/index.js -o dist/index.js

Ewentualnie mógłbyś zamienić export default na module.exports = i potem zamiast import użyć require()

node src/index.js nie może znaleźć modułu

w tym package.json masz namieszane, opcje z eslinta są "globalnie", a powinny być owrapowane w eslintConfig

błąd też jest z eslinta