Parcel build error

I am following the basic tutorial for Parcel to bundle js, css and image files. My file structure dist node_modules src - index.html - style.css - index.js - somemodule.js ...

I am following the basic tutorial for Parcel to bundle js, css and image files.

My file structure

  dist
  node_modules
  src
    - index.html
    - style.css
    - index.js
    - somemodule.js

When I run parcel ./src/index.html a server is started and the website is displayed correctly. According to the tutorial you can finalize the build using parcel build index.js. I expected to get this output:

  dist
    - style.css
    - index.js
    - index.html

But instead, after running parcel build index.js I get this output:

  dist
    - 4wyd98y98790.css
    - 948y59hslas8.js

What could possibly be going wrong?

Josh Unger's user avatar

Josh Unger

6,4695 gold badges33 silver badges55 bronze badges

asked Dec 19, 2017 at 23:07

Kokodoko's user avatar

The Parcel Bundler output directory is dist by default, but you can specify an output directory by setting option (-d).

e.g.parcel build src/index.html -d build --public-url . You will get the final static files in the build directory.

answered Dec 20, 2017 at 15:41

Masonz's user avatar

2

The tutorial may say parcel build index.js, but you should run parcel build ./src/index.html. The entry point of your app is index.html.

answered Jan 4, 2018 at 14:53

c-neves's user avatar

c-nevesc-neves

611 silver badge3 bronze badges

Since some commands seem to change over time, I’m going to share here the set up that worked for me up to date.

 "scripts": {
    "start": "parcel src/index.html -p 3000 --open",
    "build:parcel": "parcel build ./src/index.html --public-url ./ --no-source-maps",
    "build": "npm run clean && npm run build:parcel",
    "clean": "rm -rf dist/*"
  }

And I run the script using npm run-script build

My tree project was:

project
    |dist
      |OUTPUT FILES
    |src
      |OTHER INPUT FOLDERS
      |index.html
    package.json

answered Dec 23, 2020 at 16:12

carloswm85's user avatar

carloswm85carloswm85

1,06410 silver badges20 bronze badges

1

try to remove old build stuff like dist folder and build again

answered Feb 14, 2020 at 14:02

Muhammed Moussa's user avatar

Источник

Команды

Serve

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

parcel index.html

Build

Собирает ресурсы за один раз, это также минифицирует их и устанавливает переменную окружения NODE_ENV=production.
См. Работа в продакшене для получения дополнительной информации.

parcel build index.html

Watch

Команда watch похожа на serve, с основным отличием: она не запускает сервер.

parcel watch index.html

Help

Отображает все возможные опции CLI

parcel help

Version

Показывает номер версии Parcel

parcel --version

Опции

Каталог для выходных файлов

Значение по умолчанию: «dist»

Доступно для: serve, watch, build

parcel build entry.js --out-dir build/output
# or
parcel build entry.js -d build/output
root
- build
- - output
- - - entry.js

Установить общедоступный URL для сервера

Значение по умолчанию: аналогично указанному в опции —out-dir

Доступно для: serve, watch, build

parcel entry.js --public-url ./dist/

выведет

<link rel="stylesheet" type="text/css" href="/dist/entry.1a2b3c.css">
<!-- или -->
<script src="/dist/entry.e5f6g7.js"></script>

Цель

Значение по умолчанию: browser

Доступно для: serve, watch, build

parcel build entry.js --target node

Возможные цели: node, browser, electron

Каталог кеширования

Значение по умолчанию: «.cache»

Доступно для: serve, watch, build

parcel build entry.js --cache-dir build/cache

Порт

Значение по умолчанию: 1234

Доступно для: serve

parcel serve entry.js --port 1111

Изменить уровень логирования

Значение по умолчанию: 3

Доступно для: serve, watch, build

parcel entry.js --log-level 1
Уровень логирования Эффект
0 Логирование отключено
1 Логировать только ошибки
2 Логировать только ошибки и предупреждения
3 Логировать всё

Имя хоста для HMR

Значение по умолчанию: location.hostname текущего окна

Доступно для: serve, watch

parcel entry.js --hmr-hostname parceljs.org

Порт для HMR

Значение по умолчанию: Случайный доступный порт

Доступно для: serve, watch

parcel entry.js --hmr-port 8080

Выходное имя файла

Значение по умолчанию: исходное имя файла

Доступно для: serve, watch, build

parcel build entry.js --out-file output.html

Это изменяет имя выходого файла входной точки бандла

Распечатать подробный отчёт

Значение по умолчанию: Минимальный отчёт

Доступно для: build

