- 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>