How to import external files in a optimized requirejs project? - javascript

I am developing a RequireJs project, which one I was able to run R.js on it. I need to exclude a config file from the optimizer and be able to read it from the optimized javascript. I could do the first half of my problem with the following app.build.js:
({
appDir: ".",
baseUrl: "js",
mainConfigFile: 'js/main.js',
paths: {
requireLib: 'libs/require/require-min',
jqm: 'libs/jqueryMobile/jquery.mobile-1.3.0.min'
},
modules: [
{
name: "main",
include: ["requireLib","jqm"],
excludeShallow: [
"config/conf"
]
}
],
optimize: "none"
})
What I couldn't achieve is to read config/conf properties from main.js (final js with everything).
Any idea about how I can tackle this problem?
Thanks


I think you need to move the config to the exclude seccion and add config to the path seccion this way you will build config. something like this:
({
appDir: ".",
baseUrl: "js",
mainConfigFile: 'js/main.js',
paths: {
requireLib: 'libs/require/require-min',
jqm: 'libs/jqueryMobile/jquery.mobile-1.3.0.min',
config : 'config/conf'
},
modules: [
{
name: "main",
exclude : [
'config'
]
}
],
optimize: "none"
})

Related

How to configure eslint with files to include?

I have a react native application that doesn't follow the convention of having all files in src directory. It appears eslint looks for the src directory by default.
How can I tell eslint to look for ./components', ./screens' etc instead?
Passing in the path when running eslint works but that means those files only get checked when that command gets ran instead of allowing my text editor to detect issues.
"lint": "eslint ./**/*.tsx"
I have tried adding include paths to my eslint config too but that doesn't make any difference.
module.exports = {
env: {
browser: true,
es2021: true,
'react-native/react-native': true,
},
extends: [
'plugin:react/recommended',
'standard-with-typescript',
'plugin:react-native-a11y/android'
],
overrides: [
],
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: './tsconfig.json'
},
plugins: [
'react',
'react-native'
],
rules: {
indent: ['error', 2],
'linebreak-style': [
'error',
'unix'
],
semi: [
'error',
'always'
]
},
includePaths: ["./**/*.tsx"] // this doesn't seem to have any effect
};
I want to be able to run eslint and not have to pass in any optional args as it should be defined already within my eslint config.

Typescript complaining about Absolute imports in React Native

