从搭建脚手架到在npm上发布react组件_ES2015(es6)

上一篇: webpack 配置 Vue 多页应用 ——... 下一篇:从0开始，自己实行webpack打包，...

从搭建脚手架到在npm上发布react组件

发布时间：2019-08-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了从搭建脚手架到在npm上发布react组件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

从搭建脚手架到在npm上发布react组件
最近公司给公司里架设了私有的npm仓库，相应地也需要一个用来发布react组件用的脚手架，在这个过程中又又又又复习了一下webpack，在这里分享下脚手架搭建的过程。
首先，我们预期的脚手架具有如下功能

开发组件时可以实时预览
对组件各种资源进行打包(js/css/图片等)
一键打包发布

1.创建项目
脚手架的名字暂时取react-simple-component-boilerplate。
首先创建一个新目录用于放我们的文件:

      
      
      
      
      
mkdir react-simple-component-boilerplate
cd react-simple-component-boilerplate
使用npm命令创建一个项目

      
      
      
      
      
npm inIT
接下来会提示你输入项目的名称、版本号、作者等，也可以一路回车，稍后修改。
这一步完成后，你的项目文件夹里应该有一个package.json文件了，这个文件保存了我们项目和组件的各种信息。
接下来创建如下的目录结构

      
      
      
      
      
react-simple-component-boilerplate
    |-- config // webpack配置
    |-- demo    // 开发时预览用
    |-- dist    // 打包结果
    |-- src     // 源文件目录
        | -- assets // 存放图片等媒体文件
        | -- style    // 存放样式，项目使用的是less来编写样式
2.安装依赖
既然我们要发布的是react组件，那依赖里肯定少不了react。
使用npm install安装下面的依赖

      
      
      
      
      
npm install react react-dom --save
打包工具选择的是webpack，下面是开发依赖，也需要一并安装

      
      
      
      
      
  "devDePEndencies": {
    // babel用于将你写的es6+的代码转换到ES5
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/plugin-PRoposal-class-properties": "^7.0.0", // 用于支持class属性
    "@babel/plugin-proposal-decorators": "^7.0.0", // 支持decorator
    "@babel/plugin-transform-modules-commonjs": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0", // 自动polyfill es5不支持的api特性
    "@babel/preset-env": "^7.0.0", // 根据目标环境来按需转码
    "@babel/preset-react": "^7.0.0", // 让babel支持react语法
    "babel-loader": "^8.0.0",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "htML-loader": "^0.4.4",
    "less-loader": "^4.1.0", // 使用less来编写样式
    "mini-css-extract-plugin": "^0.5.0", // 将css提取成一个单独的文件
    "style-loader": "^0.23.0",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2", // webpack4之后需要额外安装webpack-cli
    "webpack-dev-server": "^3.1.14", // 开发时预览组件所用的服务，在文件变化时会自动刷新页面
    "webpack-merge": "^4.1.4" // 用于合并webpack配置
  },
3.编写组件
在/src目录下新建一个index.js，这就是我们组件的入口文件了。
如果项目中要使用图片、css等，分类放到assets、style文件夹下就好。
下面我们就在index.js中写一个简单的组件

      
      
      button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="/* src/index.js */

import React From 'react';
import './style/style.less'; // 使用less的情况
import testPng from './assets/test.png'; // 使用图片的情况

export default class MyComponent extends Component {
    render(){
        return (A new Component)
    }
}" title="" data-original-title="复制">
      
      
/* src/index.js */

import React from 'react';
import './style/style.less'; // 使用less的情况
import testPng from './assets/test.png'; // 使用图片的情况

export default class MyComponent extends Component {
    render(){
        return (<div>A new Component</div>)
    }
}
接下来，我们在/demo目录下新建index.html和demo.js这两个文件用于在开发组件时预览组件效果。
index.html内容如下

      
      
      button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="


    
    Title





" title="" data-original-title="复制">
      
      
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="demo.bundle.js"></script>
</body>
</html>
在demo.js中，我们要使用一下刚刚写的组件(位于/src/index.js)看一下效果，开发中这个demo.js文件会被打包成demo.bundle.js，就是在上面index.html中引用的js。

      
      
      return 
    组件预览：
    
  
}

ReactDom.render(, document.getElementById('root'));" title="" data-original-title="复制">
      
      
import React from 'react';
import ReactDom from 'react-dom';
import MyComponent from '../src/index'

const Demo  = () => {
  return <div>
    <h1>组件预览：</h1>
    <MyComponent />
  </div>
}

ReactDom.render(<Demo />, document.getElementById('root'));
4.配置webpack和babel
4.1 配置webpack
在/config下我们建立三个webpack配置文件

webpack.base.js
webpack.config.dev.js // 开发时的配置
webpack.config.prod.js // 打包发布时的配置

由于开发和发布打包时webpack的配置有一部分是公共而且重复的，我们把这部分的配置单独拿出来放到webpack.base.js中。
首先是公共配置webpack.base.js:

      
      
      
      
      
module.exports = {
  module: {
    rules: [
      { // 在webpack中使用babel需要babel-loader
        test: /.js?$/,
        loader: 'babel-loader',
        exclude: '/node_modules/',
      },
      { // 用于加载组件或者css中使用的图片
        test: /.(jpg|jpeg|png|gif|cur|ico|svg)$/,
        use: [{
          loader: 'file-loader', options: {
            name: "images/[name][hash:8].[ext]"
          }
        }]
      }
    ]
  }
}
下面是开发时所用的webpack配置，写在webpack.config.dev.js中

      
      
      
      
      
const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js'); // 引用公共的配置

