目录：
babel + browserify
jspm
文件引入方式
babel + browserify
npm install babel-cli babel-preset-2015babel-preset-react --save-dev
npm install browserify --save-dev
// .babelrc 通过cli创建 touch .babelrc
{
"presets": ["es2015","react"]
}
// main.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>h1</h1>,
document.querySelector('#root')
)
// 打包
babel main.js -o main_es5.js
browserify main_es5.js -o bundle.js
// 最后
<script src="bundle.js"></script>
jspm
需开启一个本地服务器
npm install gulp -g
npm install gulp gulp-connect --save-dev
// Gulpfile.js
let gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('connect',()=>{
connect.server({
livereload: true
})
})
gulp.task('default',['connect'])
$_> gulp
// 安装jspm
npm install -g jspm
// 初始化
jspm init -y
// 安装模块
jspm install react
jspm install npm:react-dom
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
<!-- 导入system.js-->
<script src="jspm_packages/system.js"></script>
<!-- 导入config.js-->
<script src="config.js"></script>
<script>
System.import('./app/main');
</script>
</body>
</html>
// app/main.js
import React from 'react';
import ReactDom from 'react-dom' ;
ReactDom.render(
<h1>hello jspm</h1>,
document.getElementById('app')
) ;
文件引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 这里写
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
网友评论