React | 使用webpack构建React项目

配置 React 项目，需要完成的工作：

1、编译胡游裂 jsx,es6,scss 等资源

2、自动引入静态资源到 html 页面

3、实时编译和刷新浏览器

4、按磨大指定模块化规范自动包装模块

5、自动给 css 添加浏览器内核前缀

6、按需打包合并 js、css

根据 webpack 文档编写最基本的 webpack 配置，直接使用 node api 的方式

/* webpack.config.js */

var webpack= require( 'webpack' )

// 辅助函数  var utils= require( './utils' )

var fullPath=utils.fullPath

var pickFiles=utils.pickFiles

// 项目根路径  var ROOT_PATH=fullPath( '../' )

// 项目源码路径  var SRC_PATH=ROOT_PATH+ '/src'

// 产出路径  var DIST_PATH=ROOT_PATH+ '/dist'

// 是否是开发环境  var __DEV__= process.env. NODE_ENV !== 'production'

/裤闭/ conf

var alias=pickFiles({

id :/(conf\/[^\/]+).js$/,

pattern :SRC_PATH+ '/conf/*.js'

})

// components

alias= Object.assign(alias,pickFiles({

id :/(components\/[^\/]+)/,

pattern :SRC_PATH+ '/components/*/index.js'

}))

// reducers

alias= Object.assign(alias,pickFiles({

id :/(reducers\/[^\/]+).js/,

pattern :SRC_PATH+ '/js/reducers/*'

}))

// actions

alias= Object.assign(alias,pickFiles({

id :/(actions\/[^\/]+).js/,

pattern :SRC_PATH+ '/js/actions/*'

}))

var config= {

context :SRC_PATH,

entry : {

app : [ './pages/app.js' ]

},

output : {

path :DIST_PATH,

filename : 'js/bundle.js'

},

module : {},

resolve : {

alias :alias

},

plugins : [

new webpack.DefinePlugin({

// http://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack

"process.env.NODE_ENV" : JSON .stringify(process.env. NODE_ENV || 'development' )

})

]

}

module.

exports =config

/* webpack.dev.js */

var webpack= require( 'webpack' )

var WebpackDevServer= require( 'webpack-dev-server' )

var config= require( './webpack.config' )

var utils= require( './utils' )

var PORT=8080

var HOST=utils.getIP()

var args= process.argv

var hot=args.indexOf( '--hot' ) >-1

var deploy=args.indexOf( '--deploy' ) >-1

// 本地环境静态资源路径  var localPublicPath= 'http://' +HOST+ ':' +PORT+ '/'

config.output. publicPath =localPublicPath

config.entry.app.unshift( 'webpack-dev-server/client?' +localPublicPath)

new WebpackDevServer(webpack(config), {

hot :hot,

inline : true ,

compress : true ,

stats : {

chunks : false ,

children : false ,

colors : true

},

// Set this as true if you want to access dev server from arbitrary url.

// This is handy if you are using a html5 router.

historyApiFallback : true ,

}).listen(

PORT,HOST, function () {

console .log(localPublicPath)

})

编译 jsx、es6、scss 等资源：

● 使用 bael 和 babel-loader 编译 jsx、es6

● 安装插件: babel-preset-es2015 用于解析 es6

● 安装插件：babel-preset-react 用于解析 jsx

// 首先需要安装 babel

$ npm i babel-core

// 安装插件

$ npm i babel-preset-es2015babel-preset-react

// 安装 loader

$ npm i babel-loader

在项目根目录创建 .babelrc 文件:

{

"presets" : [ "es2015" , "react" ]

}

在 webpack.config.js 里添加：

// 使用缓存 var CACHE_PATH = ROOT_PATH + '/cache'

// loaders

config.module. loaders = []

// 使用 babel 编译 jsx 、 es6

config.module. loaders .push({

test :/\.js$/,

exclude :/node_modules/,

include : SRC_PATH,

// 这里使用  loaders ，因为后面还需要添加  loader

loaders : [ 'babel?cacheDirectory=' + CACHE_PATH ]

})

接下来使用 sass-loader 编译 sass:

$ npm i sass-loader node-sasscss-loader style-loader

