anujs+ webpack2

发布时间：2020-12-15 06:57:35 所属栏目：百科来源：网络整理

导读：npm init -ynpm i anujsnpm 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 specif

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>

（编辑：李大同）

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