Skip to content

建立一個npm server並且publish到這個server上;與一個React Component的package

Notifications You must be signed in to change notification settings

tonyex52/npm-server-test

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm-server-test

  • create a npm registry server with sinopia

    • npm install -g sinopia
    • yarn global add sinopia
  • run the npm registry server with your url

    • sinopia -l http://IP:PORT
  • set registry url(it's not necessary, you just use yarn add --registry http://IP:PORT PACKAGE_NAME)

    • npm config edit
    • set registry to http://IP:PORT
  • initially, add user to the npm registry server

    • npm adduser --registry http://IP:PORT
  • set the package.json

{
  "publishConfig": {
    "registry": "http://IP:PORT"
  }
}
  • reset the registry url
    • https://registry.npmjs.org/

storybook

  • npm install or use yarn

    • npm i --save-dev @storybook/react @storybook/addon-actions @storybook/addon-knobs @storybook/addon-links @storybook/addon-options babel-core
    • npm 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, '../')
      }
    ]
  }
}

export React Component module with webpack and babel

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

initial session

install package

yarn add -D webpack babel-loader babel-preset-env webpack-cli

package.json

modify the main path to the dist folder

for my example folder dist/index.js

add two script to build the transpile file

  "scripts": {
    "build": "webpack --mode production --config ./.storybook/webpack.config.js",
    "prepublish": "npm run build"
  }

webpack.config.js

{
  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']
          }
        }
      }
    ]
  }
}

create src entry

use module.exports to include the React Component Module(Object)

build the module and creact the symbolic link node_module

  • enter the following command
yarn prepublish
npm link

now, you can publish it & enjoy it!

npm publish

About

建立一個npm server並且publish到這個server上;與一個React Component的package

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published