anujs+ webpack2

前端之家收集整理的这篇文章主要介绍了anujs+ webpack2前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  1. npm init -y
  2.  
  3.  
  4. npm i anujs
  5.  
  6. npm i babel-core babel-loader babel-preset-es2015 babel-preset-react webpack@1.1.13 --save-dev
  1. {
  2. "name": "eee","version": "1.0.0","description": "","main": "index.js","scripts": {
  3. "test": "echo \"Error: no test specified\" && exit 1"
  4. },"keywords": [],"author": "","license": "ISC","devDependencies": {
  5. "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"
  6. }
  7. }

webpack.config.js

  1. const webpack = require("webpack");
  2.  
  3. const config = {
  4. context: __dirname,entry: {
  5. bundle: "./main.js"
  6. },output: {
  7. path: __dirname,filename: "dist/index.js"
  8. },stats: {
  9. colors: true,reasons: true,// verbose errors
  10. chunks: false // clean summary output
  11. },babel: {
  12. presets: [['es2015'],'stage-0','react'],plugins: ['transform-runtime',["transform-es2015-classes",{
  13. "loose": true
  14. }]]
  15. },module: {
  16. loaders: [
  17. {
  18. test: /\.js$/,exclude: /node_modules/,loader: 'babel'
  19. }
  20. ]
  21. },resolve: {
  22. alias: {
  23. react: "anujs/dist/ReactIE.js","react-dom": "anujs/dist/ReactIE.js"
  24. }
  25. }
  26. };
  27.  
  28. module.exports = config;

cat.js

  1. import React from "react";
  2.  
  3. export default class Cat extends React.Component {
  4. render() {
  5. return (
  6. <div>这是猫</div>
  7. );
  8. }
  9. }

main.js

  1. import React from "react";
  2. import ReactDOM from "react-dom";
  3. import Cat from "./cat";
  4.  
  5.  
  6. class Hello extends React.Component {
  7. render() {
  8. return (
  9. <div>
  10. {` 测试anujs或qreact的兼容 `}
  11. <Cat />
  12. </div>
  13. );
  14. }
  15. }
  16.  
  17. window.onload = function() {
  18. ReactDOM.render(<Hello />,document.body);
  19. };

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <Meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <Meta charset="utf-8">
  7. <title>为什么你不应该读大学 - 未来世界的幸存者</title>
  8. <style>
  9.  
  10. </style>
  11. <Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
  12. <script src='./dist/index.js'></script>
  13.  
  14. <script>
  15. </script>
  16. </head>
  17.  
  18. <body>
  19. </body>
  20.  
  21. </html>

猜你在找的React相关文章