webpack创建library及从零开始发布一个npm包,用户登

作者: 前端知识  发布:2019-12-07

创建library

  • 完整代码
  • 核心代码为
    output: {
        path: DIST_PATH,
        publicPath: "",
        chunkFilename: "[name].js",
        filename: "testPlugin.js",
        libraryTarget: 'umd',//将你的 library 暴露为所有的模块定义下都可运行的方式
        library: 'testPlugin'
    },
  • 打包出来后我们会得到一个testPlugin.js,这就是我们自己的三方库。

    平台项目中使用

  • 项目中设置externals,目的是使自己项目不会重复打包引入的库

    externals: {
        testPlugin:"testPlugin",
    },
  • 项目引入
<!--index.html-->
<script src="testPlugin.js"></script>

//index.js
import testPlugin from 'testPlugin';
console.log(testPlugin);
  • 项目打包好
  • 将testPlugin库丢入打包好的dist中
  • 会发现平台项目已经成功引入库
  • 这样会发现只有打包好dist再丢入库才可以看到效果,平时开发环境下怎么办呢,可以使用copy-webpack-plugin,及将静态的文件夹自动拷贝到dist
const copyWebpackPlugin = require('copy-webpack-plugin');

    plugins: [
        new copyWebpackPlugin([{
            from:__dirname '/src/static',//打包的静态资源目录地址
            to:'./static' //打包到dist下面的static
        }]),
    ...
    ]
  • 然后只需要改改index.html的引入地址
<script src="static/plugin/testPlugin/testPlugin.js"></script>
修改 maven 中央仓库地址

国外的 maven中央仓库国内访问起来比较慢,改用阿里云提供的中央仓库镜像。在build.gradle中添加阿里云仓库镜像的地址如下:

repositories { maven { url 'https://maven.aliyun.com/repository/central' } mavenCentral()}

最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现。

使用表单 FormControl
import FormControl from '@material-ui/core/FormControl';import Input from '@material-ui/core/Input';import InputLabel from '@material-ui/core/InputLabel';

最后

大家好,这里是「 TaoLand 」,这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客,希望和大家多多交流,一起成长!文章将会在下列地址同步更新……
个人博客:www.yangyuetao.cn
小程序:TaoLand

使用 React前端组件库 Material-UI

