react-template-library-ema
Create react library
WEBPACK CONFIG LIBRARY
-
npm init
-
add in package.json pear dependencies (so this lib. will have exact same version as project that use it)
-
create src dir and add code
-
install webpack, webpack-cli as deve dependecies to bundle js in one js file
- create webpack.config and add entry file, output file name, mode
- output should have filename, path, libraryTarget: umd, library (this is library name)
-
ito transpile js file you need balbel:
- install babel-cli, babel-core
- install babel-loader to connect babel with webpack and add as rules in module part in wp config file
- install babel/preset-env to say what sintax it will transpile (babel-env. preset-flow, preset-react) and add in .babelrc as presets
- install "@babel/plugin-proposal-class-properties" and add in babelrc as plugins
-
.browserlistrc file
-
in wp config set extrnal dependencies which will not be bundled: set i.e. react as extrnal react: { root: "React", commonjs2: "react", commonjs: "react", amd: "react" }
-
in package.json change main file to be file we build with webpack!!
-
publish lib
- npm login
- npm publish —access=public
-
add jest for testing
Note: because of install-peers, running npm i will install dev, prod and peers dep!
To test this library, I set up the react app : https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658
1. create public folder which will have static files - index.html
2. in index.html add script with my bundled and transpiled file and add div which will contain react components
3. instal webpack-dev-server to serve app