anujs+ webpack2

使用AnuJS与Webpack搭建React应用

最新推荐文章于 2025-09-07 18:55:52 发布

weixin_34049948

最新推荐文章于 2025-09-07 18:55:52 发布

阅读量114

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript ViewUI

原文链接：https://segmentfault.com/a/1190000010396543

本文介绍了一个使用AnuJS与Webpack构建的React应用程序案例，详细展示了配置文件webpack.config.js的内容，包括模块加载器、别名设置等，并通过创建简单的React组件来验证配置的有效性。

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>