parcel build entry.js --detailed-report

Включить https

Значение по умолчанию: https отключён

Доступно для: serve, watch (работает на HTTPS для подключений HMR)

parcel build entry.js --https

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

Установка пользовательского сертификата

Значение по умолчанию: https отключён

Доступно для: serve, watch

parcel entry.js --cert certificate.cert --key private.key

Открытие в браузере

Значение по умолчанию: открытие отключено

Доступно для: serve

parcel entry.js --open

Отключить создание source-maps

Значение по умолчанию: source-maps включены

Доступно для: serve, watch, build

parcel build entry.js --no-source-maps

Отключение автоустановки

Значение по умолчанию: установка включена

Доступно для: serve, watch

parcel entry.js --no-autoinstall

Отключение HMR

Значение по умолчанию: HMR включён

Доступно для: serve, watch

parcel entry.js --no-hmr

Отключение минификации

Значение по умолчанию: минификация включена

Доступно для: build

parcel build entry.js --no-minify

Отключить кеширование файловой системы

Значение по умолчанию: кеширование включено

Доступно для: serve, watch, build

parcel build entry.js --no-cache

Сделать глобальными модули как UMD

Значение по умолчанию: отключено

Доступно для: serve, watch, build

parcel serve entry.js --global myvariable

Включить поддержку подъёма области видимости/tree shaking

Значение по умолчанию: отключено

Доступно для: build

parcel serve entry.js --experimental-scope-hoisting

Для получения дополнительной информации смотрите раздел Tree Shaking в записи Девона Говетта (Devon Govett) про Parcel 1.9.

Помогите нам улучшить документацию

Если что-то отсутствует или не совсем понятно, пожалуйста
опишите проблему в репозитории сайта или
отредактируйте эту страницу.

Источник

I am following the basic tutorial for Parcel to bundle js, css and image files.

My file structure

  dist
  node_modules
  src
    - index.html
    - style.css
    - index.js
    - somemodule.js

When I run parcel ./src/index.html a server is started and the website is displayed correctly. According to the tutorial you can finalize the build using parcel build index.js. I expected to get this output:

  dist
    - style.css
    - index.js
    - index.html

But instead, after running parcel build index.js I get this output:

  dist
    - 4wyd98y98790.css
    - 948y59hslas8.js

What could possibly be going wrong?

Josh Unger's user avatar

Josh Unger

6,4695 gold badges33 silver badges55 bronze badges

asked Dec 19, 2017 at 23:07

Kokodoko's user avatar

The Parcel Bundler output directory is dist by default, but you can specify an output directory by setting option (-d).

e.g.parcel build src/index.html -d build --public-url . You will get the final static files in the build directory.

answered Dec 20, 2017 at 15:41

Masonz's user avatar

2

The tutorial may say parcel build index.js, but you should run parcel build ./src/index.html. The entry point of your app is index.html.

answered Jan 4, 2018 at 14:53

c-neves's user avatar

c-nevesc-neves

611 silver badge3 bronze badges

Since some commands seem to change over time, I’m going to share here the set up that worked for me up to date.

 "scripts": {
    "start": "parcel src/index.html -p 3000 --open",
    "build:parcel": "parcel build ./src/index.html --public-url ./ --no-source-maps",
    "build": "npm run clean && npm run build:parcel",
    "clean": "rm -rf dist/*"
  }

And I run the script using npm run-script build

My tree project was:

project
    |dist
      |OUTPUT FILES
    |src
      |OTHER INPUT FOLDERS
      |index.html
    package.json

answered Dec 23, 2020 at 16:12

carloswm85's user avatar

carloswm85carloswm85

1,06410 silver badges20 bronze badges

1

try to remove old build stuff like dist folder and build again

answered Feb 14, 2020 at 14:02

Muhammed Moussa's user avatar

Источник

Answer by Kayla Benitez

[email protected] start /Users/laurasaydeh/Desktop/dragonstack/frontend
parcel index.html,

What is a secure and user-friendly way to provide only a few users access to web app on Amazon EC2?

,Please be sure to answer the question. Provide details and share your research!,Making statements based on opinion; back them up with references or personal experience.

Here is my package.json file

    {
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4"
  },
  "devDependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1"
  }
}

Here is my babelrc file

{
    "presets": ["env", "react"],
    "plugins": ["transform-class-properties"]
}

Answer by Westin Ponce

