zoukankan      html  css  js  c++  java
  • [webpack] 配置react+es6开发环境

    写在前面

    每次开新项目都要重新安装需要的包,简单记录一下。
    以下仅包含最简单的功能:

    • 编译react
    • 编译es6
    • 打包src中入口文件index.js至dist

    webpack配置react+es6开发环境

    1、安装react语法环境

    npm install react react-dom --save
    

    2、安装webpack开发环境

    npm install webpack --save-dev
    

    3、安装babel

    npm install babel-loader babel-core --save-dev
    

    4、安装react转换规则

    npm install babel-preset-react --save-dev
    

    5、安装es6转换规则

    npm install babel-preset-es2015 --save-dev
    

    6、安装es7转换规则
    ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个

    npm install babel-preset-stage-0 --save-dev
    
    npm install babel-preset-stage-1 --save-dev
    
    npm install babel-preset-stage-2 --save-dev
    
    npm install babel-preset-stage-3 --save-dev
    

    7、配置.babelrc文件

    {
        presets:{
            "react",
            "es2015",
            "stage-0"
        },
        plugins:[]
    }
    

    8、创建webpack.config.js

    var webpack = require("webpack");
    var path = require("path");
    
    var root = path.join(__dirname, "./");
    var src = path.join(root, "./src");
    var dist = path.join(root, "./dist");
    
    module.exports = {
        entry: {
            "index": [path.join(__dirname, "./src/index.js")]
        },
        output: {
            path: dist, 
            filename: "/static/[name].js"
        },
        module: {
            loaders: [
                {
                    test: /.jsx?$/,
                    loader: "babel"
                }
            ]
        },
        resolve: {
            extensions: ['', '.js']
        }
    };
    
    

    小结

    以上只是最简单的功能,记下来也只是备忘,并不能提高效率。之后会把以上功能写成脚本,用于自动初始化不同类型的项目,主治懒癌晚期

  • 相关阅读:
    配置支持Basler的API函数的开发环境
    调用约定
    进程间通讯之 命名管道
    进程间通讯。
    使用结构体返回多个参数。
    目的:让目标程序在内存中只有一个实例
    数学问题
    机试二
    pycharm安装TensorFlow
    机器学习一
  • 原文地址:https://www.cnblogs.com/hhhyaaon/p/5972506.html
Copyright © 2011-2022 走看看