注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

百鬼夜行

身是菩提树,心如明镜台,时时勤拂拭,勿使惹尘埃。

 
 
 

日志

 
 

npm+webpack+babel+react安装  

2018-01-11 16:18:32|  分类: HTML5CSS3WEBAPP |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

npm+webpack+babel+react安装

kroraina
kroraina 发布于 2016-05-31 17:57:21 浏览:8754 类型:原创 - 教程 分类:开发调试 - ??????. 二维码: 作者原创 版权保护
1.首先要安装 Node.js, Node.js 自带了软件包管理器 npm

2.在项目文件目录下生成package.json
# 进入项目目录
$ npm init
3.用 npm 安装 Webpack
$ npm install webpack -g
此时 Webpack 已经安装到了全局环境下,通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。
# 进入项目目录
# 安装 webpack 依赖:
$ npm install webpack --save-dev
4.用 npm 安装 模块加载器(loader)
$ npm install style-loader css-loader -g
将 style-loader css-loader 安装到项目的依赖中
# 进入项目目录
# 安装 style-loader css-loader 依赖:
$ npm install style-loader css-loader --save-dev
5.用 npm 安装 html-webpack-plugin
# 进入项目目录
# 安装 html-webpack-plugin 依赖:
$ npm install html-webpack-plugin --save-dev
6.用 npm 安装 webpack-dev-server
# 进入项目目录
# 安装 webpack-dev-server 依赖:
$ npm install webpack-dev-server --save-dev
7.用 npm 安装 babel-cli: babel转码器
$ npm install babel-cli -g
# 进入项目目录
# 安装 babel-cli 依赖:
$ npm install babel-cli --save-dev
8.用 npm 安装 babel-preset-es2015
$ npm install babel-preset-es2015 -g
# 进入项目目录
# 安装 babel-preset-es2015 依赖:
$ npm install babel-preset-es2015 --save-dev
9.用 npm 安装 babel-loader
# 进入项目目录
# 安装 babel-loader 依赖:
$ npm install babel-loader --save-dev
10.用 npm 安装 react
$ npm install react react-dom babel-preset-react -g
# 进入项目目录
# 安装 react 依赖:
$ npm install react react-dom babel-preset-react --save-dev
11.用 npm 安装 react-hot-loader
# 进入项目目录
# 安装 react-hot-loader 依赖:
$ npm install react-hot-loader --save-dev
11.在项目文件目录下创建.babelrc文件
或者:cmd进入根目录,输入   type null>.babelrc  ,回车即可!
{"preset":["es2015"],"react"}
12.在项目文件目录下创建example文件夹,并在其下面创建如下文件
index.jsx:
var React = require("react");
var ReactDOM = require("react-dom");

import App from './app.jsx';

var Hello = React.createClass({
        render:function(){
                return <div>1234<App/></div>
        }
});

var div1 = document.createElement("div");

document.body.appendChild(div1);

ReactDOM.render(<Hello />,div1);
app.jsx:
var React = require("react");
var ReactDOM = require("react-dom");

export default class App extends React.Component{
        render(){
                return <h1>hello reactJs</h1>
        }
}

13.在项目文件目录下建立webpack.config.js
var htmlWebpackPlugin = require('html-webpack-plugin'); //使用自动生成html文件的一个插件
var path = require('path');

module.exports = {
    entry: './example/index.jsx',
    output:{
        path:'./example_build/',
        filename:'build.js'
    },
    module:{
        loaders:[
            {
                test:/\.css$/,
                loaders:['style','css'],
                exclude:'node_modules'
            },
            {
                test:/\.jsx?$/,
                loaders:['react-hot','babel?presets[]=es2015&presets[]=react'],
                exclude:"/node_modules/",
                include:path.resolve(__dirname,"example")
            }
        ]    },
    resolve:{
        extensions:['','.js','.css','.jsx']    },
    devServer: {
            hot:true,
            inline:true
    },

    plugins:[
        new htmlWebpackPlugin({
            title:"First react app"
        })
    ]}
14.webpack打包
# 进入项目目录
$ webpack
此时项目目录下将会生成example_build文件夹,其内部也生成build.js 和 index.html文件,

15.webpack-dev-server 热加载
# 进入项目目录
$ webpack-dev-server --hot --inline
此时在浏览器中打开http://localhost:8080/,将会看到example_build下index.html页面内容。
这时,修改example下的index.jsx内容,页面将会自动刷新;修改exampleg下的app.js内容,页面将会局部刷新。
  评论这张
 
阅读(4)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018