本文目录一览：
如何使用react-tools将jsx编译成JavaScript
使用react-tools将jsx编译成JavaScript方法：
1,通过npm安装react-tools
npm –g react-tools
2,通过cmd进入项目根目录执行watch命令 jsx --watch src/ build/
src路径下存放的是jsx文件，编译后的js存放到build路径下
3,当目标文件变化以后，自动构建生成新的js文件。
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({
//
"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']
使用VSCode编写jsx代码时如何实现标签自动
VSCode是kiddd最喜欢的编辑器，极简而灵活，丰富而且继续丰富着的插件库，配置简单，都吸引着我。众所周知，VSCode在编写HTML代码时可以tab键自动补齐标签。然而在编写.jsx文件的代码时，嵌套的标签就无法享用一键补齐的优待了。
当然，如果这点问题不能解决，VSCode也不能在现代编译器中脱颖而出了。这里kiddd就介绍一种简单的实现方法，你不需要下载任何插件。
1. 打开设置
打开：文件——首选项——设置
2. 修改”emmet.triggerExpansionOnTab”属性
打开设置后搜索”emmet.triggerExpansionOnTab”属性，将其修改为false。
修改的方式是：点击该语句左侧的笔状图标，或直接在右侧输入：
“emmet.triggerExpansionOnTab”: false
over,搞定，配置完之后你就可以在jsx文件中tab补齐标签了。是不是非常简单？开始你的react之旅吧。