const devconfig = {
  entry: './demo/demo.js', // 入口文件
  mode: 'development', // 打包为开发模式
  output: {
    filename: 'demo.bundle.js', // 输出的文件名称
    path: path.resolve(__dirname, '../demo') // 输出的文件目录
  },
  devServer: { // 该字段用于配置webpack-dev-server
    contentBase: path.join(__dirname, '../demo'),
    comPress: true,
    port: 9000, // 端口9000
    open: true // 自动打开浏览器
  },
  module: {
    rules: [
      { // 编译less
        test: /.less$/,
        exclude: '/node_modules/',
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }, {
          loader: 'less-loader'
        }]
      },
    ]
  },
}

module.exports = merge(devConfig, baseConfig); // 将baseConfig和devConfig合并为一个配置
需要注意的是，等会使用webpack-dev-sevrer启动开发服务时，并不会实际在demo文件夹下生成demo.bundle.js，打包好的文件是在内存中的，但并不影响我们使用。
下面是打包发布时所用的webpack配置，写在webpack.config.prod.js中

      
      
      
      
      
const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 用于将组件的css打包成单独的文件输出到`dist`目录中

const devConfig = {
  entry: './src/index.js',
  mode: 'production',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'index.js', // 输出文件
    libraryTarget: 'umd', // 采用通用模块定义, 注意webpack到4.0为止依然不提供输出es module的方法，所以输出的结果必须使用npm安装到node_modules里再用，不然会报错
    library: 'react-simple-component-boilerplate', // 库名称
    libraryExport: 'default', // 兼容 ES6(ES2015) 的模块系统、CommonJS 和 AMD 模块规范
  },
  externals: {
    react: {
      root: "React",
      commonjs2: "react",
      commonjs: "react",
      amd: "react"
    },
    "react-dom": {
      root: "ReactDOM",
      commonjs2: "react-dom",
      commonjs: "react-dom",
      amd: "react-dom"
    }
  },
  module: {
    rules: [{
      test: /.(le|c)ss$/,
      use: [
        MiniCssExtractPlugin.loader,
        "css-loader",
        {
          loader: "less-loader",
          options: {
            sourceMap: false
          }
        }
      ]
    }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "main.min.css" // 提取后的css的文件名
    })
  ],
}

module.exports = merge(devConfig, baseConfig);
上面我们配置了externals字段，这一点非常重要。
externals定义了外部依赖。将react和react-dom添加进该字段，说明我们的组件将依赖外部的react和react-dom，这样就可以避免把react和react-dom打包进去（不然组件会很大）
4.1 配置babel
我们需要用babel把我们的代码编译成es5版本。在项目根目录新建一个.babelrc文件，输入以下内容。

      
      
      
      
      
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead"
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-modules-commonjs",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}
我们在presets其中使用了preset-env, 规定了输出的代码目标环境是份额大于0.25%的浏览器。另外由于我们的项目里使用了react，presets中就要加入preset-react。
同时，plugins配置了一些babel插件，用于支持装饰器展开操作符等类内直接定义属性等新的es特性。
4.3 配置启动命令
我们再次回到项目根目录下的package.json中，编辑如下

      
      
      
      
      
  "scripts": {
    "build": "set NODE_ENV=production && webpack --config ./config/webpack.config.prod.js",
    "pub": "npm run build &amp;& npm publish",
    "dev": "webpack-dev-server --config ./config/webpack.config.dev.js"
  },
  "main": "dist/index.js",
  "files": ["dist"]


build 命令用于打包组件

dev 命令会使用webpack-dev-server启动一个开发服务用于预览组件效果

pub 命令进行打包组件并且发布到npm上

main字段指定了我们的组件的入口文件，files字段用于指定我们的npm包的文件目录。
5.试用和发布
要发布一个npm包，我们需使用如下命令添加一个npm的账号，如果已经添加过的这一步可以跳过。

      
      
      
      
      
npm adduser
如果已经有npm账号，可以使用npm LOGin登陆。
如果不知道自己是否已经添加过了npm账号，使用npm whoami查看登陆信息即可
接下来就编辑package.json把组件的名称/版本/介绍等字段都填写一下。
好了，接下我们先使用npm run dev命令，此时会自动打开默认浏览器预览组件。
如果没什么问题的话，接下来使用npm run pub进行打包和发布。
等待发布完成后，我们就下载安装一下。

      
      
      
      
      
npm i your-component // 假设你的包名字叫your-component
使用自己发布的组件

      
      
      
      
      
import YourComponent from 'your-component';
import 'your-component/dist/main.min.css'; // 如果给组件写了样式，需要手动导入css文件
6.总结
到这里，一个非常非常简单的用于发布react小组件的脚手架就搭好了，总结一下其中要注意的地方:

webpack打包时libraryTarget要使用umd
externals 里要把外部依赖配置好
如果还要生成es module，可以额外使用gulp或rollup等工具
webpack4 之后建议使用MiniCssExtractPlugin来提取css

脚本宝典总结

以上是脚本宝典为你收集整理的从搭建脚手架到在npm上发布react组件全部内容，希望文章能够帮你解决从搭建脚手架到在npm上发布react组件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：all all babel break break button button char char Class const const const default default div do document DOM es5 es6 export export export extends false false for for form form function function function if image image images Import in in java Map Map name name new new node open open option option package package plugin plugin post-format-gallery React reset reset return return return select true try undefined undefined

上一篇: webpack 配置 Vue 多页应用 ——... 下一篇:从0开始，自己实行webpack打包，...

猜你在找的ES2015(es6)相关文章

vuex 基本入门和使用（二） 2019-08-19
默认参数如何在JavaScript ES6中工作 2018-11-14
JavaScript ES6功能：好的部件 2018-11-14
如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12

全站导航更多

最新ES2015(es6)教程

热门ES2015(es6)教程