ReactJS webpack实现JS模块化使用的坑

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ReactJS webpack实现JS模块化使用的坑相关的知识,希望对你有一定的参考价值。

从一个原生html/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤:

(1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack使之识别各种语法:JAX,HTML,CSS等

 

以下是一些坑:

1.ReactJS框架并不能实现JS的模块化

纯ReactJS其实和JqueryTemplate差不多,可以把HTML写成一个模板,然后以插入到某个DIV里的方式来实现HTML的模板化。

但是单纯靠ReactJS这个框架,其实这并没有实现JS的模块化,只是实现了HTML的模板化。

JS的模块化,通过import、require的方式导入其他JS模块,需要依靠“build”。

 

webpack就是实现JS模块化的比较流行的方式。

 

2.webpack打包时不识别JAX语法

webpack在build工程的时候,如果不用loader,只能识别原生JS,并不能识别JSX语法,同样HTML和CSS也不能识别。

所以需要一份webpack的配置文件,并使用npm安装相应的语法加载器,即loader。

比如下面这份webpack配置文件,就实现了JS的编译,CSS的编译,HTML的拷贝。

 

3.react和react-dom

又被旧教程坑,以前只有react框架,所以都是React.render,后来分离出了ReactDom专门用来操作JSXDOM内容。

所以现在最新的都是ReactDom.render,但是ReactDom里又有用到React的API,所以如果使用到ReactDom,必须先import React,否则会报错 react undefined.

 

4.production模式

webpack没有设置成production模式下,直接使用,会冒出一大堆警告来。

需要在webpack里配置build process的环境变量为生产模式。

new webpack.DefinePlugin({
      ‘process.env‘:{
        ‘NODE_ENV‘: JSON.stringify(‘production‘)
      }
    }),

 

5.warning

可以通过下面的语句消除好几个终端窗口的warning

new webpack.optimize.UglifyJsPlugin({
      compress:{
        warnings: false
      }
    })

  

 

demo:https://github.com/rayshen/reactjs-webpack-demo

 

完整的webpack配置文件:

var webpack = require(‘webpack‘);
var path = require(‘path‘);
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

var config = {
  entry: path.resolve(__dirname, ‘./src/js/main.js‘),
  output: {
    path: path.resolve(__dirname, ‘./build‘),
    filename: ‘./js/[name].js‘
  },
  module: {
    noParse: [],
    loaders: [
    {
      test: /\.js$/, 
      loader: ‘babel-loader‘,
      exclude: /node_modules/,
      query:
      {
        presets:[‘react‘]
      }
    },
    {
      test: /\.jsx?$/,
      loader: ‘babel-loader‘,
      exclude: /node_modules/,
      query:
      {
        presets:[‘react‘]
      }
    },
    {
        test: /\.(css)$/,
        loader: ExtractTextPlugin.extract(‘style-loader‘,‘css-loader‘)
    },
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template: __dirname + "/src/index.html"
    }),
    new ExtractTextPlugin("./css/[name].css"),
    new webpack.DefinePlugin({
      ‘process.env‘:{
        ‘NODE_ENV‘: JSON.stringify(‘production‘)
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress:{
        warnings: false
      }
    })
  ]
};

module.exports = config;

 

参考链接:

http://www.tuicool.com/articles/fQB3IjE

http://www.cnblogs.com/Leo_wl/p/4862714.html

以上是关于ReactJS webpack实现JS模块化使用的坑的主要内容,如果未能解决你的问题,请参考以下文章

找不到模块:错误:无法解析模块“组件/应用程序”。 webpack + reactjs 问题

ReactJS 和 Webpack 模块联合应用程序在部署到云端时包含未定义的 url

一初识Vue.js

yarn使用,reactjs+webpack搭建,运行第一个示例

我尝试在 webpack 5 中填充模块但不工作(Reactjs)

Reactjs - Webpack编译错误:模块构建失败