问题
由于在html中引入browser.min.js加载速度过慢，耗时大概[500, 1000]ms。
browser.min.js本地使用耗时情况
browser.js主要是使浏览器支持babel不想使用
babel在前台将ES6转义为ES5原主要代码如下：
<head>
<script src="./js/browser.min.js"></script>
<script type="text/babel" src="./js/main.js"></script>
</head>
<body>
<div>...</div>
</body>
方案
使用webpack对源码进行打包的时候，通过babel包对代码进行转义
前台不再引入browser.js
不使用type="text/babel"来引入ES6语法的js脚本
流程
前期工作：
1、 先装node.js
2、 由于想要在工程下使用webpack，所以在工程下的js目录执行：npm init，这时会创建package.json文件，可以配置版本、依赖等，还没有学习，等下次要配置的时候再分析一下。
3、 在工程下安装webpack
npm install --save-dev webpack
也可以全局安装：
npm install -g webpack
主要工作：
4、 配置webpack.config.js文件，webpack会读取该文件的相关参数
module.exports = {
entry: __dirname + "/reactIndex.jsx",//已多次提及的唯一入口文件
output: {
path: __dirname,//打包后的文件存放的地方
filename: "main.js"//打包后输出文件的文件名
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
},
exclude: /node_modules/
}
]
},
externals: {//react已单独引入，所以不将react打包进去目标文件
"react": 'React',
'react-dom': 'ReactDOM'
}
};
5、 安装babel，套餐型一次性安装多个0.0
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
6、在js目录下新建.babelrc，用来配置babel相关参数。webpack会自动读取该文件参数。
{
"presets": [
"es2015",
"react",
],
"plugins": []
}
presets表示原js或jsx中需要转义的语法，react转义react语法。es2015转义ES6语法
6、在js目录下使用webpack进行打包
webpack
或者使用webpack -p压缩打包
各种报错异常
- 报错：
_registerComponent(...): Target container is not a DOM element.
解决：由于main.js中需要根据div进行渲染，若将main.js放置在head中，会报这类错误。将打包后的main.js放置在</body>之前：
<script>...</script>
<body>
<div>...</div>
<script src="./js/main.js"></script>
</body>
参考文章
webpack不打包react
React开发过程中遇到的一些坑（踩多少填多少）
React入门菜出来的坑（未完待续）中参考的文章
网友评论