So Im trying to implement Absolute imports using JSON files in directories.
In JSON:
{"name": "components"}
I have specified paths in config JSON, but still not working, I have tried with baseURL and without, with "/*" at the end:
"paths": {
"components/*":["./src/components/*"]
},```
and without:
"paths": {
"components":["./src/components"]
},
Code is working normally, only problem is TS error.

This is how I usually do for my projects.
yarn add -D babel-plugin-module-resolver
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
alias: {
'components': './src/components',
},
},
],
],
};
tsconfig.json
{
"extends": "#tsconfig/react-native/tsconfig.json",
"compilerOptions": {
"skipLibCheck": true,
/* for module resolver */
"baseUrl": ".",
"paths": {
"components/*": ["src/components/*"]
}
}
}
Restart VSCode

How to configure Storybook to run from a directory other than the project root

I'm trying to configure Storybook to run from a directory that is not the root of the project and I'm having a little trouble. I've setup a mono-rep using https://github.com/jibin2706/cra-monorepo-demo as base.
My project directory looks like this:
- project
-- packages
---- app
---- components
---- utils
---- stories
------ .storybook
-------- main.js
------ ComponentA
-------- ComponentA.stories.mdx
Because I'm using a monorep with aliases (e.g. a component can import from #project/utils) I've configured webpack in .storybook/main.js to read like:
const path = require('path');
module.exports = {
stories: ['../**/*.stories.mdx', '../../**/*.stories.#(js|jsx|ts|tsx)'],
addons: [
'#storybook/addon-links',
'#storybook/addon-essentials',
'#storybook/preset-create-react-app',
],
webpackFinal: async (config, { configType }) => {
const result = {
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
'#project/components': path.resolve(
process.cwd(),
'packages/components'
),
},
},
};
},
};
Then within my ComponentA.stories.mdx I have an import like import { ComponentA } from '#project/components';
When I run this however, I'm always hitting an error when it encounters JSX within a .js file:
ERROR in ./packages/components/MyComponent1/MyComponent1.js 106:11
Module parse failed: Unexpected token (106:11)
File was processed with these loaders:
./node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
|
return <React.Fragment>{children}</React.Fragment>;
I can't seem to work out why this error is throwing. I've tried running with yarn storybook --debug-webpack which seems to include a loader for both jsx and js files. I'm not 100% sure if this is correct, but it looks roughly right from other docs I've read.
module: {
rules: [
{
test: /\.(mjs|tsx?|jsx?)$/,
use: [
{
loader: '/home/ian/src/cra-monorepo-demo/node_modules/babel-loader/lib/index.js',
options: {
sourceType: 'unambiguous',
presets: [
[
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/preset-env/lib/index.js',
{ shippedProposals: true, loose: true }
],
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/preset-typescript/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/preset-react/lib/index.js'
],
plugins: [
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-shorthand-properties/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-block-scoping/lib/index.js',
[
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-proposal-decorators/lib/index.js',
{ legacy: true }
],
[
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-proposal-class-properties/lib/index.js',
{ loose: true }
],
[
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-proposal-private-methods/lib/index.js',
{ loose: true }
],
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-proposal-export-default-from/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-syntax-dynamic-import/lib/index.js',
[
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-proposal-object-rest-spread/lib/index.js',
{ loose: true, useBuiltIns: true }
],
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-classes/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-arrow-functions/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-parameters/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-destructuring/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-spread/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-for-of/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#storybook/core-common/node_modules/babel-plugin-macros/dist/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-proposal-optional-chaining/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-proposal-nullish-coalescing-operator/lib/index.js',
[
'/home/ian/src/cra-monorepo-demo/node_modules/babel-plugin-polyfill-corejs3/lib/index.js',
{
method: 'usage-global',
absoluteImports: '/home/ian/src/cra-monorepo-demo/node_modules/core-js/index.js',
version: '3.16.1'
}
],
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-template-literals/lib/index.js'
]
}
}
],
include: [ '/home/ian/src/cra-monorepo-demo' ],
exclude: [ /node_modules/, /dist/ ]
},
{
test: /\.js$/,
use: [
{
loader: '/home/ian/src/cra-monorepo-demo/node_modules/babel-loader/lib/index.js',
options: {
sourceType: 'unambiguous',
presets: [
[
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/preset-env/lib/index.js',
{
shippedProposals: true,
modules: false,
loose: true,
targets: 'defaults'
}
],
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/preset-react/lib/index.js'
],
plugins: [
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-shorthand-properties/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-block-scoping/lib/index.js',
[
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-proposal-decorators/lib/index.js',
{ legacy: true }
],
[
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-proposal-class-properties/lib/index.js',
{ loose: true }
],
[
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-proposal-private-methods/lib/index.js',
{ loose: true }
],
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-proposal-export-default-from/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-syntax-dynamic-import/lib/index.js',
[
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-proposal-object-rest-spread/lib/index.js',
{ loose: true, useBuiltIns: true }
],
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-classes/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-arrow-functions/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-parameters/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-destructuring/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-spread/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-transform-for-of/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#storybook/core-common/node_modules/babel-plugin-macros/dist/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-proposal-optional-chaining/lib/index.js',
'/home/ian/src/cra-monorepo-demo/node_modules/#babel/plugin-proposal-nullish-coalescing-operator/lib/index.js',
[
'/home/ian/src/cra-monorepo-demo/node_modules/babel-plugin-polyfill-corejs3/lib/index.js',
{
method: 'usage-global',
absoluteImports: '/home/ian/src/cra-monorepo-demo/node_modules/core-js/index.js',
version: '3.16.1'
}
]
]
}
}
],
include: [Function: include]
},
...
Can anyone see what I might be missing here, or what additional config is required?

The issue is probably with the Storybook project root. The default babel-loader defines an include that is equal to the project root. And the "project root" is usually the closest .git folder.
A workaround is to set the correct project root:
const path = require("path");
module.exports = {
// ...
webpackFinal: async (config, { configType }) => {
const babelLoaderRule = config.module.rules.find(
(rule) => rule.test.toString() === /\.(mjs|tsx?|jsx?)$/.toString()
);
// set correct project root
babelLoaderRule.include = [path.resolve(__dirname, "../..")];
return config;
}
};
What "correct" path is, depends on your setup.
Check my post for a longer write-up.

As far as I can tell your .storybook/main.js looks fine.
The built-in loader should also work as expected.
Concerning the error you're seeing: have you tried changing the file-type (aka renaming the file ending) from .js to .jsx?
Because the loader can discern between .js and .jsx files, however the interpreter cannot comprehend jsx-notation if it's not explicitely told to do so (as is the case with your .js files).

Is it safe to mark prop-types as peer dependency in your react module

How can I export my component's propTypes so when I include this package in my project, IDE can suggest them without affecting my bundle size ?
Or how the user may be able to get rid of them ?
Is it safe to mark prop-types as peeDependency since react includes it ?
I use rollup#1.27.13 and #babel/core#7.7.7 and few other plugins for each of them.
When I remove propTypes using the code bellow, my bundle size is 1.58kb gzipped
{
"presets": [
"#babel/preset-react",
["#babel/preset-env", {
"modules": false
}]
],
"plugins": [
["transform-react-remove-prop-types", {
"removeImport": true
}],
"#babel/plugin-proposal-optional-chaining"
]
}
But when I leave them (and then I can get suggestions by IDE) it jumps to 6.45kb gzipped.
rollup config:
{
input: 'src/index.js',
output: [
{
file: pkg.main,
format: 'cjs'
},
{
file: pkg.module,
format: 'es'
}
],
plugins: [
external(),
babel({
exclude: 'node_modules/**'
}),
resolve(),
commonjs(),
terser()
],
}
Thanks

r.js disable drop_debugger option

I'm trying to create a build config file for r.js with uglify2 as optimizer.
I want to disable the drop_debugger so the debugger statement does not get removed.
Below is my build.js file, the build process works fine but the debugger statements have been removed.
Is maybe r.js removing these, what am i doing wrong ?
({
appDir: ".",
baseUrl: ".",
dir: "../app-build",
paths: {
'css-builder': 'lib/require/css-builder'
},
optimize: "uglify2",
uglify2: {
"screw-ie8": true,
compress: {
sequences: true,
dead_code: true,
drop_debugger: false,
}
},
mainConfigFile: "main.js",
modules: [
{
name: "main",
include: "signalR"
}
]
})

Remove the trailing comma from:
drop_debugger: false

Categories

Resources