转载请注明预见才能遇见的博客:http://my.csdn.net/ <http://my.csdn.net/>

原文地址:https://blog.csdn.net/pcaxb/article/details/82014500
<https://blog.csdn.net/pcaxb/article/details/82014500>

React+Webpack4.0+ES6+Antd最新版环境搭建详解-2018年

目录

React+Webpack4.0+ES6+Antd最新版环境搭建详解-2018年
<https://blog.csdn.net/pcaxb/article/details/82014500#React%2BWebpack4.0%2BES6%2BAntd%E6%9C%80%E6%96%B0%E7%89%88%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA%E8%AF%A6%E8%A7%A3-2018%E5%B9%B4>

1.NodeJs 安装和配置
<https://blog.csdn.net/pcaxb/article/details/82014500#1.NodeJs%C2%A0%E5%AE%89%E8%A3%85%E5%92%8C%E9%85%8D%E7%BD%AE>

1.从官网下载最新版本的node.js安装
<https://blog.csdn.net/pcaxb/article/details/82014500#1.%E4%BB%8E%E5%AE%98%E7%BD%91%E4%B8%8B%E8%BD%BD%E6%9C%80%E6%96%B0%E7%89%88%E6%9C%AC%E7%9A%84node.js%E5%AE%89%E8%A3%85>

2.安装完Node之后,测试Node安装是否成功,终端执行node -v查看
<https://blog.csdn.net/pcaxb/article/details/82014500#2.%E5%AE%89%E8%A3%85%E5%AE%8CNode%E4%B9%8B%E5%90%8E%2C%E6%B5%8B%E8%AF%95Node%E5%AE%89%E8%A3%85%E6%98%AF%E5%90%A6%E6%88%90%E5%8A%9F%EF%BC%8C%E7%BB%88%E7%AB%AF%E6%89%A7%E8%A1%8Cnode%20-v%E6%9F%A5%E7%9C%8B>

3.安装完Node之后,为了保证速度,需要使用淘宝镜像,命令如下:
<https://blog.csdn.net/pcaxb/article/details/82014500#3.%E5%AE%89%E8%A3%85%E5%AE%8CNode%E4%B9%8B%E5%90%8E%EF%BC%8C%E4%B8%BA%E4%BA%86%E4%BF%9D%E8%AF%81%E9%80%9F%E5%BA%A6%EF%BC%8C%E9%9C%80%E8%A6%81%E4%BD%BF%E7%94%A8%E6%B7%98%E5%AE%9D%E9%95%9C%E5%83%8F%EF%BC%8C%E5%91%BD%E4%BB%A4%E5%A6%82%E4%B8%8B%3A>

2.WebPack全局安装 和 NPM查询全局安装包
<https://blog.csdn.net/pcaxb/article/details/82014500#2.WebPack%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85%C2%A0%E5%92%8C%C2%A0NPM%E6%9F%A5%E8%AF%A2%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85%E5%8C%85>

1.安装完nodejs之后,打开终端,全局安装webpack,执行命令:
<https://blog.csdn.net/pcaxb/article/details/82014500#1.%E5%AE%89%E8%A3%85%E5%AE%8Cnodejs%E4%B9%8B%E5%90%8E%2C%E6%89%93%E5%BC%80%E7%BB%88%E7%AB%AF%2C%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85webpack%EF%BC%8C%E6%89%A7%E8%A1%8C%E5%91%BD%E4%BB%A4%3A>

2.NPM全局安装包查询
<https://blog.csdn.net/pcaxb/article/details/82014500#2.NPM%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85%E5%8C%85%E6%9F%A5%E8%AF%A2>

3.创建React + webpack + ES6项目 + 配置
<https://blog.csdn.net/pcaxb/article/details/82014500#3.%E5%88%9B%E5%BB%BAReact%20%2B%C2%A0webpack%20%2B%C2%A0ES6%E9%A1%B9%E7%9B%AE%20%2B%C2%A0%E9%85%8D%E7%BD%AE>

1.创建一个目录,目录名为react-webpack
<https://blog.csdn.net/pcaxb/article/details/82014500#1.%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E7%9B%AE%E5%BD%95%EF%BC%8C%E7%9B%AE%E5%BD%95%E5%90%8D%E4%B8%BAreact-webpack>

2.创建package.json 文件
<https://blog.csdn.net/pcaxb/article/details/82014500#2.%E5%88%9B%E5%BB%BApackage.json%20%E6%96%87%E4%BB%B6>

