Currently exploring webpack different tools associated with it. Now I am using Babel for transpiling ES6 code into ES5 code. I came accross the need for a .babelrc file which holds the configurations for Babel. However, on the website of Babel I also saw that you could also place these configurations into the package.json file. Like this:
Package.json File:
{
"name": "webpack-tutorial",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"webpack": "^4.16.2",
"webpack-cli": "^3.1.0"
},
"babel": {
"presets": [
"env"
]
}
}
Now when I run npm run dev Babel also works and the code gets transpiled succesfully.
How does Babel know to access the package.json file? Does it first look for an .babelrc file and then if this is not present does it automatically look for its configurations in the package.json? How does Webpack interact with both Babel and the package.json file to produce this result?
For anyone who is interested it was on the official website:
Babel will look for a .babelrc in the current directory of the file
being transpiled. If one does not exist, it will travel up the
directory tree until it finds either a .babelrc, or a package.json
with a "babel": {} hash within.
Related
I am just starting to learn next.js. I installed create-next-app tried starting a development server without changing any code provided by boilerplate. I get this error
./styles/globals.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: pages\_app.js
I am just starting with nextjs so I do not have any other information besides this and I have not changed any code
commands I used
npx create-next-app next_js_list
cd next_js_list
npm run dev
This is the package.json I have
{
"name": "next_js_list",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "11.1.1",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.1.1"
}
}
Same for me, looks like an error with the new next.js version 11.1.1, just go back to 11.1.0, and will be ok, a fix will be coming shortly
Here are the files for my app which uses babel to compile the ES6 in main.js to ES5 in main.bundle.js
Here is my babel.rc file (hidden):
{
"presets": ["#babel/preset-env"]
}
Here is my package.json file with all my node modules (devDependencies):
{
"name": "es6-tutorial",
"version": "1.0.0",
"description": "ES6 tutorial",
"main": "index.js",
"scripts": {
"babel": "babel js/main.js -o build/main.bundle.js",
"start": "http-server",
"watch": "babel js/main.js -o build/main.bundle.js --watch"
},
"author": "me",
"license": "ISC",
"devDependencies": {
"#babel/preset-env": "^7.2.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"http-server": "^0.11.1"
}
}
Right now to start the compile from ES6 to ES5 I navigate (cd) to the root of this directory and I set up a watch to compile automatically (npm run watch)
This works fine except now I also have functions in myFunctions.js that I want to export and import into main.js
When I add this export/import I notice that the compiled file, main.bundle.js, adds this:
`var _myFunctions = require('myFunctions.js');`
Then when I go to run the app I get an error in the console:
`Uncaught ReferenceError: require is not defined
at main.bundle.js:9`
After researching this, I think I need to add some sort of plugin for Babel : https://babeljs.io/docs/en/plugins#modules to handle the export/import (is that right?) but I'm not sure which one I should use and I tried a few but I cannot get any to work after the npm install.
Also, I understand that I do NOT need to add the require.js library right?
When I try running npm run build for a new webpack build I get
You have installed webpack-cli and webpack-command together. To work with the "webpack" command you need only one CLI package, please remove one of them or use them directly via their binary.
I think I installed them globally. I tried, deleting them, webpack, deleating node clearing cache but I keep getting the same result.
Using webpack 4
{
"name": "ls",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0"
}
}
I think the message was quite clear so just run npm uninstall "webpack-command" to remove webpack-command (b/c "webpack-cli" has newer version)
I'm having a lot of trouble deploying to heroku/production with babel(using babel-cli) + es6 javascript. My app is a simple express and node server written in es6 style javascript.
I'm using "babel-cli" (installed via package.json) and a postinstall script inside package.json to precompile my es6 javascript into a "build" folder before starting the server.
The weird thing is that everything compiles smoothly with babel-cli for development, but not for production.
When deploying to production/heroku, the build process gets stuck on the babel command in Makefile and throws an error.
Package.json
{
"name": "messenger-basic",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"clean": "rm -rf build && mkdir build",
"build-server": "babel src --out-dir build",
"build": "npm run clean && npm run build-server",
"postinstall": "make build",
"start": "node ./build/server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-preset-es2015": "^6.9.0",
"body-parser": "^1.15.2",
"express": "^4.14.0",
"request": "^2.72.0"
},
"engines": {
"node": "4.4.5"
},
"devDependencies": {
"babel-cli": "^6.10.1",
"babel-preset-stage-2": "^6.11.0"
}
}
Makefile:
build: clean server_build
clean:
rm -rf build
mkdir -p build
server_build:
babel src --out-dir build
rsync -av --include \*/ --include \*.json --exclude \* ./src/ ./build/
rsync -av --include \*/ --include \*.ejs --exclude \* ./src/ ./build/
.PHONY: build clean
The error:
You have mistakenly installed the `babel` package, which is a no-op in Babel 6.
Babel's CLI commands have been moved from the `babel` package to the `babel-cli` package.
Any help would be much appreciated! Setting up server stuff is my worst nemesis! :(
I usually run babel through weback, so I could be wrong here (I don't typically use makefiles), BUT, I would assume you would need to install babel-core in order for it to run correctly? It seems like the error is related to the fact that you just have "babel" installed, which will not work with v6. You need to install its components, which at minimum would require "babel-core."
I am using ember-cli to setup my new emberjs application. While I was able to successfully install jade, it does not appear to be rendering .jade templates added to the /app directory?
Thoughts? Current package.json:
{
"name": "frontend",
"version": "0.0.0",
"private": true,
"directories": {
"doc": "doc",
"test": "test"
},
"scripts": {
"start": "ember server",
"build": "ember build",
"test": "ember test"
},
"repository": "https://github.com/stefanpenner/ember-cli",
"engines": {
"node": ">= 0.10.0"
},
"author": "",
"license": "MIT",
"devDependencies": {
"ember-cli": "0.0.28",
"originate": "0.1.5",
"broccoli-ember-hbs-template-compiler": "^1.5.0",
"loom-generators-ember-appkit": "^1.1.1",
"express": "^4.1.1",
"body-parser": "^1.2.0",
"glob": "^3.2.9",
"broccoli-sass": "^0.1.4",
"broccoli-csso": "^0.2.0",
"broccoli-jade": "^0.2.0"
}
}
There is a rather small template in the /app folder named error.jade with the following code:
doctype html
head
title
|Error!
body
p
strong
|Error!
When I run ember serve or ember build it never gets compiled. Everything else is the standard setup in ember cli. I ran npm install --save broccoli-jade to install it. Here is an example repo I setup for this issue embercli-emberjs-test. Ideally I would like to compile both handlebars and jade templates.
Thoughts? github issue
try running
bower install
in your app root. Some times the post-install routine does not execute automatically.