關於編譯jsx教程的信息

本文目錄一覽：

• 1、如何使用react-tools將jsx編譯成JavaScript
• 2、React | 使用webpack構建React項目
• 3、使用VSCode編寫jsx代碼時如何實現標籤自動

如何使用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之旅吧。