After installing and trying to run on the command line I get this back:
«-bash: parcel: command not found»,@TosinKristine I think this issue stems from the way I have my machine configured.
I have the latest version of Macs OS. I just installed prettier but got the same response from the Command Line: «-bash: prettier: command not found».,I tried to fix this by doing the following:,The parcel doesn’t like it if your parent directories have spaces in them. Use dashes or underscore and you should be good to go. I know this because it literally just happened to me.

$ npm install -g prettier
$ prettier

Answer by Davian Magana

NOTE: For special use cases, it’s also possible to perform a single build from the development environment, like this:,Starts up a development server, which will automatically rebuild your app as you change files and supports hot module replacement for fast development.,The watch command is similar to serve, with the main difference being it doesn’t start up a server.,You may also pass a glob or list of globs for multiple entry points.

Starts up a development server, which will automatically rebuild your app as you change files and supports hot module replacement for fast development.

parcel index.html

You may also pass a glob or list of globs for multiple entry points.

parcel one.html two.html
# OR
parcel *.html
# OR
parcel ./**/*.html

Builds the assets once, it also enabled minification and sets the NODE_ENV=production environment variable. See Production for more details.

parcel build index.html

NOTE: For special use cases, it’s also possible to perform a single build from the development environment, like this:

NODE_ENV=development parcel build <entrypoint> --no-minify

The watch command is similar to serve, with the main difference being it doesn’t start up a server.

parcel watch index.html

Displays all possible cli options

parcel help

Displays Parcel version number

parcel --version

Available in: serve, watch, build

parcel build entry.js --out-dir build/output
# or
parcel build entry.js -d build/output
parcel build entry.js --out-dir build/output
# or
parcel build entry.js -d build/output
root
- build
- - output
- - - entry.js

Available in: serve, watch, build

parcel entry.js --public-url ./dist/

will output:

<link rel="stylesheet" type="text/css" href="dist/entry.1a2b3c.css" />
<!-- or -->
<script src="dist/entry.e5f6g7.js"></script>

Available in: serve, watch, build

parcel build entry.js --target node

Available in: serve, watch, build

parcel build entry.js --target node --bundle-node-modules

Available in: serve, watch, build

parcel build entry.js --cache-dir build/cache

Available in: serve

parcel serve entry.js --host local.myhost.co.uk

Available in: serve

parcel serve entry.js --port 1111

Available in: serve, watch, build

parcel entry.js --log-level 1

Available in: serve, watch

parcel entry.js --hmr-hostname parceljs.org

Available in: serve, watch

parcel entry.js --hmr-port 8080

Available in: serve, watch, build

parcel build entry.js --out-file output.html

Available in: build

parcel build entry.js --detailed-report
parcel build entry.js --detailed-report 10

Available in: serve, watch (listen on HTTPS for HMR connections)

parcel build entry.js --https

Available in: serve, watch

parcel entry.js --cert certificate.cert --key private.key

Available in: serve

parcel entry.js --open

Available in: serve, watch, build

parcel build entry.js --no-source-maps

Available in: build

parcel build entry.js --no-content-hash

Available in: serve, watch

parcel entry.js --no-autoinstall

Available in: serve, watch

parcel entry.js --no-hmr

Available in: build

parcel build entry.js --no-minify

Available in: serve, watch, build

parcel build entry.js --no-cache

Available in: serve, watch, build

parcel serve entry.js --global myvariable

Available in: build

parcel build entry.js --experimental-scope-hoisting

Answer by Ruth Ahmed

All plugins must follow a naming system:,Runtimes get called after the bundler phase and generate an asset which gets
included in the final bundle.,In the most explicit form, targets are configured via the
package.json#targets field.

yarn init

Answer by Harley McPherson

The error is following: “bash: parcel: command not found”,I set the build command as “npm install”, and run command as “parcel index.html”. ,Defined build command as: npm run build, so npm just runs my script without the participation of bash,I do not know what can cause such error, because I have uploaded my project on GitHub, then cloned it and used the same strategy by passing build command, then run command, and it works perfectly.

Recently, I have made a portfolio project using parcel. Then, I attempted to deploy it on Digital Ocean, but failed at it.

I set the build command as “npm install”, and run command as “parcel index.html”. 

npm install

Recently, I have made a portfolio project using parcel. Then, I attempted to deploy it on Digital Ocean, but failed at it.

I set the build command as “npm install”, and run command as “parcel index.html”. 

parcel index.html
Источник

Понравилась статья? Поделить с друзьями:

Читайте также:

  • Paragon the overprime ошибка входа
  • Paragon the overprime нажмите на экран ошибка
  • Paradox launcher ошибка связи со стим
  • Paradox launcher ошибка связи со steam
  • Paradox launcher v2 ошибка при установке

    • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии