加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

从零开始搭建Webpack+react框架

发布时间:2020-12-15 20:35:00 所属栏目:百科 来源:网络整理
导读:1 .下载node.js Node.js官网下载,安装; 安装成功后在控制台输入 node -v 可查看当前版本: $ node - vv10. 15.0 输入npm -v查看npm版本: $ npm - v 6.4 . 1 ?2.创建项目 1.安装各种需要的依赖:? npm install --save react - 安装React. npm install --save

1.下载node.js

Node.js官网下载,安装;

安装成功后在控制台输入node -v 可查看当前版本:

$ node -v
v10.15.0

输入npm -v查看npm版本:

$ npm -v
6.4.1

?2.创建项目

 1.安装各种需要的依赖:?

  • npm install --save react - 安装React.
  • npm install --save react-dom 安装React Dom,这个包是用来处理virtual DOM。这里提一下用React Native的话,这里就是安装react-native。
  • npm install --save-dev webpack - 安装Webpack,模块打包工具.
  • npm install --save-dev webpack-dev-server - webpack官网出的一个小型express服务器,主要特性是支持热加载.
  • npm install --save-dev babel-core - 安装Babel,可以把ES6转换为ES5,注意Babel最新的V6版本分为babel-cli和babel-core两个模块,这里只需要用babel-core即可。
  • npm install --save babel-polyfill - Babel includes a polyfill that includes a custom regenerator runtime and core.js. This will emulate a full ES6 environment
  • npm install --save-dev babel-loader - webpack中需要用到的loader.
  • npm install --save babel-runtime - Babel transform runtime 插件的依赖.
  • npm install --save-dev babel-plugin-transform-runtime - Externalise references to helpers and builtins,automatically polyfilling your code without polluting globals.
  • npm install --save-dev babel-preset-es2015 - Babel preset for all es2015 plugins.
  • npm install --save-dev babel-preset-react -?用于将 JSX 和其他东西编译到 JavaScript
  • npm install --save-dev babel-preset-stage-2 - All you need to use stage 2 (and greater) plugins (experimental javascript).

 2.打开 package.json 然后添加下面的scripts:

"scripts": {
  "start": "webpack-dev-server --hot --inline --colors --content-base ./build","build": "webpack --progress --colors"
}

 为项目创建一个目录:?mkdir webpack-react-tutorial && cd webpack-react-tutorial

 创建一个用于保存代码的最小目录结构:mkdir -p src

 通过运行来启用项目:npm init -y

?? 到此项目建立完成!


懒得码字 本段来源作者:瘦人假噜噜
链接:https://www.jianshu.com/p/324fd1c124ad

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读