React Material-UI ( Material Design 设计语言的 React 组件。它在 GitHub 上的 Star 数> 4w,fork>8k,可能是最受欢迎的 React 组件库了,目前最新版本是 v3.4.0。

下面我们来一步一步安装Material-UI——这个世界上最受欢迎的React UI框架。Material-UI 可作为 npm 包使用。

安装核心依赖

npm install @material-ui/core

等待依赖安装完毕,我们可以看到,此时我们的package.json文件内容新增了 "@material-ui/core": "^3.4.0" 的依赖:

"dependencies": { "@material-ui/core": "^3.4.0", "react": "^16.6.1", "react-dom": "^16.6.1"}

为了使用预构建的SVG Material icons,例如在组件演示中找到的那些, 须先安装 @material-ui/icons包:

npm install @material-ui/icons

详细使用参考:

下面我们就来使用Material UI组件库,来开发一个简单的登陆表单页面。这个表单页面的最终效果如下图:

图片 1image

自己发布的react小插件

------传送门------

写一个 Rest 接口Hello World

下面我们就来写一个 Rest 接口。代码如下:

package com.easy.springboot.simpleloginbackend.controllerimport org.springframework.web.bind.annotation.GetMappingimport org.springframework.web.bind.annotation.RestController@RestControllerclass HelloWorldController { @GetMapping(value = ["/hello"]) fun hello(): String { return "Hello World!" }}

重启应用,再次访问 , 页面输出:Hello World!

如果想更改服务端口,只需要在 application.properties 中添加如下配置:

server.port=9000

发布准备

  • 自己的项目
  • 去npm官网,注册账号。
  • 给自己的npm包想个名字,并通过搜索验证是否没有被占用

    ### 改写项目webpack配置

  • 核心,同上面的创建library一样

  • 生产环境配置webpack.config.prod.js
//webpack.config.prod.js  
    entry: {
        component: ['./src/component/Expression/Expression.js']
    },
    output: {
        path: DIST_PATH,
        filename: '[name].js',
        publicPath: "/dist/",
        libraryTarget: 'umd',
        library: 'expression'
    },
    externals: {
        'react': 'react',//因为引入的肯定是react项目,所以不需要再将react打包进npm包
        'react-dom': 'react-dom'
    },
  • 开发环境配置webpack.config.dev.js
//webpack.config.dev.js
    entry: {
        app: ['./src/index.js'],
        component: ['./src/component/Expression/Expression.js']
    },
  • 这样设置之后打包出来只有一个component.js,所以需要修改package的main
  • 修改package.json
  "main": "dist/component.js",
  • package的其他设置

    • 另外package里面的name就是你包的名字
    • version是版本号
    • main是入口文件
    • description是描述
    • repository是线上git地址
    • keywords是关键字,比较重要,别人可以通过这个搜索到你的包
    • author是作者

      ### 做完这些就可以发布了

  • npm login

    • 会让你输入账号,密码,邮箱,然后就登陆了
  • 登录成功会出现以下提示信息:Logged in as simbawu on https://registry.npmjs.org/.
    • 注意:如果不是这个,而是我们的其他镜像比如淘宝的,需要先切换回来,否则提交不起npm config set registry https://registry.npmjs.org/,然后再次npm login。
  • npm publish发布
    • 若出现包名和版本号则发布成功
      图片 2
package-lock.json的作用

我们有看到上面的目录中,多了一个package-lock.json文件。这个文件是干嘛用的呢?其实用一句话来概括很简单,就是锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致。

根据官方文档,这个package-lock.json 是在 npm install时候生成一份文件,用以记录当前状态下实际安装的各个npm package的具体来源和版本号。它有什么用呢?因为npm是一个用于管理package之间依赖关系的管理器,它允许开发者在pacakge.json中间标出自己项目对npm各库包的依赖。你可以选择以如下方式来标明自己所需要库包的版本。

这里举个例子:

"dependencies": { "@types/node": "^8.0.33",}

这里面的向上标号^是定义了向后兼容依赖,指如果 types/node的版本是超过8.0.33,并在大版本号上相同,就允许下载最新版本的 types/node库包,例如实际上可能运行npm install时候下载的具体版本是8.0.35。

发布npm包

上面的方法的优点是:如果兄弟部门的三方库变了,只需要他们把打包好的库文件给我们,我们丢进去替换掉以前的就可以了,我们自己并不需要重新打包。

那发布npm包呢?自己没事又摸索了一波,并成功发布了一个可以对文本插入表情的react小插件。
------传送门------

登陆按钮事件处理

登陆按钮的前端代码如下:

<Button onClick={this.handleClick} variant="contained" color="primary" className={classes.button}> 登陆</Button>

其中,onClick 事件绑定当前LoginForm 类的handleClick 函数,代码如下:

handleClick { console.log(event.currentTarget); const username = document.getElementById('username').value const password = document.getElementById('password').value console.log({ username: username, password: password })};

这样我们可以在登陆页面,输入用户名、密码:

图片 3image

点击“登陆”,可以看到控制台的输出:

图片 4image

使用 Card 布局
import Card from '@material-ui/core/Card';import CardContent from '@material-ui/core/CardContent';
编写请求转发路由

编写一个控制器,把来自前端的请求 "", "/", "/index.html", "/index.htm" 路由到后端的视图index.html上。代码如下:

package com.easy.springboot.simpleloginbackend.controllerimport org.springframework.stereotype.Controllerimport org.springframework.web.bind.annotation.GetMapping@Controllerclass IndexController { @GetMapping(value = ["", "/", "/index.html", "/index.htm"]) fun index(): String { return "index" }}

重启应用,访问 , 我们会看到登陆表单页面。输入用户名、密码,点击登录

图片 5image

观察浏览器的控制台,我们可以看到请求成功信息:

图片 6image

请求响应值:

{"data":"username=jack,password=123456","success":true,"msg":""}

有了上面的前后端完整的开发流程作为基础,我们就可以连接数据库,判断用户名、密码是否存在;也可以在前端做出登录成功、失败的跳转提示等处理了。我们会在后面的章节中逐步介绍。

本章通过一个简单的用户登录表单的前端 React开发、后端 Spring Boot Kotlin开发的完整实例,给大家讲解了前后端分离开发的简单过程。当然,在实际的项目开发中,我们有一系列的自动化脚手架、构建工具插件等,我们会在其他章节中逐步介绍。

前端工程代码地址:

后端工程代码地址:

国内第一Kotlin 开发者社区公众号,主要分享、交流 Kotlin 编程语言、Spring Boot、Android、React.js/Node.js、函数式编程、编程思想等相关主题。

图片 7开发者社区 QRCode.jpg

简单前端表单校验

通常,我们会在前端页面对用户输入做一些合理性校验。例如,我们添加对用户名长度>3的校验。首先,监听用户的表单输入函数是 onChange, 用户名表单的 JSX代码如下:

<FormControl className={classes.formControl}> <InputLabel>用户名</InputLabel> <Input onChange={this.handleUsernameChange} autoFocus={true}/> <FormHelperText >{this.state.helperText}</FormHelperText></FormControl>

使用 FormHelperText 组件来提示用户输入的校验结果。显示的 helperText 存储在 state 中。

其中,handleUsernameChange函数的代码如下:

handleUsernameChange { console.log(event.currentTarget); if (event.currentTarget.value.length < 3) { this.setState({ // 更新 helperText 提示文本 helperText: '用户名长度不得小于3' }) } else { this.setState({ helperText: '' }) }};

为了能够在JSX代码中,可以直接使用onChange={this.handleUsernameChange}这样的语法:

<Input onChange={this.handleUsernameChange} autoFocus={true}/>

同时能够在handleUsernameChange()函数中使用 this.setState , 我们需要在构造函数提前绑定 this:

constructor { super; this.state = { helperText: '' }; // 这边绑定是必要的,这样 `this` (代表 LoginForm) 才能在回调函数中使用,例如:this.setState this.handleClick = this.handleClick.bind; this.handleUsernameChange = this.handleUsernameChange.bind;}

这样,我们在输入用户名的过程中,会看到实时提示:

图片 8image

环境准备

本节实例工程的运行环境和技术栈相关清单如下:

运行环境:JDK 8

编程语言:Java、Kotlin

Web 开发框架:Spring MVC,Spring Boot

ORM框架:Spring Data JPA

数据库:MySQL,客户端工具 mysql workbench

视图模板引擎:Freemarker

开发 IDE: IDEA

编写index.js和index.html文件

我们在 index.js 中引入我们上面的 App组件,代码如下:

import App from "./components/App";var ReactDOM = require('react-dom');ReactDOM.render( <App/>, document.getElementById;

其中,元素 id = 'App' 是我们下面在index.html 中指定的 div 。

在 index.html中引用 webpack 打包生成的bundle.js, 代码如下:

<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <title>Hello React!</title></head><body><div ></div><script src="dist/bundle.js"></script><!--引用webpack打包输出的bundle.js--></body></html>
build.gradle 配置文件

我们可以看到在工程的依赖:

dependencies { implementation('org.springframework.boot:spring-boot-starter-data-jpa') implementation('org.springframework.boot:spring-boot-starter-freemarker') implementation('org.springframework.boot:spring-boot-starter-web') implementation('com.fasterxml.jackson.module:jackson-module-kotlin') implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk8") implementation("org.jetbrains.kotlin:kotlin-reflect") runtimeOnly('mysql:mysql-connector-java') testImplementation('org.springframework.boot:spring-boot-starter-test')}

本章通过一个简单用户登录模块全栈开发案例,从前端 React工程的创建、开发,到后端 Spring Boot Kotlin Gradle工程的创建,使用 Spring Data JPA 来操作 MySQL数据库, 使用Freemarker视图引擎,从前往后完整的讲解整个开发过程。

视图文件默认后缀

然后,为了方便起见,我们把 Freemarker 的默认文件后缀名改成 .html, 这个配置在 application.properties中:

spring.freemarker.suffix=.html

创建 Spring Boot工程

接下来,我们创建一个使用 Kotlin编程语言,Gradle 来构建项目的 Spring Boot工程。浏览器访问: 创建工程如下图所示:

图片 9image

选择 Gradle Project,Kotlin编程语言,选择 Spring Boot 2.1.0 版本,然后在项目基本信息中,分别填入 Group、Artifact,起步依赖选择:Web,MySQL,JPA,Freemarker。 点击“Generate Project”,下载自动生成的样板工程,解压,导入到 IDEA中。

配置webpack

创建项目文件,最终结构如下:

图片 10image

文件说明如下:

  • app/index.js 入口文件

  • dist 用于盛放webpack打包输出的bundle.js

  • webpack.config.js 用于配置webpack环境。

编写webpack.config.js配置文件

const path = require;module.exports = { entry: "./app/index.js", //入口文件 output: { path: path.join(__dirname, "/dist/"), // 所有输出文件的目标路径,绝对路径! filename: "bundle.js" }, module: { rules: [ { test: /.js$/, //babel-loader将其他文件解析为js文件 exclude: /node_modules/, loader: "babel-loader", options: { presets: ["es2015", "react"] //babel-loader需要解析的文件 } } ] }};

webpack 开箱即用,可以无需使用任何配置文件。然而,webpack 会假定项目的入口起点为 src/index,然后会在 dist/main.js 输出结果,并且在生产环境开启压缩和优化。

通常,你的项目还需要继续扩展此能力,为此你可以在项目根目录下创建一个 webpack.config.js 文件,webpack 会自动使用它。

更多关于 webpack的配置说明参考:

环境准备

本节实例工程的运行环境和技术栈相关清单如下:

运行环境准备:Node

开发工具 IDE:WebStorm

浏览器:Chrome

框架和组件库:react, babel,jquery, material-ui

构建工具:webpack

我们用 webpack es6 来结合 react 开发前端应用。本章中,我们手动使用npm来安装各种插件,来从头到尾自己搭建环境。当然,在实际的项目开发中,已经有大神们开发好了脚手架,例如 create-react-app( webpack es6 的 React前端开发工程。

本文由金沙澳门官网发布于前端知识,转载请注明出处:webpack创建library及从零开始发布一个npm包,用户登

关键词: 金沙澳门官网