Include some node_modules directories in Babel 7
12,207
I finally got this to work.
package.json
{
"name": "someproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"browserslist": "> 0.25% in DE, not dead",
"directories": {
"test": "tests"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 0"
},
"private": true,
"dependencies": {
"@babel/core": "^7.5.4",
"@babel/plugin-proposal-class-properties": "^7.5.0",
"@babel/preset-env": "^7.5.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"browserify": "^16.2.0",
"core-js": "^3.1.4",
"minify": "^3.0.5",
"somedeps": "ssh://[email protected]:somedeps.git",
"regenerator-runtime": "^0.13.2",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.6"
}
}
webpack.config.js
const path = require('path');
module.exports = {
devtool: 'cheap-module-source-map',
context: path.resolve('resources/assets/js/'),
entry: ['./index'],
output: {
path: path.resolve('public/js'),
filename: 'index.js'
},
module: {
rules: [
{
test: /\.js|jsx$/,
use: {
loader: 'babel-loader',
options: {
presets: [
["@babel/preset-env", {
useBuiltIns: 'entry',
corejs: 3
}],
"@babel/preset-react"
],
plugins: [
"@babel/plugin-proposal-class-properties",
],
include: [
path.resolve('resources/assets/js/'),
path.resolve('node_modules/somedeps/'),
],
exclude: /node_modules\/(?!somedeps).+/
}
}
}
]
},
resolve: {
modules: [
path.resolve('./resources/assets/js/'),
'node_modules'
]
},
watchOptions: {
aggregateTimeout: 300,
ignored: [
/node_modules([\\]+|\/)+(?!somedeps)/,
/\somedeps([\\]+|\/)node_modules/
]
}
};
At the top of your app main file, here resources/assets/js/index.js, include:
require('core-js');
require('regenerator-runtime/runtime');
Author by
AsTeR
Experienced around mobile and web development, software design, data mining and general algorithmic.
Updated on June 11, 2022Comments
-
AsTeR almost 2 years
I have a dependency in
node_modules
that needs to be compiled through Babel. I don't manage to get Babel back to compiling after upgrading my stack.Current versions:
- @babel/core 7.5.4
- webpack 2.7.0
webpack.config.js:
const path = require('path'); module.exports = { devtool: 'cheap-module-source-map', context: path.resolve('resources/assets/js/'), entry: ['./index'], output: { path: path.resolve('public/js'), filename: 'index.js' }, module: { rules: [ { include: [ path.resolve('resources/assets/js/'), path.resolve('node_modules/mydep/'), ], exclude: /node_modules\/(?!mydep).+/, test: /\.js|jsx$/, use: { loader: 'babel-loader' } } ] }, resolve: { modules: [ path.resolve('./resources/assets/js/'), 'node_modules' ] }, watchOptions: { aggregateTimeout: 300, ignored: [ /node_modules([\\]+|\/)+(?!mydep)/, /\mydep([\\]+|\/)node_modules/ ] } };
.babelrc:
{ "presets": [ ["@babel/preset-env", { "debug": true, "useBuiltIns": "usage" }], "@babel/preset-react" ] }
The error I get at the top of first JSX tag :
ERROR in /var/www/node_modules/mydep/somedir/app/index.js Module build failed (from /var/www/node_modules/babel-loader/lib/index.js): SyntaxError: /var/www/node_modules/mydep/somedir/app/index.js: Unexpected token (160:15) 158 | registerReducers(); 159 | new SomeClass('acquisition'); > 160 | return <SomeComponent />
-
AsTeR almost 5 yearsI was possible in previous versions, and basically I want to build it the same way as my current code. It's a way for me to factorize code between project, postinstall scripts would basically slow down my build process.
-
Oleg almost 5 yearsYou can use prepublish script on your npm package. The second solution is adding your npm packages to your main projects by symlink. But If you have a lot of you own packages, you can explore monorepository solutions. For example, rushjs.io
-
Andrew Koster almost 3 yearsYou're thinking of TypeScript code as something that can't be used without compiling it to JavaScript. This is not always correct. Many compilation and execution environments can use TypeScript code directly.