準(zhǔn)備

• Node環(huán)境
• GitHub http://www.itdecent.cn/p/7edb6b838a2e （for mac）
  https://blog.csdn.net/qazwsxpcm/article/details/68946736 （for windows）
• npm上注冊(cè)賬號(hào) https://www.npmjs.com/

創(chuàng)建倉(cāng)庫(kù)

我們隨便取一個(gè)倉(cāng)庫(kù)名one-antd-test

image.png

復(fù)制倉(cāng)庫(kù)地址備用。

WeChat57685c7fd6038e97d350e43dd6b3ec12.png

WeChatad8986710238b5223c28dfbed9b4aabb.png

建立本地分支

$ git clone [剛才復(fù)制的git地址]

$ cd one-test-antd

初始化 生成package.json文件

$ npm init (根據(jù)提示一路回車，最后yes)

安裝依賴

$ npm i -S react react-dom

$ npm i -D webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react @babel-loader css-loader style-loader html-webpack-plugin webpack-dev-server clean-webpack-plugin webpack-node-externals

修改package.json文件

"main": "dist/bundle.js", 
"files": ["dist"],
"scripts": {
    "start": "export NODE_ENV='development' && webpack-dev-server",
    "dev": "export NODE_ENV='development' && webpack-dev-server", // 設(shè)置環(huán)境變量
    "build": "export NODE_ENV='production' && webpack"
  },

配置webpack

先看下我們預(yù)期的目錄結(jié)構(gòu)

image.png

• public/index.html 我們放一個(gè)html模板文件
• src/app.js 本地運(yùn)行時(shí)入口文件
• src/components 存放組件
• src/components/NewButton 簡(jiǎn)單寫一個(gè)示例組件

webpack.config.js

const path = require('path');
const NODE_ENV = process.env.NODE_ENV; // 獲取環(huán)境變量
const isProd = NODE_ENV === 'production';
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 每次構(gòu)建清除上一次打包出來(lái)的文件
const nodeExternals = require('webpack-node-externals');
const plugins = isProd ? [new CleanWebpackPlugin()] : [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin({
    template: 'public/index.html'
  }),
]

module.exports = {
  mode: isProd ? 'production' : 'development',
  entry: isProd ? './src/components/index.js' : './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
    libraryTarget: isProd ? 'commonjs2' : undefined,  // 包需要被module.exports，這就要用到common
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
    ]
  },
  devServer: {
    contentBase: './dist'
  },
  externals: isProd ? [nodeExternals()] : [], // nodeExternals 使得打包的組件中不包括任何 node_modules 里面的第三方組件，起到減小體積的作用。
  plugins,
};

.babelrc babel的配置文件

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

src/components/NewButton/index.js

import React from 'react';
import './index.css';

export default function NewButton(props) {
  return (
  <button style={{ color: 'red' }} className="btn-style">{props.name}</button>
  )
}

src/components/NewButton/index.css

.btn-style {
  border-color: blue;
}

src/components/index.js

export { default as NewButton } from './NewButton/index';

src/app.js

import React from 'react';
import ReactDOM from 'react-dom';
import { NewButton } from './components';

function App() {
  return (
    <NewButton name="新按鈕" />
  )
}

ReactDOM.render(<App />, document.getElementById('root'));

npm run build

如果出現(xiàn) “This is probably not a problem with npm. There is likely additional logging output above.” 報(bào)錯(cuò) 可以嘗試 $ rm-rf node_modules && npm i 刪除之前的依賴重新安裝。

提交代碼到倉(cāng)庫(kù)

根目錄下建一個(gè).gitignore文件 屏蔽一些不需要提交到git上的文件

/node_modules
/dist
/build
.DS_Store
npm-debug.log*

$ git add .

$ git commit -m "create a package"

$ git push

發(fā)布

$ npm login 登錄 根據(jù)提示輸入賬號(hào)、密碼、郵箱

$ npm publish (注意publish命令只能用npm 不能用cnpm之類)
如果發(fā)布不成功，改一下package.json里的name換個(gè)包名（有可能是包名和其他包重復(fù)了）