I'm running a babel cli command
babel src --out-dir lib
To copy the es6 scripts from src into lib. However, it wont copy css/scss files I have in the src/ folder. Is there a way to make it copy them as well?
Babel has the copy files option for this:
babel src --out-dir lib --copy-files
Note: It is true that babels primary purpose is to process javascript files, but babel's big suite of tools these day often makes it unnecessary to go for more complex build script setups as gulp and alike.
A gulp-less setup could be adding this to packages.json:
{
...
"devDependencies": {
"babel": "*",
"babel-cli": "^6.4.0",
"babel-preset-es2015": "^6.3.13"
},
"scripts": {
"watch": "babel --watch src --out-dir lib --source-maps inline --copy-files",
"build": "babel src --out-dir lib --source-maps inline --copy-files"
},
"babel": {
"presets": [
"es2015"
]
}
}
I found a way to do this by using the ncp module
npm install ncp
This module is basically like a cp except it works on
This isn't a global module, so to run this we use
node -e \"require('ncp').ncp('./src', './lib')\" && babel src --out-dir lib
Related
Starting with an empty directory, is it possible to do that? Should I use stage-0 like it is on the Babel REPL?
I hope to transpile it just like how ReactJS does it. For some reason, I always got an error for just a file containing:
let obj = { a: 1 };
let newObj = {
...obj,
ha: 3
};
Other times, I can transpile a file, but if I transpile a folder, it'd say:
foo.js: Cannot read property 'contexts' of null
The commands I tried included:
npx babel src --out-dir compiled --presets=es2015,react,minify --watch
but the errors I mentioned above appeared. Also, when I do
npm install babel-minify
it reported
found 2489 vulnerabilities (849 low, 306 moderate, 1329 high, 5 critical)
There is also a notice
As of v7.0.0-beta.55, we've removed Babel's Stage presets.
Please consider reading our blog post on this decision at
https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
for more details. TL;DR is that it's more beneficial in the
long run to explicitly add which proposals to use.
and I wonder what should be done.
Is it possible to
just continuously minify a folder
transpile some ES6 or ES7, 8 syntax that are not yet commonly supported
transpile JSX as well
?
I have found some reliable ways to make it work, although I am not sure when I should use babel.config.json and when to use .babelrc.json or .babelrc. It seems I have to run babel as ./node_modules/.bin/babel and is it true if I don't npm install babel using the -g option.
Here is what works:
create a folder, such as TryBabel
cd TryBabel
Go to https://babeljs.io/setup.html and click "CLI"
You need a package.json, so use npm init and just press Enter a few times
It should lead you to install
a. npm install --save-dev #babel/core #babel/cli
b. now look at your package.json. Remove the script about test but use this: "build": "babel src -d lib"
Now npm run build or ./node_modules/.bin/babel src -d lib should work, but make sure you have some .js files in the src folder. The transpiled result will be in the lib folder.
Now to transpile things into "pre ES6", just follow the #babel/preset-env instructions:
a. npm install #babel/preset-env --save-dev
b. make your babel.config.json to contain { "presets": ["#babel/preset-env"] }
Now you can use npm run build to transpile once, or use ./node_modules/.bin/babel src -d lib --watch to keep on running it and "watch" the src folder and transpile files in it when the files change.
To do minification or make it work with JSX/React, see
https://babeljs.io/docs/en/babel-preset-minify
and
https://babeljs.io/docs/en/babel-preset-react
and make sure your babel.config.json file looks like:
{
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "entry"
}
],
["#babel/preset-react"],
["minify"]
]
}
and remove minify if you don't want the code to be minified.
babel src --out-dir dist --copy-files --ignore **/*.test.js
This is the line that i try to execute with yarn inside a script in package.json but still builds inside dist folder test files...Still not working via .babelrc
So I am trying out monorepo design with lerna for our react applications.
the idea is to create one repo which will have all the react projects as lerna packages as well as some common modules/components which are shared across the applications.
now all these common modules/components are es6 modules. which are not transpiled. because there is continuous development going on the common modules as well. and if we build/transpile them I am sure react HMR will not work after that (a wild guess). following is my directory structure
package.json
lerna.json
|--packages
|--common
|--react-app
|--constants
|--utilities
common contains common react elements like table,accordion etc. which are exported as default es6 modules.
react-app imports common as dependency. react-app has webpack build configuration set.
now when i import common module into my react-app babel transform fails with this error
Button.component.jsx 7:19
Module parse failed: Unexpected token (7:19)
You may need an appropriate loader to handle this file type.
| const { Search } = Input;
| class TextBoxWithButton extends React.Component {
> static propTypes = {
| placeholder: PropTypes.string.isRequired,
| onAction: PropTypes.func.isRequired,
# ./src/App/Modules/Todo/Components/Header/Header.component.jsx 10:0-111 16:25-41
# ./src/App/Modules/Todo/Todo.component.jsx
# ./src/App/Router/index.jsx
# ./src/App/Layout/index.jsx
# ./src/App/index.jsx
# ./src/App.hot.js
# ./src/index.jsx
which means babel-loader is unable to parse and transpile whats in the node_nodules folder which makes sense because all dependencies are expected to be already transpiled. but not always. if you manage local dependencies you cannot keep them build all the time (that's what i think)
now I have found some solutions online that enable 1bable-loader not to exclude node_modules or ignoring #mypackagein exclude regex. but nothing is working in my case.
here is what i have tried so far.
remove exlucde: /node_modules/ from babel-loader => not working
use require.resolve('babel-loader') => not working
add resolve.symlinks= false.
add resolve.modules='node_modules' or
path.resove(__dirname,'node_modules') => not working
add packages path to babel-loader include include: [srcPath, lernaPackagesPath],
nothing seem to work.
is there something that i am missing ?
here is the link to my git test repo.
babel-loader by default will not transpile anything that is in node_modules. you can explicitly say what to transpile in node_modules but after #babel7.0.0 that doesn't seem to work either.
there is also a scope of .babelrc which was introduced in #babel7.0.0.
according to the research i did in under normal circumstances node_modules expect to have transpiled commonjs or umd modules. which can be imported by any application. in my case my packages/components where all es6 modules which needed to be transpiled. and my webpack build was failing because babel-loader was simply ignoring them.
so i decided to use #babel/cli to transpile each package where my components reside i had to add .babelrc along with other configurations to my component packages and build them with #babel/cli
here is the scripts in my package.json
"scripts": {
"start": "babel src --watch --out-dir dist --source-maps inline --copy-files --ignore spec.js,spec.jsx"
},
and my package.json looks something like this after that
{
"name": "#pkg/components",
"version": "1.0.1",
"description": "a repository for react common components. may or may not be dependent on elements",
"main": "dist/index.js",
"author": "hannad rehman",
"license": "MIT",
"scripts": {
"start": "babel src --watch --out-dir dist --source-maps inline --copy-files --ignore spec.js,spec.jsx"
},
"dependencies": {
"#pkg/constants": "^1.0.1",
"#pkg/elements": "^1.0.1"
},
"peerDependencies": {
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-router-dom": "^4.3.1"
}
}
with this approach. all of my common packages will be unit tested, linted and built before any application can import them. babel has a watch mode which will make sure transpilation happens always when a change occurs.
lastly and most importantly react HMR works as expected.
UPDATE
the above solution definitely works but after months i changed it by using include property in the babel loader
{
test: /\.js(x?)$/,
include: [/node_modules\/#pkg/],
use: [
'thread-loader',
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
configFile: path.resolve(
__dirname,
'../../../../',
`${env.appConfig.folderSrc}/babel.config.js`,
),
},
},
],
}
I've got a .babelrc file at the root of a project:
{
"presets": ["es2015"],
"ignore": [
"src"
]
}
When I compile it with babel src --out-dir dist, the src folder is still compiled onto the dist folder.
However, when I launch the command babel src --out-dir dist --ignore src, nothing is compiled.
Why is the ignore property of my .babelrc being ignored?
By the way, I've tried with some subfolder or files, and the same issue occurs.
This was an issue with babel-cli.
It has been fixed in v6.14.0. Here is the changelog for this version: https://github.com/babel/babel/releases/tag/v6.14.0
In my package.json, I have:
"scripts": {
"test": "mocha --require blanket -R html-cov > test/coverage.html --compilers coffee:'./node_modules/coffee-script/lib/coffee-script/register'"
},
So if I run npm test, I get:
npm test
> my-site#1.0.0 test /Users/me/Sites/my-site
> mocha --require blanket -R html-cov > test/coverage.html --compilers coffee:'./node_modules/coffee-script/lib/coffee-script/register'
If I take out the blanket stuff ("test": "mocha --compilers coffee:'./node_modules/coffee-script/lib/coffee-script/register'"), then my tests run correctly.
I am using CoffeeScript, if that matters. What am I doing incorrectly?
According to the blanket documentation:
If your test runner tests source files written in coffee script,
blanket still has you covered. Using a custom loader, coffeescript
files are compiled, instrumented, and tested.
The coffee script loader is located in node-loaders/coffee-script.js.
You will need to add the following to your package.json:
"config": {
"blanket:" {
"pattern" : "src", // use the correct pattern for your project
"loader": "./node-loaders/coffee-script"
}
}
For example see the blanket project package.json file.
In addition, the command line you are using for the tests is incorrect. It is missing the path to your test files and the output redirection should be at the end. You should use something like:
mocha --require blanket -R html-cov --recursive --compilers coffee:./node_modules/coffee-script/lib/coffee-script/register src > test/coverage.html