🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

aft-cli

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

aft-cli - npm Package Compare versions

Comparing version
0.0.1
 to
0.0.3
+5
lib/index.css
.hello-component {
color: lawngreen;
background-color: black;
}
/*# sourceMappingURL=index.css.map*/
+1
lib/index.css.map
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.css","sourceRoot":""}
+164
lib/index.js
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _classCallCheck2 = __webpack_require__(1);
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = __webpack_require__(2);
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = __webpack_require__(3);
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = __webpack_require__(4);
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = __webpack_require__(5);
var _react2 = _interopRequireDefault(_react);
__webpack_require__(6);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
//导出该组件以供其他模块使用
var HelloWebpack = function (_Component) {
(0, _inherits3.default)(HelloWebpack, _Component);
function HelloWebpack() {
(0, _classCallCheck3.default)(this, HelloWebpack);
return (0, _possibleConstructorReturn3.default)(this, (HelloWebpack.__proto__ || Object.getPrototypeOf(HelloWebpack)).apply(this, arguments));
}
(0, _createClass3.default)(HelloWebpack, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'h1',
{ className: 'hello-component' },
'Hello,Webpack'
);
}
}]);
return HelloWebpack;
}(_react.Component);
exports.default = HelloWebpack;
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = require("babel-runtime/helpers/classCallCheck");
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = require("babel-runtime/helpers/createClass");
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = require("babel-runtime/helpers/possibleConstructorReturn");
/***/ }),
/* 4 */
/***/ (function(module, exports) {
module.exports = require("babel-runtime/helpers/inherits");
/***/ }),
/* 5 */
/***/ (function(module, exports) {
module.exports = require("react");
/***/ }),
/* 6 */
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ })
/******/ ]);
//# sourceMappingURL=index.js.map
+1
lib/index.js.map
{"version":3,"sources":["webpack:///webpack/bootstrap 9e18fbdd81da8f57e175","webpack:///./src/index.js","webpack:///external \"babel-runtime/helpers/classCallCheck\"","webpack:///external \"babel-runtime/helpers/createClass\"","webpack:///external \"babel-runtime/helpers/possibleConstructorReturn\"","webpack:///external \"babel-runtime/helpers/inherits\"","webpack:///external \"react\"","webpack:///./src/index.css"],"names":["HelloWebpack","Component"],"mappings":";;AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC7DA;;;;AACA;;;;AACA;IACqBA,Y;;;;;;;;;;iCACR;AACL,mBAAO;AAAA;AAAA,kBAAI,WAAU,iBAAd;AAAA;AAAA,aAAP;AACH;;;EAHqCC,gB;;kBAArBD,Y;;;;;;ACHrB,iE;;;;;;ACAA,8D;;;;;;ACAA,4E;;;;;;ACAA,2D;;;;;;ACAA,kC;;;;;;ACAA,yC","file":"index.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 9e18fbdd81da8f57e175","import React, { Component } from 'react';\nimport './index.css';\n//导出该组件以供其他模块使用\nexport default class HelloWebpack extends Component {\n render() {\n return <h1 className='hello-component'>Hello,Webpack</h1>\n }\n}\n\n\n// WEBPACK FOOTER //\n// ./src/index.js","module.exports = require(\"babel-runtime/helpers/classCallCheck\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"babel-runtime/helpers/classCallCheck\"\n// module id = 1\n// module chunks = 0","module.exports = require(\"babel-runtime/helpers/createClass\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"babel-runtime/helpers/createClass\"\n// module id = 2\n// module chunks = 0","module.exports = require(\"babel-runtime/helpers/possibleConstructorReturn\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"babel-runtime/helpers/possibleConstructorReturn\"\n// module id = 3\n// module chunks = 0","module.exports = require(\"babel-runtime/helpers/inherits\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"babel-runtime/helpers/inherits\"\n// module id = 4\n// module chunks = 0","module.exports = require(\"react\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"react\"\n// module id = 5\n// module chunks = 0","// removed by extract-text-webpack-plugin\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/index.css\n// module id = 6\n// module chunks = 0"],"sourceRoot":""}
+23
-13
package.json
{
"name": "aft-cli",
"version": "0.0.1",
"description": "",
"version": "0.0.3",
"description": "build",
"keywords": [
"webpack",
"npm",
"package"
],
"repository": {
"type": "git"
},
"author": "halwu",
"license": "ISC",
"main": "lib/index.js",
"jsnext:main": "src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server"
"build": "webpack",
"pub": "npm publish"
},
"author": "isam2016",
"license": "ISC",
"dependencies": {
"babel-runtime": "^6.26.0",
"commander": "^2.16.0"
"react": "^15.6.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"style-loader": "^0.21.0",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.5",
"extract-text-webpack-plugin": "^3.0.0",
"style-loader": "^0.18.2",
"webpack": "^3.5.5"
}
}
+1
-1
src/index.js

