前端项目打包成为exe

Posted 2021-01-06 swp520lmg

1.安装webpack

  //全局安装

npm install -g webpack

//安装到你的项目目录

npm install --save-dev webpack

2.

babel  Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的

 

功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。

// npm一次性安装多个依赖模块，模块之间用空格隔开

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

3.

//安装 React 和 React-DOM

npm install --save react react-dom

4.

//安装css依赖

npm install --save-dev style-loader css-loader

 

//全局安装webpack-cli

 npm install webpack-cli -g

 

5

//安装插件

npm install --save-dev html-webpack-plugin

需要准备的文件：main.js ,webpack-cfig.js,package.json.

main.js :

require(‘./js/json2.js‘);

require(‘./js/ts.js‘);

require(‘./js/mqttws31.min.js‘);

require(‘./js/index.js‘);

 

webpack-cfig.js:

var webpack = require(‘webpack‘);//引入webpack

module.exports = {

  entry:__dirname+"/main.js",//主入口，必写项

  output: {

    publicPath:‘./out/‘,

    path: __dirname+"/out",//输出路径

    filename: "bundle.js"//输出名字

  },

 //读取js和css

  module: {

    rules: [

          

           {

             test: /(.jsx|.js)$/,

             use: {

                 loader: "babel-loader",

           },

           exclude: /node_modules/

           },

           {

             test: /.css$/,

             use: [{

                 loader: "style-loader"

           },

           {

                 loader: "css-loader"

             }]

           },

           {

             test:/.(jpg|png)$/,

             use: [{

                 loader: "file-loader"

             }]

           },

          

      ]

  },

//引入jquery。

 plugins:[

   new webpack.ProvidePlugin({

      $: "jquery",

      jQuery: "jquery"

    })

 

   ]

 

}

 

 

package.json:

 

{

           "name": "TicketShow",

           "main": "TicketShow/index.html",//主入口

           "window": {

                      "fullscreen": true,

                      "resizable": false

           },

           "webkit": {

                      "plugin": true

           },

           "devDependencies": {

                      "babel-core": "^6.26.3",

                      "babel-loader": "^7.1.5",

                      "babel-preset-env": "^1.7.0",

                      "babel-preset-react": "^6.24.1",

                      "css-loader": "^1.0.0",

                      "html-webpack-plugin": "^3.2.0",

                      "style-loader": "^0.23.0",

                      "webpack": "^4.17.2"

           },

           "dependencies": {

                      "react": "^16.5.0",

                      "react-dom": "^16.5.0",

                      "requirejs-text": "^2.0.15",

                      "webpack-cli": "^3.1.0",

                      "webpack-command": "^0.4.1"

           }

}

 

设置完以后直接在命令行中运行webpack.本地会生成out文件夹，文件夹内会生成bundle。Js和依赖的图片。

 

到此为止，项目打包完成。

注意：webpack打包是以模块为主，所以打包js后方法变成局部变量，在html中调用js中的方法无效。所以需要将方法设为全局变量：Window.方法名=function（）{方法内容}

 

6.将打包好的项目压缩成exe。

用到的工具nw.js.和enigma virtual box。

(1)  将项目压缩成压缩包，然后把后缀名改为nw。

(2)  将压缩包放到nw工具的根目录。用命令行执行：

copy /b nw.exe+app.nw app.exe。

会在本地生成app.exe.

到此为止，项目可以正常启动。

我们是发布所用，所以需要将app和nw打包到一起。

启动enigma virtual box。

 

选择Input和Output文件，将locales和pnacl两个文件夹拖入，然后点击add按钮添加剩下的不包含我们自己创建的文件。

点击Process，等待一会看到File successfully save则表示成功，app_boxed.exe这个文件就可以在任何目录下独立运行了。

参考资料：https://segmentfault.com/a/1190000006178770。

https://jingyan.baidu.com/article/3065b3b6a06c92becff8a483.html。