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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。