@@ -6,4 +6,4 @@ import React, { Component } from 'react';

render() {
return <hl className='hello-component'>Hello,Webpack</hl>
return <h1 className='hello-component'>Hello,Webpack</h1>
}
}
-8
.babelrc
{
"plugins": [
"transform-runtime",
{
"polyfill": false
}
]
}
-103
wepack.config.js
var path = require('path');// commonJS 规范
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
var webpack = require('webpack');
var cleanWebpackPlugin = require('clean-webpack-plugin');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin')//将css 提取出来
module.exports = {
entry: APP_PATH,
output: {
path: BUILD_PATH,
// filename: '[name].[chunkhash:4].js'
filename: "[name].js",
path: path.resolve(__dirname, './lib'),// 绝对路径
libraryTarget: 'commonjs2'// common 规范
// publicPath: '' // 在构建负载的项目的时候需要异步加载，这些异步加载需要对应的URL。为string类型，相对路径[](https://juejin.im/post/5ae9ae5e518825672f19b094)
},
devtool: 'source-map',
//在使用DevServer时， 监听模式默认是开启的。
devServer: {
historyApiFallback: true,
hot: true,
inline: true,//热替换
contentBase: path.join(__dirname, ''),// 配置DEVServer HTTP 服务器文件根目录
progress: true,
host: '0.0.0.0',//若想让局域网中的其他设备访问自己的本地服务
https: true,
compress: true,// 配置是否启用 Gzip 压缩 ，
},
module: {
// rules 配置模块的读取和解析规则，通常备注loader, 通常是一个数组 注意 module:{rules:[]}配置 和 module:{loader:[]}
// 一个 rules 中包括test /include / exclude 都可以是字符串或数组
rules: [{
test: /\.js$/,
include: APP_PATH,
use: {
loader: 'babel-loader',
// 在loader 中传入很多参数的时候需要一个Object来描述，options
options: {
presets: ['es2015']
},
},
exclude: path.resolve(__dirname, 'node_modules'),
}, //用正则表达式去匹 配要用该 Loader 转换的 css 文件
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}, {
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'], //排除 node modules 目录下的文件
exclude: path.resolve(__dirname, 'node_modules'),
}]
},
//用来告诉在 Webpack要构建的代码中使用了哪些不用被打包的模块，避免二次打包
externals: '/^(react|babel-runt工me)/',
// 配置模块的寻找规则
resolve: {
// 模块别名
alias: {
// 别名
components: './src/'
},
// 配置webpack 模块寻找目录，为array默认只会去node_modules,
modules: [path.resolve(__dirname, './app/components'), 'node_modules'],
},
plugins: [
new HtmlwebpackPlugin({
template: './index.html',
title: 'Hello World app'
}),
new ExtractTextPlugin({
filename: "index.css",
disable: false,
allChunks: true
}),
// CommonsChunkPlugin 所有页面的用到的公共代码提交到common代码中
//config.optimization.splitChunks
// new webpack.optimize.CommonsChunkPlugin({
// name: 'manifest',
// })
]
};
/**
*构建npm 模块
*
* 1. es6 => es5 符合 commonJS source map
* 2. css 其他模块发布到模块里面
* 3. 尽量减少代码的冗余
* 4. 在发布出去的组件的代码中不能含有其依赖的模块的代码
*
* ex6 代码转换成正常运行的ES5代码时候需要辅助函数，正常情况下都会有这些辅助韩顺
* 可以在依赖它们时通过 require (’ babel- runtime/helpers/createClass 寸的方式导入，
* 可以使用babel-plugin-transform-runtime
*
*/