-
create a npm registry server with sinopia
npm install -g sinopiayarn global add sinopia
-
run the npm registry server with your url
sinopia -l http:https://IP:PORT
-
set registry url(it's not necessary, you just use
yarn add --registry http:https://IP:PORT PACKAGE_NAME)npm config edit- set registry to
http:https://IP:PORT
-
initially, add user to the npm registry server
npm adduser --registry http:https://IP:PORT
-
set the package.json
{
"publishConfig": {
"registry": "http:https://IP:PORT"
}
}- reset the registry url
https://registry.npmjs.org/
-
npm install or use yarn
npm i --save-dev @storybook/react @storybook/addon-actions @storybook/addon-knobs @storybook/addon-links @storybook/addon-options babel-corenpm i --save react react-dom webpack style-loader css-loader sass-loader less-loader
-
add package.json scripts
{
"scripts": {
"storybook": "start-storybook -p 9001 -c .storybook"
}
}- create storybook configuration config.js in .storybook folder
import { configure } from '@storybook/react';
function loadStories() {
const req = require.context('../modules', true, /\.stories\.js$/)
req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module);- create webpack.config.js in .storybook
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.[scss|less]$/,
loaders: ["style-loader", "css-loader", "sass-loader", "less-loader"],
include: path.resolve(__dirname, '../')
}
]
}
}my file structure
-> .storybook*
-> webpack.config.js
-> modules*
-> test*
-> index.js
-> test.stories.js
-> test2*
-> index.js
-> test2.stories.js
-> src*
-> index.js
-> dist*
-> index.js (made from webpack)
-> package.json
yarn add -D webpack babel-loader babel-preset-env webpack-cli
for my example folder
dist/index.js
"scripts": {
"build": "webpack --mode production --config ./.storybook/webpack.config.js",
"prepublish": "npm run build"
}{
entry: path.resolve(__dirname, '../src/index.js'),
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname, '../'),
exclude: [/bower_components/, /node_modules/, /styles/],
use: {
loader: 'babel-loader',
options: {
presets: ['babel-preset-env', 'react']
}
}
}
]
}
}- enter the following command
yarn prepublish
npm linknpm publish