React+webpack+Babel项目搭建及配置
React+webpack+Babel项目搭建及配置
参考GitHub链接：https://github.com/theJian/build-a-hn-front-page
- 安装node.js
- 安装webapck(打包工具): npm install [email protected] –g
- 安装webpack-dev(webpack服务器):npm install webpack-dev-server –g
- 建立webpack 配置文件: webpack 使用一个名为 webpack.config.js 的配置文件, 现在在你的项目根目录下创建该文件.
var path = require(‘path’);
module.exports = {
entry: path.resolve(__dirname, ‘app/app.js’),
output: {
path: path.resolve(__dirname, ‘build’),
filename: ‘bundle.js’
}
}
5. 创建app/app.js: document.write(‘It works’);
6. 创建 build/index.html, 填入以下内容并执行webpack打包后将会在build文件夹下看到生成的build.js文件:
7.配置 package.json
在项目根目录下运行 npm init -y 会按照默认设置生成 package.json, 修改 scripts 的键值如下:
"scripts": {
"start": "webpack-dev-server",
"build": "webpack"
}
现在执行 npm run build 相当于 webpack, npm run start 相当于 webpack-dev-server
安装 React:
npm install react react-dom --save
为了简化 AJAX 请求代码, 这里引入 jQuery:
npm install jquery --save
安装 Babel 的 loader 以支持 ES6 语法:
npm install [email protected] [email protected] babel-preset-es2015 [email protected] [email protected] --save-dev
10.配置 webpack.config.js 来使用安装的 loader.
// webpack.config.js
var path = require(‘path’);
module.exports = {
entry: path.resolve(__dirname, ‘app/app.js’),
output: {
path: path.resolve(__dirname, ‘build’),
filename: ‘bundle.js’
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: ‘babel-loader’,
query: {
presets: [‘es2015’,‘react’]
}
},
]
}
};
11.接下来测试一下开发环境是否搭建完成.
打开 app.js, 修改内容为:
// app.js
import $ from ‘jquery’;
import React from ‘react’;
import { render } from ‘react-dom’;
class HelloWorld extends React.Component {
render() {
return (
Hello World
);
}
}
render(, $(’#content’)[0]);
这里组件 HelloWorld 被装载到 id 为 content 的 DOM 元素, 所以相应的需要修改 index.html .
接下来执行webpack打包并打开index.html文件查看打包编译情况
这里贴出package.json配置：
以上是 React+webpack+Babel项目搭建及配置 的全部内容， 来源链接： utcz.com/z/382961.html
