I'm trying to create two React projects:
React components library (only components without working application)
SPA application which uses created components (examples application)
I would like to achieve a folders structure like:
./src - directory with React components
./example - contains SPA app which uses ./src components
There are configuration files in example directory (simplest React + webpack config without HMR and other stuff):
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const aliases = require('./aliases.js');
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
resolve: {
alias: aliases
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
aliases.js
var path = require('path');
module.exports = {
'webpack-alias-react': path.resolve(__dirname, '../src')
};
babel.rc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
VSCode alias config is in jsconfig.json file.
And there is my problem.
When ./src/SimpleComponent contains code like that:
const SimpleComponent = () => {
return 'string';
};
Running npm run build command builds working application.
But when ./src/SimpleComponent returns:
const SimpleComponent = () => {
return <div>abc</div>;
};
npm run buid command throws exception:
ERROR in ../src/SimpleComponent.js Module build failed (from
./node_modules/babel-loader/lib/index.js): SyntaxError:
D:\Tranzystor\webpack-alias-react\src\SimpleComponent.js: Unexpected
token (4:9)
How to solve this webpack/Babel configuration issue?
Why is it possible to write <div> in App.js?
Is that right approach?
Whole code is here available.
I've solved that issues with Babel 7 and extended solution for that kind of issues is there:
github
It's ready to use webpack 4 + React + Babel 7 + eslint configuration.
It can be helpful for monorepo solutions.
Publishing your own components library to npm can be another application. As I mentioned above ./src directory contains small react components (content which you want to publish on npm). In ./demo directory there is spa application which shows how to use supplied components (it can be storybook for example).
Related
So I have a Vue 3 + Typescript app. npm run build of course takes the app and compiles it into the dist folder so it can be deployed. I have a web worker typescript file that I would like to be compiled separately so that it ends up in the root of the dist folder with the name worker.js. Here is what I'm looking for:
dist
|- worker.js
src
|- worker.ts // This gets compiled to js file in dist folder
I tried doing this by using webpack's DefinePlugin in my vue.config.js like so:
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
entry: `${__dirname}/src/worker.ts`,
module: {
rules: [
{
test: /worker\.ts$/,
use: 'ts-loader',
exclude: /node-modules/
}
]
},
resolve: {
extensions: ['.ts']
},
output: {
filename: 'worker.js',
path: `${__dirname}/dist`
}
})
],
resolve: {
alias: {
vue$: 'vue/dist/vue.esm-bundler.js'
}
}
}
}
Unfortunately this doesn't work, npm run build just completely ignores the worker.ts file and it doesn't show up in the dist folder anywhere, not even as a chunk. Any suggestions? Or is what I'm wanting to do even possible? Thanks for any help!
I was able to get the desired result using esbuild. Now I can write my web worker in Typescript and use classes and functions from my Vue app. It also compiles lightning fast. I just added the node ./esbuild.js command to my npm run dev and npm run build scripts, and now it compiles to the public folder before the Vue app builds. Here is my esbuild.js file.
const esbuild = require('esbuild')
const { nodeExternalsPlugin } = require('esbuild-node-externals')
const config = {
entryPoints: ['./src/worker.ts'],
outfile: 'public/worker.js',
bundle: true,
minify: false,
logLevel: 'silent',
plugins: [nodeExternalsPlugin()]
}
esbuild.build(config).catch(() => process.exit(1))
Let me know if you have any questions, I'd be happy to help anyone out getting this working.
I want to import chessground into a project of mine. It seems it's a CommonJS module, so i used browserify to import it into my web page.
browserify -r chessground > chessground.js
In order to use it in my webpage, I use
const Chessground = require('chessground').Chessground
but I saw in this project that they import it like
import {Chessground} from 'chessground'
I know they are douing with webpack, but for the life of me I can't figure out how to bundle an entire npm package into one file AND convert it into an ES module. Can anyone help me?
There is noway to bundle your packages without using a bundler like webpack or rollup.js.
If it is necessarily to use task runner you may find a way to make the bundler work with your task runner.
I had the same problem with gulpjs and wepack, and it was really painful to make it work. The solution was using a webpack and webpack plugins in gulpjs.
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const path = require('path');
const webapckJsConfig = {
mode: (process.env.APP_ENV === 'dev' && process.env.APP_DEBUG === 'true') ? 'development' : 'production',
devtool: (process.env.APP_ENV === 'dev' && process.env.APP_DEBUG === 'true') ? 'source-map' : false,
entry: {
// Website JS Files
'website/home.js': './resources/js/website/home.js',
'website/notfound.js': './resources/js/website/notfound.js',
'website/error.js': './resources/js/website/error.js',
// Admin JS Files
'admin/home.js': './resources/js/admin/home.js',
'admin/notfound.js': './resources/js/admin/notfound.js',
},
output: {
path: path.resolve(__dirname, 'public/'),
filename: '[name]',
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
},
},
],
},
};
// JavaScript lint Cehck ✅ Convert 🔂 Compresse 🔄 Output ↪ 📁 public/js
async function scripts() {
return gulp
.src(`${JAVASCRIPT_DIR}/**/*.js`)
.pipe(webpackStream(webapckJsConfig), webpack)
.pipe(gulp.dest(`${JS_PUBLIC_DIR}`));
}
exports.scripts = scripts;
you can also check it here
You can of course take the webpack configuration and put them in external file, but you have to consider that you will confuse other developers because they will think webpack is independent and start to use it as an independent tool, so that's why I keep it in gulp.js.
I have an existing node js backend that need to deploy on customer premise. I would like to compile/obfuscate the code before passing to client.
I do not know whether it is "compilable".
But at very least i want to have only single merged code into index.js file (other javascript file all remove) that is obfuscated before passing to client.
Is there any existing npm module that does that and how reliable that an obfuscated code work as it is then original code.
What are your company/ ways to deal with it when u need to pass an existing node js source code deployable at client premise.
I am much more looking at existing library that can automate the whole process.
eg: npx run obfuscate-code --entrypoint.js (it will search all the import/require from node js and compile everything.
Folder structure is as follow.
home
- controllers (folder)
- file1.js
- file2.js
- languages (folder)
- en.js
- services (folder)
- service1.js
- service2.js
- index.js (entry point)
You can make an executable using PKG (npm package) see => https://github.com/zeit/pkg
or webpack if you want to make a single js file that is minimized.
// webpack.config.js
const nodeExternals = require('webpack-node-externals');
module.exports = {
mode: 'production',
target: 'node',
externals: [nodeExternals()],
entry: {
'build/output': './src/index.js'
},
output: {
path: __dirname,
filename: '[name].bundle.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['env', {
'targets': {
'node': 'current'
}
}]
]
}
}
}]
}
};
By using nodeExternals you don't put external dependencies in the main js file but you refer to node_modules.
You can use both those 2 solutions using npm run ... by adding them to your scripts section in package.json
I have a project which doesn't include webpack in the root direct, it's installed in my website folder within root directory.
project
-> src
-> App.js
-> Hello.js
-> index.js
-> website
-> webpack.config.js
-> index.js
-> package.json
and in my webpack.config.js file I added a alias entry to point to my components folder:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
resolve: {
alias: {
'#my-app/components': path.resolve(__dirname, '../src/'),
}
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
},
}
The problem is: When I try to import my component like this import { Hello } from '#my-app/components'; and I try to npm run build, I get this error message:
ERROR in ../src/Hello.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/.../my-new-proj/src/Hello.js: Unexpected token (4:2)
I'm not sure if this problem is caused just because I'm pointing my components alias in a parent directory which doesn't have its own webpack config or it's something else.
I pushed my code to github so you can see the complete folder structure: https://github.com/osnysantos/my-new-project
Your problem has nothing to do with webpack alias. If you follow the the emitted error, you will see that babel-loader does not recognize the JSX. I see you have added react-presets to your babelrc file, however those seem to be overwritten by your webpack config. Either remove the preset array from the webpack config, or add react preset to them.
How to expose a graphql endpoint to react native app? Has anyone used relay in react native application? The examples in technical overview of relay https://facebook.github.io/relay/docs/getting-started.html use webpack to serve relay app and expose it to a graphql server:
import express from 'express';
import graphQLHTTP from 'express-graphql';
import path from 'path';
import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import {StarWarsSchema} from './data/starWarsSchema';
const APP_PORT = 3000;
const GRAPHQL_PORT = 8080;
// Expose a GraphQL endpoint
var graphQLServer = express();
graphQLServer.use('/', graphQLHTTP({schema: StarWarsSchema, pretty: true}));
graphQLServer.listen(GRAPHQL_PORT, () => console.log(
`GraphQL Server is now running on http://localhost:${GRAPHQL_PORT}`
));
// Serve the Relay app
var compiler = webpack({
entry: path.resolve(__dirname, 'js', 'app.js'),
eslint: {
configFile: '.eslintrc'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
query: {
stage: 0,
plugins: ['./build/babelRelayPlugin']
}
},
{
test: /\.js$/,
loader: 'eslint'
}
]
},
output: {filename: 'app.js', path: '/'}
});
var app = new WebpackDevServer(compiler, {
contentBase: '/public/',
proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
publicPath: '/js/',
stats: {colors: true}
});
// Serve static resources
app.use('/', express.static('public'));
app.use('/node_modules', express.static('node_modules'));
app.listen(APP_PORT, () => {
console.log(`Relay Star Wars is now running on http://localhost:${APP_PORT}`);
});
but react native uses react-native packager to bundle its modules; has anyone tried using relay in the react native app?
It is now possible to use react native and relay together.
Github announcement: https://github.com/facebook/relay/issues/26
Instructions for existing RN apps: http://pulse.mixrt.com/discussion/26/technical-making-relay-work-with-existing-react-native-apps-a-step-by-step-tutorial .
Copy of the instructions:
Back up your project.
Make sure you have your GraphQL server ready and your schema.json at hand too. For more details about the latter two visit the React-Relay project page.
Ensure that you’re using `npm` version 3 or greater.
If React Native's packager (`react-native start`) is running somewhere in the background, you should stop it now.
Run: watchman watch-del-all and also: rm -rf $TMPDIR/react-* to avoid running into a known packager issue ( https://github.com/facebook/react-native/issues/4968 ).
Delete the `./node_modules` directory from your project.
Edit your `package.json` file, make sure it has the following:
"dependencies": {
"react": "^0.14.7",
"react-native": "facebook/react-native",
"react-relay": "^0.7.3"
},
"devDependencies": {
"babel-core": "^6.6.4",
"babel-preset-react-native": "^1.4.0",
"babel-relay-plugin": "^0.7.3"
}
Babel version is especially important. Make sure that your project uses babel 6.5 or later, we need it for the passPerPreset feature in .babelrc file.
Create a new file `.babelrc` and place it in your project's directory:
{
"presets": [
"./scripts/babelRelayPlugin",
"react-native"
],
"passPerPreset": true
}
Create a new file in your project's directory called `babelRelayPlugin.js` with the following content:
const getBabelRelayPlugin = require('babel-relay-plugin');
const schema = require('./schema.json');
module.exports = { plugins: [getBabelRelayPlugin(schema.data)] };
Copy your `schema.json` file to the project's directory too.
Run: npm install
You can find a working version in here, until this will be solved.
you need to install react-relay package for react-native app
Before the entry point of your react-native app, inject network layer with the url you exposed
Relay.injectNetworkLayer(
new Relay.DefaultNetworkLayer('http://localhost:8000/graphql')
);