react

作者: 林ze宏 | 来源:发表于2018-01-11 22:53 被阅读0次
    • npm init

    • npm install --save react react-dom babelify babel-preset-reac

    • npm install babel-preset-es2015 --save (save就是保存到配置文件中)

    • npm install -g webpack-dev-server 全局安装

    • npm install -g webpack 全局安装

    • npm install webpack-dev-server 项目本地安装(webpack-dev-server是一个小型的Node.js Express服务器,)

    • npm install webpack

    • npm install babel-loader --save

    • npm install babel --save

    • npm install babel-core --save
      https://ant.design/docs/react/introduce-cn (ant design安装)

    • npm install antd --save

    • npm install --save react-router

    • npm install react-router-dom --save(4v,需要安装react-router-dom)

    • npm install react-responsive --save(移动端适配)

    • npm install react-touch-loader(下拉刷新, 加载更多)
      https://github.com/Broltes/react-touch-loader

    less-loader,需要增加包less-loader和less包
    • npm install less --save-dev
    • npm install less-loader --save-dev
    webpack.config.js 配置
    {test: /\.less$/, loader: 'style-loader!css-loader!less-loader'}
    
    • npm install redux --save

    根目录:webpack.config.js
    var debug = process.env.NODE_ENV !== "production";
    var webpack = require('webpack');
    var path = require('path');
    
    module.exports = {
      context: path.join(__dirname),
      devtool: debug ? "inline-sourcemap" : null,
      entry: "./src/js/index.js",
      module: {
        loaders: [
          {
            test: /\.js?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
              presets: ['react', 'es2015']
            }
          }
        ]
      },
      output: {
        path: __dirname,
        filename: "./src/bundle.js"
      },
      plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
      ],
    };
    
    

    最后运行:webpack

    webpack-dev-server
    webpack-dev-server --inline --hot(运行这个就可以了)
    (webpack-dev-server --content-base build --inline --hot)

    相关文章

      网友评论

          本文标题:react

          本文链接:https://www.haomeiwen.com/subject/cgwtoxtx.html