git 创建webpack项目_近期总结：手动搭建react项目，将项目从自己的库引入到新的项目中使用...

背景：最近公司有这样一个需求，需要开发一个react工具类，这个工具类可以用在其他项目里使用，并且这个工具类比较大，需要多人协作开发。

这个项目主要由同事负责，于是同事就将这个工具类当成一个单独的项目，之后将其打包放在公司的代码仓库中，随后只要在其他地方引入该库就可，即在package.json中用到下面这段代码。

git+https://github.com/dadafrank/UIWeb.git

并且还手动搭建了工具类的开发环境，为了总结最近学到的东西，自己也来手动试试。

开始搭建工具类的开发环境

首先，创建在指定地方创建文件夹，并打开。

mkdir test-react

初始化npm和git

npm init -ygit init

创建一下项目的整体结构和基本文件，在项目下创建public、webpack、src文件夹。

因为是react项目，所以先安装一下react和react-dom

npm i react react-dom

在src下创建components文件夹，并在components下创建一个demo.js的文件夹

import React from 'react'const Demo = () => {return (<div>这就是大家都需要的组件</div>)
}export default Demo;

在src下创建一个index.js

import React from 'react'
import reactDom from 'react-dom'import Demo from './components/demo.js'const App = () => {return (<><Demo /></>)
}reactDom.render(<App/>, document.getElementById('root'));

在public下创建一个index.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>react项目</title>
</head>
<body><div id="root"></div>
</body>
</html>

安装webpack的基础依赖包

npm i webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader @babel/core @babel/preset-react @babel/preset-env -D

然后创建webpack的配置文件，分别创建webpack.config.dev.js、webpack.config.prod.js两个文件。

webpack.config.dev.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');const htmlWebpackPlugin = new HtmlWebpackPlugin({template: path.resolve(__dirname, '../public/index.html'),
});module.exports = {mode: 'development',                              entry: path.resolve(__dirname, '../src/index.js'),output: {                                         path: path.resolve(__dirname, '../dist'),      filename: 'js/[name].[hash].bundle.js',         },module: {rules: [              {test: /.(mjs|js|jsx)$/,exclude: /node_modules/,use: ['babel-loader'],}],},plugins: [htmlWebpackPlugin,],resolve: {extensions: ['.mjs', '.js', '.jsx'],},devServer: { // 这部分根据自己的需求设置host: '127.0.0.1',port: 8009,hot: true,// proxy: {//  'api': {//      target: 'http://xx.xx.xx.xx:xxxx',//      pathRewrite: {//          '^/api': '/api'//      },//      changeOrigin: true,//  }// }}
};

webpack.config.prod.js

const path = require('path');module.exports = {mode: 'production',                         entry: path.resolve(__dirname, '../src/components/demo.js'),output: {                                         path: path.resolve(__dirname, '../dist'),      filename: 'index.js',    libraryTarget: 'umd',libraryExport: 'default',library: "testReact",    },module: {rules: [              {test: /.(mjs|js|jsx)$/,exclude: /node_modules/,use: ['babel-loader'],}],},resolve: {extensions: ['.mjs', '.js', '.jsx'],},
};

项目下创建babel的配置文件.babelrc

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

在package.json的scripts下添加两条命令

"start": "webpack-dev-server --config ./webpack/webpack.config.dev.js --progress",
"build": "webpack --config ./webpack/webpack.config.prod.js --progress"

ok，这样基本的环境配置应该就没问题，测试一下。

测试

执行npm run start

解决问题

上网查了一下发现是版本不匹配的问题，所以我换了一个webpack-cli

npm i webpack-cli@3.3.12 -D

再次测试

再次执行npm run start

没有报错，说明可以了，输入http://localhost:8009/看看

这就说明可以了，执行一下npm run build也能看到项目下多了一个dist文件夹，ok，这样项目就能在本地运行了。然后准备在其他项目引入此项目，首先我们需要修改一下package.json中修改一下main。

"main": "dist/index.js",

这样其他项目就知道用dist的index.js了。

将项目发布到仓库上

我这里用的是码云，在码云上创建仓库就直接省略啦。直接开始上传到仓库上的操作。

git add ***
git commit -m "第一次发布"
git remote add origin https://gitee.com/xxFrank/test-react.git
git push --set-upstream origin master

这里的add因为我没有写.gitignore文件的原因，所以自己慢慢add，大家注意不要把/node_modules给传上去了。

在新项目中将工具项目引入

为了方便，我直接用create-react-app来新建一个项目。

npx create-react-app new-react

随后，在新项目中的package.json的devDependencies中添加下面的代码。

"devDependencies": {"testReact": "git+https://gitee.com/xxFrank/test-react.git"},

然后再执行一次npm i，完成后在App.js中引入我们的工具。

import React from 'react'
import TestReact from 'testReact'function App() {return (<div className="App"><div>这里新项目，下面是引入的组件</div><TestReact /></div>);
}export default App;

执行npm run start，然后打开http://localhost:3000看看能不能用。

okok，这样说明我们就成功了。当然刚才我们手动搭建的项目还需要自己去添加css、图片等等的配置，大家有时间可以自己去试试，我就不重复写了。

呜呜呜，终于写好了，溜了溜了。