anujs+ webpack2

npm init -y


npm i anujs

npm i babel-core babel-loader babel-preset-es2015 babel-preset-react webpack@1.1.13 --save-dev

{
  "name": "eee","version": "1.0.0","description": "","main": "index.js","scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },"keywords": [],"author": "","license": "ISC","devDependencies": {
    "babel-core": "6.16.0","babel-loader": "6.2.5","babel-plugin-antd": "0.4.0","babel-plugin-transform-es2015-classes": "^6.24.1","babel-plugin-transform-runtime": "^6.15.0","babel-preset-es2015": "6.16.0","babel-preset-react": "6.16.0","babel-preset-stage-0": "6.16.0","babel-runtime": "6.11.6","anujs": "^1.0.7","webpack": "1.13.2"
  }
}

webpack.config.js

const webpack = require("webpack");

const config = {
  context: __dirname,entry: {
    bundle: "./main.js"
  },output: {
    path: __dirname,filename: "dist/index.js"
  },stats: {
    colors: true,reasons: true,// verbose errors
    chunks: false // clean summary output
  },babel: {
    presets: [['es2015'],'stage-0','react'],plugins: ['transform-runtime',["transform-es2015-classes",{
                 "loose": true
             }]]
  },module: {
    loaders: [
      {
        test: /\.js$/,exclude: /node_modules/,loader: 'babel'
      }
    ]
  },resolve: {
    alias: {
      react: "anujs/dist/ReactIE.js","react-dom": "anujs/dist/ReactIE.js"
    }
  }
};

module.exports = config;

cat.js

import React from "react";

export default class Cat extends React.Component {
  render() {
    return (
      <div>这是猫</div>
    );
  }
}

main.js

import React from "react";
import ReactDOM from "react-dom";
import Cat from "./cat";


class Hello extends React.Component {
  render() {
    return (
      <div>
        {` 测试anujs或qreact的兼容 `}
        <Cat />
      </div>
    );
  }
}

window.onload = function() {
  ReactDOM.render(<Hello />,document.body);
};

index.html

<!DOCTYPE html>
<html>

<head>
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta charset="utf-8">
    <title>为什么你不应该读大学 - 未来世界的幸存者</title>
    <style>

    </style>
    <Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
    <script src='./dist/index.js'></script>

    <script>
      
    </script>
</head>

<body>
</body>

</html>

原文链接：https://www.f2er.com/react/303368.html

猜你在找的React相关文章