●css-loader 用于将 css 当做模块一样来 import

●style-loader 用于自动将 css 添加到页面

在 webpack.config.js 里添加：

// 编译  sass

config.module. loaders .push({

test :/\.(scss|css)$/,

loaders : [ 'style' , 'css' , 'sass' ]

})

自动引入静态资源到相应 html 页面

● 使用 html-webpack-plugin

$ npm i html-webpack-plugin

在 webpack.config.js 里添加：

// html  页面  var HtmlwebpackPlugin= require( 'html-webpack-plugin' )

config.

plugins .push(

new HtmlwebpackPlugin({

filename : 'index.html' ,

chunks : [ 'app' ],

template : SRC_PATH + '/pages/app.html'

})

)

打包合并 js、css

webpack 默认将所有模块都打包成一个 bundle，并提供了 Code Splitting 功能便于我们按需拆分。在这个例子里我们把框架和库都拆分出来：

在 webpack.config.js 添加：

config.entry. lib = [

'react' , 'react-dom' , 'react-router' ,

'redux' , 'react-redux' , 'redux-thunk'

]

config.output. filename = 'js/[name].js'

config.

plugins .push(

new webpack.optimize.CommonsChunkPlugin( 'lib' , 'js/lib.js' )

)

// 别忘了将  lib  添加到  html  页面

// chunks: ['app', 'lib']

react 项目

create react app + 下面命令

Note: 项目中必须有package.json ， 否则上面的命令会报错

1- 按照依赖

2- 配置脚本

3- Create the main file (告诉storybook去哪找stories)

4- write stories

每个story是组件的一个状态，如上例：按钮组件的两个实例

Button

├── With Text

└── With Emoji

5- 启动storybook

1- 获取完整的webpack默认配置

// .storybook/main.js

执行命令

2- webpackFinal添加配置

函数

参数： 第一个参数是storybook使用的webpack配置，第二个参数是接收的来自storybook的对象， 可以告哗姿诉你这些配置来自哪里

For example, here’s a .storybook/main.js to add Sass support:

添加插件配置

Using Your Existing Config---merge two config

默认情况下，Storybook加载根.babelrc文件并加载这些配置。但有时这些选择可能会导致故事书抛出错误。

在这种情况下，您可以为Storybook提供一个定制的.babelrc。为此，在Storybook config目录中创建一个名为.babelrc文件的文件（默认情况下，它是.Storybook）。

然春手后Storybook将只从该文件加载Babel配置。目前我们不支持package.json中的 Babel config

1- Typescript configuration presets

2- Setting up TypeScript with ts-loader

3- Setting up TypeScript with babel-loader

3- Using TypeScript with the TSDocgen addon

storybook info addon 能自动为每个组件生成属性表文档， 但是不适用与typescript

解决方案：react docgen typescript loader预处理typescript文件，以向Info插件提供所需的内容，webpack配置如上

组件正常使用info即可

请参阅react docgen typescript loader文档，以向typescript接口写入属性说明和其他注释。

可以在.storybook/preview.js中添加其他的说明

注意：对于只导出扒芦嫌为默认值的组件，无法生成组件docgen信息。通过使用命名导出导出组件，可以解决此问题。

4- Setting up Jest tests

This is an example jest.config.js file for jest:

6- Building your TypeScript Storybook

日常在开发中总是会遇到局纯各种奇怪的需求，

最近在开发一个多人合作的项目时变遇到一个奇怪的需求，

对方之前开发了一个react组件，要求在这期迭代中嵌入到vue项目中。

npm i -S vuera

npm install --save react react-dom

这个时候发现第一个问题：

不难发现，这是vue项目中未jsx文件格式的问题所导致

解决办法：

编辑webpack.base.conf.js，加入对jsx的支持

这个时候第二个问题出现了：

原因：

.babelrc文件中默认引册腊皮入了transform-vue-jsx，此插件将jsx转义成h function的形式供vue调用。

解决办法：

npm install --save-dev babel-plugin-transform-react-jsx

并且在.babelrc文件中

用transform-react-jsx替换transform-vue-jsx

至此，我们便完成了州差在vue项目中引入react组件的目的

效果：

npm i -S vuera

npm install --save vue

---