anujs+ webpack2

時間 2020-12-04

標籤 html node react webpack web npm babel antd dom 測試欄目 HTML 简体版

原文原文鏈接

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

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

import React from "react";

export default class Cat extends React.Component {
  render() {
    return (
      <div>這是貓</div>
    );
  }
}

main.jsreact

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

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

1. webpack2
2. #anujs#anujs+webpack4+reach-router環境搭建過程當中遇到的BUG
3. webpack2&vue2
4. Webpack2 起步
5. webpack2 實踐
6. webpack2 詳解
7. webpack2入門
8. Webpack2入門
9. webpack2配置
10. webpack2新特性
更多相關文章...

相關標籤/搜索

es6+vue2+webpack2+vue

vuejs2+webpack2+vuxui2

React

HTML

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。