美文网首页
打包一个react组件并发布到npm上

打包一个react组件并发布到npm上

作者: 名侦探柯妍 | 来源:发表于2020-07-01 20:40 被阅读0次

    准备

    创建仓库

    我们随便取一个仓库名one-antd-test


    image.png

    复制仓库地址备用。


    WeChat57685c7fd6038e97d350e43dd6b3ec12.png
    随便添加一个文件,我们可以添加一个README.md
    WeChatad8986710238b5223c28dfbed9b4aabb.png

    建立本地分支

    $ git clone [刚才复制的git地址]

    $ cd one-test-antd

    初始化 生成package.json文件

    $ npm init (根据提示一路回车,最后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", // 设置环境变量
        "build": "export NODE_ENV='production' && webpack"
      },
    

    配置webpack

    先看下我们预期的目录结构


    image.png
    • public/index.html 我们放一个html模板文件
    • src/app.js 本地运行时入口文件
    • src/components 存放组件
    • src/components/NewButton 简单写一个示例组件

    webpack.config.js

    const path = require('path');
    const NODE_ENV = process.env.NODE_ENV; // 获取环境变量
    const isProd = NODE_ENV === 'production';
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 每次构建清除上一次打包出来的文件
    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 start 本地运行成功,接下来试下生产环境 npm run build

    如果出现 “This is probably not a problem with npm. There is likely additional logging output above.” 报错 可以尝试 $ rm-rf node_modules && npm i 删除之前的依赖重新安装。

    提交代码到仓库

    根目录下建一个.gitignore文件 屏蔽一些不需要提交到git上的文件

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

    $ git add .

    $ git commit -m "create a package"

    $ git push

    发布

    $ npm login 登录 根据提示输入账号、密码、邮箱

    $ npm publish (注意publish命令只能用npm 不能用cnpm之类)
    如果发布不成功,改一下package.json里的name换个包名(有可能是包名和其他包重复了)

    相关文章

      网友评论

          本文标题:打包一个react组件并发布到npm上

          本文链接:https://www.haomeiwen.com/subject/jpotqktx.html