3.添加开发依赖包及插件 devDependencies
<https://blog.csdn.net/pcaxb/article/details/82014500#3.%E6%B7%BB%E5%8A%A0%E5%BC%80%E5%8F%91%E4%BE%9D%E8%B5%96%E5%8C%85%E5%8F%8A%E6%8F%92%E4%BB%B6%C2%A0devDependencies>

4.添加产品依赖包及插件 dependencies
<https://blog.csdn.net/pcaxb/article/details/82014500#4.%E6%B7%BB%E5%8A%A0%E4%BA%A7%E5%93%81%E4%BE%9D%E8%B5%96%E5%8C%85%E5%8F%8A%E6%8F%92%E4%BB%B6%C2%A0dependencies>

5.webpack 配置 
<https://blog.csdn.net/pcaxb/article/details/82014500#5.webpack%C2%A0%E9%85%8D%E7%BD%AE%C2%A0>

6.package.json文件配置 
<https://blog.csdn.net/pcaxb/article/details/82014500#6.package.json%E6%96%87%E4%BB%B6%E9%85%8D%E7%BD%AE%C2%A0>

7.   配置 .babelrc
<https://blog.csdn.net/pcaxb/article/details/82014500#7.%C2%A0%20%C2%A0%E9%85%8D%E7%BD%AE%20.babelrc>

8.缺少node_modules 安装
<https://blog.csdn.net/pcaxb/article/details/82014500#8.%E7%BC%BA%E5%B0%91node_modules%C2%A0%E5%AE%89%E8%A3%85>

React是一个Facebook和Instagram用来创建用户界面的JavaScript库,是现在最热门的前端框架。Webpack
是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过
loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、
JSON、Coffeescript、 LESS 等。ECMAScript
6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。


webpack的模块化,react的组件化,以及es2015的各种新特性都很吸引人,网上也有很多入门的资料,但是很多都是偏概念的,本文将结合实际开发来搭建整个环境。下面我们进入正题:

1.NodeJs 安装和配置

1.从官网下载最新版本的node.js安装


官网下载地址:

http://nodejs.org/en/ <http://nodejs.org/en/>

官网需要翻墙,如果没有翻墙的同学可以到nodejs中文网下载,下载地址:

http://nodejs.cn <http://nodejs.cn>

如果你需要使用Mac Homebrew安装nodejs,请参考我的另一篇博客:

http://blog.csdn.net/pcaxb/article/details/52046438
<http://blog.csdn.net/pcaxb/article/details/52046438>

2.安装完Node之后,测试Node安装是否成功,终端执行node -v查看
命令 node -v 如果提示 v8.11.4 类似的版本信息就是安装成功 如果提示'node' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
3.安装完Node之后,为了保证速度,需要使用淘宝镜像,命令如下:
(1)npm config set registry "http://registry.npm.taobao.org" (2)npm config list
可以查看配置
用cnpm比npm的淘宝镜像要快
npm install -g cnpm --registry=https://registry.npm.taobao.org
 

2.WebPack全局安装 和 NPM查询全局安装包

1.安装完nodejs之后,打开终端,全局安装webpack,执行命令:
命令 npm install webpack webpack-cli webpack-dev-server -g
-g的意思是安装全局的webpack,但是我们实际的开发中还需要针对单个的项目进行webpack安装

webpack  核心包

webpack-cli  如果你使用 webpack 4+ 版本,你还需要安装 CLI

webpack-dev-server 

webpack-dev-server 达到浏览器自动刷新的效果

