react開發環境搭建

Posted 2020-07-01 reese.liu

最近接触react框架，小记一下~~~

开发环境配置

要搭建一个现代的前端开发环境配套的工具有很多，比如 Grunt / Gulp / Webpack / Broccoli，都是要解决前端工程化问题，这个主题很大，这里为了使用 React 我们只关注其中的两个点： 

• JSX 支持
• ES6 支持

配合 webpack 非常方便。

Webpack 配置 React 开发环境

Webpack 是一个前端资源加载/打包工具，只需要相对简单的配置就可以提供前端工程化需要的各种功能，并且如果有需要它还可以被整合到其他比如 Grunt / Gulp 的工作流。

 

npm（Node Package Manager）是nodejs时代不可或缺的最好的包管理器，现在已经随nodejs官方包同时会安装到你的设备上去。只要给项目书写好package.json放于项目根目录，在重新部署之时只需要执行 npm install 一行简单的命令，所有相关的依赖就能够自动安装到项目目录下面，并且还能很方便的对不同项目的不同依赖包版本进行良好、统一的管理。

NPM主要运用于Node.js项目的内部依赖包管理，安装的模块位于项目根目录下的node_modules文件夹内。而Bower大部分情况下用于前端开发，对于CSS/JS/模板等内容进行依赖管理，依赖的下载目录结构可以自定义。

关于NPM的具体使用已经不需更多赘述，可以自行参考http://www.cnblogs.com/reese-blogs/p/5336460.html

 

安装Bower
npm install -g bower 之后你就可以使用 bower install 类似于NPM的方式，对于当前项目进行前端依赖的相关管理。使用起来和NPM一样方便快捷。

例如：bower install chartjs  安装chart.js

 

安装 Webpack：npm install -g webpack

Webpack 使用一个名为 webpack.config.js 的配置文件，要编译 JSX，先安装对应的 loader: npm install babel-loader --save-dev

 

使用npm start启动项目，使用npm run build 打包

 

假设我们在当前工程目录有一个入口文件 entry.js，React 组件放置在一个 components/ 目录下，组件被 entry.js 引用，要使用 entry.js，我们把这个文件指定输出到 dist/bundle.js，Webpack 配置如下：

var path = require(\'path\');

module.exports = {
    entry: \'./entry.js\',
    output: {
        path: path.join(__dirname, \'/dist\'),
        filename: \'bundle.js\'
    },
    resolve: {
        extensions: [\'\', \'.js\', \'.jsx\']
    },
    module: {
        loaders: [
            { test: /\\.js|jsx$/, loaders: [\'babel\'] }
        ]
    }
}

resolve 指定可以被 import 的文件后缀。比如 Hello.jsx 这样的文件就可以直接用 import Hello from \'Hello\' 引用。

loaders 指定 babel-loader 编译后缀名为 .js 或者 .jsx 的文件，这样你就可以在这两种类型的文件中自由使用 JSX 和 ES6 了。

监听编译: webpack -d --watch

更多关于 Webpack 的介绍

• webpack-howto