2.NPM全局安装包查询
命令 npm list -g --depth 0 查询结果 +-- webpack@4.16.5 +-- webpack-cli@3.1.0 `--
webpack-dev-server@3.1.5
3.创建React + webpack + ES6项目 + 配置



1.创建一个目录,目录名为react-webpack

执行命令:(也可以不使用命令,自己通过平常创建文件夹的方式直接创建)
切换到需要放项目的文件夹下 cd 路径 创建目录 mkdir react-webpack 切换到该目录下 cd react-webpack/
如果是通过平常创建文件夹的方式直接创建,那就是cd 最终的路径

2.创建package.json 文件

使用 npm init 初始化,生成 package.json 文件:执行命令:
自定义创建package.json ,自己输入 npm init 或者 创建默认的package.json npm init -yes
3.添加开发依赖包及插件 devDependencies
安装命令 这里是一条命令 安装的东西比较多,比较长 npm install --save-dev babel-core babel-loader
babel-plugin-import babel-preset-latest babel-preset-react babel-preset-stage-0
clean-webpack-plugin css-loader file-loader html-webpack-plugin node-sass
sass-loader style-loader url-loader webpack webpack-cli webpack-dev-server


安装完成图,有一些警告没有关系,没有错误就行

--save是保存这些依赖的版本到package.json

-dev是 安装到package.json的devDependencies属性中

babel-core 如果某些代码需要调用 Babel 的 API 进行转码,就要使用babel-core模块。

babel-loader es6转码

babel-preset-latest es6最新转码规则

babel-plugin-import  antd按需加载样式 

babel-preset-react  react 转码规则

babel-preset-stage-0  e67转码

css-loader css模块加载

file-loader  file模块加载 比如图片就需要这个file加载

node-sass  scss模块加载

sass-loader  scss模块加载

style-loader css模块加载

url-loader  图片url模块加载

webpack  webpack核心包

webpack-cli 如果你使用 webpack 4+ 版本,你还需要安装 CLI

webpack-dev-server 达到浏览器自动刷新的效果

clean-webpack-plugin   webpack可以配置清空某个文件夹

html-webpack-plugin  html默认模板导入插件

Babel <https://babeljs.io/> 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5
代码,从而在现有环境执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。下面是一个例子。
// 转码前 input.map(item => item + 1); // 转码后 input.map(function (item) { return
item + 1; });
上面的原始代码用了箭头函数,Babel 将其转为普通函数,就能在不支持箭头函数的 JavaScript 环境执行了。

4.添加产品依赖包及插件 dependencies
安装命令 这里是一条命令 安装的东西比较多,比较长 npm install --save antd-mobile echarts es6-promise
react react-dom react-router-dom react-sublime-video


安装完成图,有一些警告没有关系,没有错误就行



antd-mobile  蚂蚁金服手机端antd

echarts  echarts 图表

es6-promise  es6的promise 

react   react核心包

react-dom  react核心包

react-router-dom react路由

react-sublime-video  视频播放插件

5.webpack 配置 

新建开发环境development和生产环境production的webpack配置文件



最终webpack.development.config.js 文件如下
const path = require('path'); const webpack = require('webpack'); const
HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin =
require('clean-webpack-plugin'); module.exports = { mode:'development', entry:
{ bundle: path.resolve(__dirname, './src/main.js'), //添加要打包在vendor里面的库 vendors:
['react','react-dom','react-router'], }, output: { path:
path.resolve(__dirname, './build'), filename: '[name].js' }, devServer: { host:
'0.0.0.0', port: 8080 }, module: { rules: [ { test: /\.js|jsx$/, exclude:
/(node_modules|bower_components)/, use: { loader: 'babel-loader', } }, { test:
/\.scss$/, use: [{ loader: "style-loader" // 将 JS 字符串生成为 style 节点 }, { loader:
"css-loader" // 将 CSS 转化成 CommonJS 模块 }, { loader: "sass-loader" // 将 Sass 编译成
CSS }] }, { //使用css配置 test: /\.css$/, loader: "style-loader!css-loader" }, {
//使用less配置 test: /\.less$/, loader: "style-loader!css-loader" }, // { // test:
/\.(png|jpg|gif)$/, // use: [ // { // loader: 'file-loader', // options: { //
//编译出来是项目中对应图片文件夹的文件目录 // // name: 'images/[path][name].[ext]' // name:
'images/[hash].[ext]',//所有图片在一个目录 // } // } // ] // } { test:
/\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192,
name: 'images/[hash].[ext]',//所有图片在一个目录 } } ] } ] }, performance: { hints:
false }, optimization: { splitChunks: { cacheGroups: { commons: { test:
/[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' } } } }, // devtool:
'source-map', plugins: [ new webpack.DefinePlugin({//设置成production去除警告
'process.env':{ NODE_ENV: JSON.stringify("production") } }), new
HtmlWebpackPlugin({ filename: 'index.html', template: './common.html', inject:
'body' }), new CleanWebpackPlugin(['dist', 'build'], { root:__dirname, verbose:
true, dry: false, exclude: ['jslibs'] }) ] };
最终webpack.production.config.js 文件如下 
const path = require('path'); const webpack = require('webpack'); const
HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin =
require('clean-webpack-plugin'); module.exports = { mode:'production', entry: {
bundle: path.resolve(__dirname, './src/main.js'), //添加要打包在vendor里面的库 //vendors:
['react','react-dom','react-router'], }, output: { path:
path.resolve(__dirname, './build'), filename: '[name][hash].js' }, module: {
rules: [ { test: /\.js|jsx$/, exclude: /(node_modules|bower_components)/, use:
{ loader: 'babel-loader', } }, { test: /\.scss$/, use: [{ loader:
"style-loader" // 将 JS 字符串生成为 style 节点 }, { loader: "css-loader" // 将 CSS 转化成
CommonJS 模块 }, { loader: "sass-loader" // 将 Sass 编译成 CSS }] }, { //使用css配置
test: /\.css$/, loader: "style-loader!css-loader" }, { //使用less配置 test:
/\.less$/, loader: "style-loader!css-loader" }, // { // test:
/\.(png|jpg|gif)$/, // use: [ // { // loader: 'file-loader', // options: { //
//编译出来是项目中对应图片文件夹的文件目录 // // name: 'images/[path][name].[ext]' // name:
'images/[hash].[ext]',//所有图片在一个目录 // } // } // ] // } { test:
/\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192,
name: 'images/[hash].[ext]',//所有图片在一个目录 } } ] } ] }, performance: { hints:
false }, optimization: { splitChunks: { cacheGroups: { commons: { test:
/[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' } } } }, // devtool:
'source-map', plugins: [ new webpack.DefinePlugin({//设置成production去除警告
'process.env':{ NODE_ENV: JSON.stringify("production") } }), new
HtmlWebpackPlugin({ filename: 'index.html', template: './common.html', inject:
'body' }), new CleanWebpackPlugin(['dist', 'build'], { root:__dirname, verbose:
true, dry: false, exclude: ['jslibs'] }) ] };
6.package.json文件配置 

在package.json文件中为scripts添加,方便使用命令:
"scripts": { "probuild": "webpack --progress --colors --config
webpack.production.config.js", "devbuild": "webpack --progress --colors
--config webpack.development.config.js", "dev": "webpack-dev-server --progress
--colors --content-base build --config webpack.development.config.js" },
最终package.json文件如下
{ "name": "react-webpack", "version": "1.0.0", "description": "description",
"main": "main.js", "scripts": { "probuild": "webpack --progress --colors
--config webpack.production.config.js", "devbuild": "webpack --progress
--colors --config webpack.development.config.js", "dev": "webpack-dev-server
--progress --colors --content-base build --config
webpack.development.config.js" }, "keywords": [ "react" ], "author": "pca",
"license": "ISC", "repository": "repository", "devDependencies": {
"babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin-import":
"^1.8.0", "babel-preset-latest": "^6.24.1", "babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1", "clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0", "file-loader": "^2.0.0", "html-webpack-plugin":
"^3.2.0", "node-sass": "^4.9.3", "sass-loader": "^7.1.0", "style-loader":
"^0.22.1", "url-loader": "^1.1.1", "webpack": "^4.17.1", "webpack-cli":
"^3.1.0", "webpack-dev-server": "^3.1.5" }, "dependencies": { "antd-mobile":
"^2.2.3", "echarts": "^4.1.0", "es6-promise": "^4.2.4", "react": "^16.4.2",
"react-dom": "^16.4.2", "react-router-dom": "^4.3.1", "react-sublime-video":
"^0.2.5" } }
7.   配置 .babelrc

Babel 的配置文件是.babelrc,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。
{ "presets": [ "latest", "react", "stage-0" ], "plugins": [ ["import", {
"libraryName": "antd", "libraryDirectory": "lib"}, "ant"], ["import", {
"libraryName": "ant-mobile", "libraryDirectory": "lib"}, "ant-mobile"] ] }
8.缺少node_modules 安装

一般的项目是没有node_modules的,可以通过
默认会安装两种依赖 npm install 只安装dependencies而不安装devDependencies npm install
--production
源码下载

https://download.csdn.net/download/pcaxb/10625064
<https://download.csdn.net/download/pcaxb/10625064>

React+Webpack4.0+ES6+Antd最新版环境搭建详解-2018年

博客地址:https://blog.csdn.net/pcaxb/article/details/82014500
<https://blog.csdn.net/pcaxb/article/details/82014500>

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信